ES6

1. 什么是ES6？
   ES的全称是ECMAScript,它是由ECMA国际标准化组织，制定的一项脚本语言的标准化规范。
   JS是遵循这个标准的脚本语言。
   
   ES6实际上是一个泛指，泛指ES2015及后续的版本。

ES6新增语法

let

ES6中新增的用于声明变量的关键字。用于替代var
let声明的变量只在所处于的块级有效，就是一个大括号内有效，在大括号外无效
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200313113147946.png)
好处是在结构比较复杂时，防止内层变量覆盖外层变量
可用于循环中，防止循环变量变成全局变量。

**let关键字** 
只能先声明再使用，不存在变量提升。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200313114410331.png)
暂时性死区

2. 经典面试题

 var arr = [];
        for (var i = 0; i < 2; i++) {
            //当i=2时，退出循环，此时i为2.
            arr[i] = function() {
                console.log(i);
            }
        }
        //调用函数时，循环已经执行完，此时i等于2.所以最后输出为2
        //关键点在于变量i是全局的，函数执行时输出的都是全局作用域下的值
        arr[0]();
        arr[1]();

arr[0]();
        arr[1]();
        let arr = [];
        //每次循环都会产生一个块级作用域，每个块级作用域中的变量都是不同的，函数执行时输出的是自己上一级（循环产生的块级作用域）作用域下的值。
        for (let i = 0; i < 2; i++) {
            arr[i] = function() {
                console.log(i);

            }
        }
        arr[0]();
        arr[1]();

const

1. 作用：声明常量，常量就是值（内存地址）不能变化的量
   （1） 具有块级作用域
   （2）声明常量时必须赋初识值
   
   （3） 常量赋值后，值不能修改

 const PI = 3.14;
        PI = 100;

对于复杂数据类型来说，内部的值是可以更改的，但是不能重新赋值。

let，const，var的区别

1. 使用var 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象
2. 使用let声明的变量，其作用域为该语句所在的代码块内，不存在变量提升
3. 使用const声明的是变量，在后面出现的代码中不能再修改该变量的值
   
   如果存储的数值不需要变化，则使用const，比如函数内的值，算数公式的值等，js不需要时时监控。

解构赋值

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

数组解构
let [a, b, c] = [1, 2, 3];
console.log(a);
console.log(b);
console.log©;

如果解构不成功，变量的值为undefined

let[foo] = [];
let[bar, foo] = [];

对象解构
对象解构允许我们使用变量的名字匹配对象的属性 匹配成功 将对象属性的值赋值给变量
这种方法，变量名字与匹配对象的名字必须相同。

 let person = {
            name: 'zhangsan',
            age: 20
        };
        let {
            name,
            age
        } = person;
        console.log(name);
        console.log(age);

变量名字与匹配对象的名字可以不必须相同

let {
            name: myName,
            age: myAge
        } = person;
        console.log(myName);
        console.log(myAge);

箭头函数

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

const fn = () => {
            //函数体
            console.log(123);

        }
        fn();

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


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

const fn = v => {
            alert(v);
        }
        fn(20);

（3）箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this。

（4）面试题

 var age = 100;
        var obj = {
            age: 20,
            say: () => {
                alert(this.age);
            }
        }
        obj.say();  //返回的是100

剩余参数

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

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

剩余参数和结构配合使用

 let ary1 = ['张三', '李四', '王五'];
        let [s1, ...s2] = ary1;
        console.log(s1);
        console.log(s2);

Array的扩展方法

let ary = ["a", "b", "c"];
        // ...ary   "a", "b", "c"
        //元素之间的逗号，被当做console.log的分割符
        console.log(...ary);

扩展运算符可以应用于合并数组


将类数组或可遍历对象转换为真正的数组

构造函数方法：Array.from()

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

var arrayLike = {
            "0": "1",
            "1": "2",
            "2": "3",
            "length": 3
        }
        var ary = Array.from(arrayLike, item => item * 2);
        console.log(ary);