ES5和ES6

姜日月
166 阅读7分钟

1、严格模式

ES5推出

1.1 严格模式的好处

1.提高了代码的运行效率
2.提高了代码的安全
3.消除了一些不合理的现象(怪异模式)

1.2严格模式的注意事项

 1."use strict"前面不能有其他代码块
 
 2.使用严格模式使用关键字(var let const)
 
 3.禁止使用八进制
 
 4.禁止函数内部的this指向全局window,而是undefined
 
 5.不允许在非函数的代码块中声明函数
 
 6.argument与形参不同步

2、ES5中bind、call和apply

2.1.与this相关知识点

事件里的this,指向是当前的dom对象

函数内部的this,默认是window,在严格模式下是undefined

对象的方法的this,指向当前对象

定时器与延时器的this,默认是window

构造函数被实例化后,this指向当前的实例对象

bind、call、apply改变this指向，bind不会立即执行

箭头函数的this指向上下文对象

箭头函数中bind,call,apply不能改变this指向

2.2. es5的bind,改变this指向,但是它不会立即执行

bind(被改变的this的对象,形参)

image.png

image.png

2.3.call和apply 改变this指向

  • call:与bind用法相同,不同的是call后面不需要加小括号；
  • apply: 第二个参数是数组；
  • 相同点：call和apply都能改变this指向,并立即执行；
  • 不同点：参数不一样,apply的第二个参数是数组

3、高阶函数

之前目前学过的数组中的高阶函数有forEach、Map、some、every、reduce、filter

reduce()用法:接收一 个函数作为累加器，数组中的每个值(从左到右)开始缩减，最终为一个值，是ES5中新增的一个数组逐项处理方法

var result = arr.reduce(function(pre, cur, index, array){
    console.log("前一个值:”+ pre + "当前值: "+ cur + "，下标: "+ index + "，数组:”+ array);
    return cur;
 },0)

4、ES6 let和const

let块级作用域值类型和引用类型都可以

1）可以防止变量提示

2）块级作用域

3）for循环使用let防止泄漏

image.png

image.png

4）for循环中绑定事件使用let,解决下标

image.png

const 常量值类型和引用都可以，值类型不能被修改，引用类型不修改地址可以修改值,如果希望一个值不变，不受影响就使用const

image.png

image.png

引用类型不修改地址可以修改值

image.png

image.png

4.1 let 和const的区别?

let 是块级作用域，可以防止变量提升，值可以被修改

const 也局部块级作用域,可以防止变量提升,(string, number, boolean , null, undef ined , bigint)是值类型；(object, Date, Array, Funct ion, RegExp)是引用类型 (先声明,后使用)

5、ES6 中eval

eval() 把字符串解析成js代码（不安全）

image.png

image.png

eval()+"use strict"形成eval函数作用域

image.png

6、ES6

6.1 新增强的字符串

  • 增强字符串模板
  • includes是否包含指定的字符串,如果找到了返回true,否则返回false
  • startsWith()是否在开头位置，满足返回t rue
  • endsWith()是否在结束位置 , 满足返回t rue
  • repeat()

6.2 新增的数组方法(Array)

