ES6 - let、const，解构赋值，箭头函数，剩余参数，数组、字符串扩展方法，Set数据结构

简介

• ES6的全称是ECMAScript,是由ECMA国际标准化组织制定的一项脚本语言的标准化规范

1. 2015年6月-发布ES2015
2. 2016年6月-发布ES2016
3. ...

• ES6实际上是一个泛指，泛指ES2015年及后续的版本

• 为什么使用ES6？

1. 每一次标准的诞生都意味着语言的完善，功能的加强，JavaScript语言本身也有一些令人不满意的地方
2. 变量提升特性增加了程序运行时的不可预测性
3. 语法过于松散，实现相同的功能，不同的人可能会写出不同的代码

新增语法

let

• ES6中新增的用于声明变量的关键字
• let声明的变量只在所处于的块级（一对{ } ）有效

        if (true) {
            let a = 10;
            console.log(a); // 10
        }
        console.log(a); //  Uncaught ReferenceError: a is not defined

• 防止循环变量变成全局变量
• 注意：使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特性。

        for (var j = 0; j < 2; j++) {}
            console.log(j) // 2
        for (let i = 0; i < 2; i++) {}
            console.log(i);//Uncaught ReferenceError: i is not defined

• 不存在变量提升，只能先声明才能再使用
• 暂时性死区（只要块级作用域内存在let命令，它所声明的变量就“绑定”这个区域，不再受外部的影响。

        var num = 10;
        if (true) {
            console.log(num);
            //Uncaught ReferenceError: Cannot access 'num' before initialization
            let num = 20;
        }

• 经典面试题

        var arr = [];
        for (var i = 0; i < 2; i++) {
            arr[i] = function(){
                console.log(i);
            }
        }
        arr[0]();
        arr[1]();

解析：var声明变量为全局变量，循环结束时i = 2，所以两次打印都为2

        var arr = [];
        for (let i = 0; i < 2; i++) {
            arr[i] = function(){
                console.log(i);
            }
        }
        arr[0]();
        arr[1]();

解析：每次循环都会产生一个块级作用域，每个块级作用域中的变量都是不同的，函数执行时输出的是自己上一级（循环产生的块级作用域）作用域下的值。所以依次打印出 0 和 1。

const

• 声明常量，常量就是值（内存地址）不能变化的量
• 具有块级作用域
• 声明常量时必须赋值

const PI; //Uncaught SyntaxError: Missing initializer in const declaration

• 常量赋值后，值不能修改（基本数据类型不可更改，复杂数据类型可更改内部的值，数据值本身不可更改）

        const PI = 3.14;
        PI = 100; //Uncaught TypeError: Assignment to constant variable.

        const ary = ['100','200'];
        ary[0] = 101;
        ary[1] = 102;
        console.log(ary);// [101, 102]
        ary = ['101','102'];//Uncaught TypeError: Assignment to constant variable.

let const var 的区别

当声明不变化的（如函数）使用const，从而让JavaScript不必一直监测该值的变化，提升效率。

解构赋值

• ES6中允许从数组中提取值，按照对应位置，对变量赋值，对象也可以实现解构

数组解构 允许我们按照一一对应的关系从数组中提取值，然后将值赋值给变量。如果解构不成功，变量的值为undefined

        let [a,b,c,d,e] = [1,2,3];
        console.log(a); // 1
        console.log(b); // 2
        console.log(c); // 3
        console.log(d); // undefined
        console.log(e); // undefined

对象解构 允许我们使用变量的名字匹配对象的属性 匹配成功将对象属性的值赋值给变量，psex为别名使用

        let person = {name : 'zhangsan',age : 30,sex : 'nan'};
        let { name, page, sex : psex } = person;
        console.log(name); // zhangsan
        console.log(page); // undefined
        console.log(psex); // nan

箭头函数

ES6中新增的定义函数的方式，用来简化函数定义语法的

        const fn = () => {
            console.log(1);
         }

• 函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号

        const sum = (num1,num2) => console.log(num1 + num2) ;

• 如果形参只有一个，可以省略小括号

        const fn = v => console.log(v);

