003ES6新增语法

---

003 ES6新增语法

添加大概内容：

---

一、let关键字

等价于之前的var，但具备var没有的特点：
1.在一个大括号中，使用let关键字声明的变量具有块级作用域，也就是之后的语句无法访问这些变量

for (var i=0; i<3; i++){
    }
    console.log(i);//可以访问到i
    for (let i=0; i<3; i++){
    }
    console.log(i);//无法访问到i
    if (1){
        var a = 20;
        let b = 20;
    }
    console.log(a);//可以输出a
    console.log(b);//无法输出b

2.使用let关键字没有变量提升，也就是必须先声明后使用

console.log(m);//程序直接在这里中断
    let m = 1;
    console.log(n);//输出undefined，程序继续执行
    var n = 1;
    console.log('123');

3.let关键字声明的变量具有暂时性死区特性，也就是一旦在大括号中声明了一个变量，则该变量就与这个块绑定了，与外部同名的变量没有关系

二、const关键字

也是用来声明变量的，只是声明的变量地址不可更改，也就是值不可更改
1.使用const关键字声明的变量具有块级作用域，没有变量提升
2.const声明常量时必须赋值
3.对于一般的数据类型，变量值不可更改，比如const pi = 3.14; 对于复杂的数据类型，比如数组，可以更改数组中元素的值，但不能重新给数组整体赋值

    const pi = 3.14;
    pi = 3;//报错
    const ary = [1,2];
    ary[0] = 'a';
    ary[1] = 'b';
    ary = ['a','b'];//报错

三、解构赋值

1.含义

解构即分解数据结构，在ES6中可以按照一 一对应的方式从数组或者对象中提取值，再将值赋给变量，使得代码更加简化。

2.数组结构

let arr = [1,2,4];
let [a,b,c]=arr;//即对a、b、c分别赋予1、2、4

对于没有对应值的情况赋予undefined

3.对象结构

    let person = {name:'zrj',age:18};
    let {name1,age1}=person;//即对name1、age1分别赋予zrj、18
    let {name:myName,age:myAge} = person;//进行属性匹配，找person中的name属性
    //如果有则赋值给myName变量，如果没有则不赋值

四、箭头函数

1.基本方式

箭头函数主要用来简化函数的定义，基本使用方式为（形参）=> {函数体}

    let sum = (a,b) => {return a+b;}
    let square = a => a*a;
    //当函数体只有一句代码且代码执行结果就是返回值时可以省略大括号和return
    //当形参只有一个时小括号也可以省略
    console.log(square(3));
    console.log(sum(1,3))

2.箭头函数的this

箭头函数不绑定this关键字，即箭头函数中的this指向函数定义位置的上下文的this

    function fn(){
        console.log(this);
        return () => {
            console.log(this)
        }
    }
    const obj = {name: 'zrj'};
    const resfn = fn.call(obj);//输出obj对象，因为call改变了函数的指向
    resfn()//再次输出obj对象，因为箭头函数没有this，其this是fn的this

五、剩余参数

1.含义

函数的实参大于形参的个数，可以在最后一个形参前加…，用于表示后面的参数数量不定。

2.使用方式

使用时，…args所包括的所有参数相当于构成了一个数组，可以对数组进行遍历。

    //n次幂求和
    function sum(n, ...args){
        let sum = 0;
        args.forEach(function (value, index, array){
            let number = 1;
            for (let i = 0; i<n; i++){
                number *= value;
            }
            sum += number;
        })
        return sum;
    }
    console.log(sum(2,1,2,3));

此外，剩余参数还能和解构赋值一起使用，在接受的变量前加…，意味着剩余的被接收参数都传入这个变量中。

    let arg = [1,2,3,4,5]
    let [a,...b] = arg;
    console.log(a);
    console.log(b);

六、扩展运算符

1.含义

与剩余参数正好相反，这是把变量拆分成一个用逗号进行分离的序列。可以认为…arr时执行了一个拆分操作，也可认为就是去掉了中括号。

    let arr = [1,2,3,4,5];
    console.log(...arr);//打印出1 2 3 4 5;

2.应用

（1）进行数组的合并

	let arr1 = [1,2,3];
    let arr2 = [5,6,7];
    let sumArr = [...arr1,...arr2];
    arr1.push(...arr2);//也可使用push进行添加，实现合并
    console.log(sumArr);
    console.log(arr1);

（2）将伪数组转换为真正的数组
伪数组具有length属性，可以按索引方式存储数据，但不具有数组的push，pop等方法。

    var allDiv = document.querySelectorAll('div')
    console.log(allDiv);
    //allDiv.push('a');//报错
    var arrDiv = [...allDiv];
    arrDiv.push('a');//可以使用数组的push方法
    console.log(arrDiv);

3.Array的扩展方法Array.form()

与扩展运算符功能相同，也是将伪数组转换为数组，我觉得功能更强大。

var arrLike = {
        '1': 1,
        '2': 2,
        'length': 3
    }//创建了一个伪数组
    var arr = Array.from(arrLike);//将伪数组转换为数组
    console.log(arr);//由于没有0，故第一个是undefined，第二第三项分别为1和2

七、Array的实例方法

ps.Array方法格式是Array.xxx，Array实例方法是一个数组实例arr，使用arr.xxx（xxx是某个方法）

1.find()

查询数组中是否有符合要求的内容，括号内为查询方法，若查询到了（即方法中返回了true），则返回符合要求的的内容，否则返回undefined，这也是和some的区别之处，some查到了返回true，没查到返回false

    let ary = [{
        id: 1,
        name: 'zhangsan'
    },{
        id:2,
        name: 'lisi'
    }]
    let m = ary.find(function (value, index, array){
        return value.id === 2;
    });
    console.log(m);
    //代码简化
    let n = ary.find(value => value.id ===2 );

2.findIndex()

使用方法与find相同，只不过返回值不同，符合要求时返回内容对应的序号，查询不到返回-1

3.includes()

输入某个值，查询数组中是否有这个值，有则返回true

八、其他新增内容内容

1.模板字符串

省去了传统使用+号进行字符串拼接的方式，而采用${xxx字符串}，而且模板字符串可以换行并且{}中还能调用函数。

    let person = {
        name: 'zrj',
        age: 18
    }
    let m = `我是${person.name}，我今年${person.age}岁`;
    console.log(m);

2.startsWith()、endWith()

判断一个字符串是否时以某个字符串参数开头或结尾，满足条件返回true

    let result = 'Hello world'.startsWith('Hello');
    console.log(result);

3.repeat()

将某个字符串复制n次，返回复制后的字符串

4.Set数据结构

（1）这是ES6新增的一种数据结构，类似于数组，但其成员值都是唯一的
（2）创建方法：new Set()创建一个空的set，也可以在括号中传入一个数组
（3）使用set可进行数组的去重

    ary1 = [1,2,3,4,5,4,2,1];
    let s1 = new Set(ary1);
    console.log(s1);//自动过滤重复的值
    ary2 = [...s1];//实现ary1中重复值的去除

（4）set数据结构的实例方法：add(添加某个值)，delete(删除某个值)，has(是否存在某个值)，clear(清除某个成员)

---