Array. from()把伪数组变成真数组

    var obj={0: "刘某晨",1:"谢波" ,2:"唐豪" , length:3};
    var arr=Array.from(obj,function(item,index){
            return item+"同学"
    };
    Array. isArray(arr)   //检测是否是数组 是 true 不是 false

Array.of() 把一组数，转换成数组

    var arr = Array.of(11, 22, 33, 44) 
    console. log(arr);

Array. find() 查找

   <input id="txt"><button id="btn">搜索</button>
<script>
    var arr=[
            {id: 1, nane: “刘某晨"。 address: “中国湖南长沙" },
            {id: 2, nane: “罗某祥”，address: “中国台湾”}，
            {id: 3, name: “吴某凡"，address: “中国加拿大省" },
            {id: 4, nane: '李某锋*，address: “中国北京”},
        ]
        btn.onclick=function () (
        var info=arr. find(function (item) (
            return item.nane==txt.value
        });
        console. log(info);

Array. findIndex() 满足返回下标,不满足返回-1 （实现删除功能）

    <style>
        table,thead,tbody,tr,td,th{
            border: 1px solid black;
            border-collapse: collapse;
            text-align: center;
        }
        img{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>图片</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>111</td>
            </tr>
        </tbody>
    </table>
    <script>
        var obody=document.querySelector("tbody");
        var goodList=[
            {id:1001,name:"芒果",img:"images/fruits1.png"},
            {id:1001,name:"葡萄",img:"images/fruits2.png"},
            {id:1001,name:"橙子",img:"images/fruits3.png"},
            {id:1001,name:"菠萝",img:"images/fruits4.png"},
        ]

        function looadData(){
            obody.innerHTML=goodList.reduce(function(pre,cur){
                pre+=`
                <tr>
                    <td>${cur.id}</td>
                    <td>${cur.name}</td>
                    <td>
                        <img src=${cur.img} alt="#">
                    </td>
                    <td>
                        <a class="del" data-Info=${cur.id}>删除</a>
                    </td>
                </tr>
                `
                
                return pre
            },"")
        }
        looadData();

        obody.addEventListener("click",function(e){
            if(!(e.target.nodeName=="A"&&e.target.className=="del")){
                return
            }
            var id=e.target.getAttribute("data-Info");
            console.log(id);

            var uid=goodList.findIndex(function(item){
                return item.id==id
            })
            goodList.splice(uid,1);

            looadData();
        })        
    </script>

6.3 箭头函数的this

6.3.1 箭头函数的语法

  • 1.如果只有一个参数，可以省略小括号,如果只有一个参数,参数有默认参数,必须要有小括号
  • 2.如果返回结果只有一句话， 可以省路大括号和return;如果返回的是一个对象，就用小括号()包裹起来
  • 3.箭头的this,指向上下文对象
  • 4.箭头函数不能被new。 它没有构造器(nstructor)
  • 5.箭头函数,没有原型方法
  • 6.箭头函数的this,不能被bind、call和apply改变

7 对象增强

属性简写

    var name="刘德华" ;
    var obj={name}; 
    console. log(obj);

方法简写

         var person={
            show(){
        }
      }


    var a = "show";
    var obj1 = {
        [a]() {
    }
    console. log(obj1);

7.1 解构赋值

解构赋值的好处：

  • 1.快速提取JSON字符串
  • 2.交换数组中的2个元素
    var [a,b,c,f]=[11,22,33,44]
    结果:11 22 33 44

    var obj={name:"刘德华, children: {name :"小刘" ,age:20}};
    //把children的name , age取出来
    var {children: {name, age}}=obj ;
    console.log (nane ,age) ;
    var person2 = {
        age: 30,
        address: "中国"
    }
    var person3=0bject. assign({} , person1)

    var {age, name1:name66}={name1: "刘德华" ,age:30};//=左边是别名,=右边是赋值

image.png

7.2 扩展运算符

    找出最大值
    var arr=[6,7,3,4,8];
    console. log( Math.max(...arr)); I .

    找出最小值
    var arr=[6,7,3,4,8];
    console. log( Math.min(...arr)); I .

    数组和对象的拷贝
    var obj = { name: “刘德华"，age: 20 };
    var obj1=0bject. assign({}, obj);
    console. log( {...0bj});

7.3 Object方法

Object.is() 恒等于比较

console. log(0bject. is(1,1));//true
console. log(0bject. is(1,"1")); //false
console. log(0bject. is(+0,-0)); //false
console. log(0bject. is (NaN,NaN)); //true

Object.assign()合并

 var person1 = {
        name: "刘德华",
        age: 20
    }
 var person2 = {
        age: 30,
        address: "中国"
    }
 var person3=0bject. assign({} , person1)

Object.keys() 遍历数组的键名

Object.value() 遍历数组的值

Object.entries() 遍历数组的键和值

image.png

7.4 模块化

  • EcmaScriptModules ESM（一个js文件就是一个模块,模块与世隔绝）
  • ES的模块化积木复用
  • import 导入
  • export 导出

image.png

image.png

7.5 Map超对象

创建一个Map对象

var map=new Map()

  • clear 清除
  • delete 删除
  • get 获取
  • set 设置
  • has 判断是否存在
  • Map需要通过 for..of来遍历
  • size 属性,是长度的意思
    //遍历
    console. log(-----遍历1-----);
    map. forEach( (val, key)=>{
        console. log(val, key);
    })
    console. log(-----遍历2-----);
    for(let [k,v] of map){
        console. log(k,v);
    }
    console. 1og"-----遍历3-----");
    for(let k of map.keys()){
        console. log(k);
    }
    console. 1og"-----遍历4-----");
    for(let v of map.values()){
        console. log(v);
    }

7.5 Set集合

创建一个Set集合

var set=new Set()

  • 不会有重复的
  • clear()
  • add()
  • delete()
  • has()
  • size属性
  • Set不能被for..of 迭代，它提供keys(), values(),entries()

WeakSet

weakSet 专门存在对象的set

  • 跟set相似
  • 不能有重复
  • 只能是对象
//专门存储对象的set (并不能完成对象去重)
let obj = {name:'jack'}
let weakSet = new WeakSet([obj,obj,{name:'jack'}])
console.log(weakSet)

Class类

类 抽象的

class的特性

  • class修饰的内容是一个类 这个类是用于产生对象的
  • 类 （描述的模板） 与 对象 （产生的实例）
  • 从类变成对象的过程叫做构造 使用new关键词来构造 new关键词调用的函数被称为构造函数
  • 构造函数的首字母大写
  • 类名首字母大写
class Person {
    //构造函数 在类中的构造函数的名字就是类名
    constructor() {
        this.name = "张三" //这个地方的this指向对应的构造的对象
        //person.name = '张三'
    }
}
//构造实例
let person = new Person()
console.log(person)
static 修饰静态函数及属性

类中的关键词 static 静态的 静态方法使用类名直接点 （静态函数优先加载）

class Person {
    //构造函数 在类中的构造函数的名字就是类名
    constructor() {
    }
    static sayHello() {
        console.log('hello')
    }
    static max = 10
}
Person.sayHello()
console.log(Person.max)
综合示例
class Dog {
	constructor(name, age) {//初始化 值
	this.name = name,//属性1
	this.age = age//属性2
}
//行为1
	run() {
//this指向实例化对象
	console.log(this.name, this.age);
}
//行为2
	eat() {

}
//静态方法
static sleep() {
	console.log("我是静态方法,我不需要被实例化,直接类.方法");
	console.log(this, "Dog类");
 	}
}

//实例化 具体
var dog = new Dog("小白鸽", 3)
console.log(dog);
dog.run()

var dog1 = new Dog("二哈", 5)
console.log(dog);
dog1.run()

//静态方法
//不能实例化  只能通过类名点
 Dog.sleep()

继承

子类继承父类非私有的属性和方法

extends 关键词用于继承
//extends 继承 用于类与类之间的继承  猴子 -- 猩猩 --- 类人猿 --- 人
//继承只能继承非私有的内容 
class Student extends Person{
    //继承的类中的构造函数 如果要用到this 必须先调用的super （父类构造函数）
    constructor(){
        super() //指向父类的构造函数 ===> this.name = "张三" //student.name = '张三'
        this.age = 18 
        //student.age = 18
    }
}
let student = new Student()
console.log(student);
示例
 class Person {
            constructor(name, age) {
                this.name = name;
                this.age = age;
            }
            eat(str) {
                console.log(`我${this.name}爱吃` + str);
            }
            sleep(num = 8) {
                console.log(`我${this.name},今年${this.age}岁,我特能睡,一天睡` + num + "小时");
            }
        }

        //学生
        //继承
        class Student extends Person {
            constructor(sid, name, age, sex) {
                super(name, age);
                this.sid = sid;//添加自己独特的属性
                this.sex = sex
            }
            //学习的方法
            study() {
                console.log("我很爱学习,学习使我妈快乐");
            }
        }
        var stu = new Student(9527, "向柯帆", 19, "男")
        stu.eat("水果")
        stu.sleep(10)
        stu.study()
		//可以继承静态方法和属性
		Student.run()
avatar
文章
阅读
粉丝