• 箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this。下例子都指向fn，即obj

        function fn(){
            console.log(this);
            return () =>{
                console.log(this);
            }
        }
        const obj = {name: 'zhangsan '};
        fn.call(obj);
        //{name: "zhangsan "}
        const resFn = fn.call(obj);
        resFn();
        /*
        {name: "zhangsan "}
        {name: "zhangsan "}
        */

• 箭头函数面试题 此时this指向window，因为对象不产生作用域，say方法被定义在全局。

        var obj = {
            age : 20,
            say : () =>{
                alert(this.age);
            }
        }
        obj.say(); //undefined

剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组

        const sum = (...args) => {
            let total = 0;
            args.forEach( item => total += item );
            return total;
        }
        console.log(sum(10,20,30));

剩余参数和解构配合使用

        let students = ['zhou','wu','sheng'];
        let [s1,...s2] = students;
        console.log(s1);//zhou
        console.log(s2);//["wu", "sheng"]

Array的扩展方法-扩展运算符

扩展运算符（展开语法）

• 扩展运算符可以将数组或者对象转化为逗号分隔的参数序列

        let ary = [1,2,3];
        console.log(...ary);//1 2 3

• 扩展运算符的应用 - 合并数组

        let ary1 = [1,2,3];
        let ary2 = [4,5];
        //方法一
        let ary3 = [...ary1,...ary2];
        //方法二
        ary1.push(...ary2);

• 将类数组或可遍历对象转换为真正的数组 || 构造函数方法Array.from()也可以做到

        var oDivs = document.getElementsByTagName('div');

        var ary = [...oDivs];
        var ary2 = Array.from(oDivs);

• 构造函数方法Array.from() 还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

        let arrayLike = {
            '0':1,
            '1':2,
            'length':2
        }
        let newAry = Array.from(arrayLike,item => item *2);

• 实例方法 find()   用于找出第一个符合条件的数组成员，如果没有找到返回undefined
• findIndex()   返回传入一个测试条件（函数）符合条件的数组第一个元素位置 , 如果没有符合条件的元素返回 -1
• includes()    判断一个数组是否包含一个指定的值，如果是返回 true，否则false

String的扩展方法 - 模板字符串

1. 模板字符串 ES6新增的创建字符串的方式，使用反引号定义
2. 模板字符串中可以解析变量
3. 模板字符串中可以换行
4. 可以调用函数

        let name = `模板字符串`;
        let other = `nihao ${name}`;
        let html = `

            ${name}
            ${other}
            
`;
        const fun = () => 'fanhuizhi';
        let greet = `${fun()}`;

• startsWith() 和 endsWith() 

startsWith() 表示参数字符串是否在原字符串的头部，返回布尔值

endsWith() 表示参数字符串是否在原字符串的尾部，返回布尔值

        let str = 'hello world';
        str.startsWith('hell');
        console.log(str.startsWith('hell'));//true
        str.endsWith('d');
        console.log(str.endsWith('d'));//true

• repeat() 表示将原字符串重复n次，返回一个新字符串

        'x'.repeat(2);
        console.log('x'.repeat(2));//xx

set数据结构

1. ES6提供了新的数据结构Set，它类似于数组，但是成员的值都是唯一的，没有重复的值
2. Set本身是一个构造函数，用来生成Set数据结构
3. Set函数可以接受一个数组作为数组，用来初始化
4. 利用set数据结构可以做数组去重
5. add(value)：添加某个值，返回Set结构本身
6. delete（value）：删除某个值，返回一个布尔值，表示删除是否成功
7. has（value）:返回一个布尔值，表示该值是否为Set的成员
8. clear（）：清除所有成员，没有返回值
9. 遍历 Set结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值
10. 使用场景：电商网站搜索历史

        const s1 = new Set();
        console.log(s1.size);//0

        const s2 = new Set(['a','b']);
        console.log(s2.size);//2

        const s3 = new Set(['a','b','b','a']);
        console.log(s3.size);//2

        const ary = [...s3];
        console.log(ary);//["a", "b"]

        const s4 = new Set([1,2,3,4,5]);
        s4.forEach(val=>{
            console.log(val);
        })