对ES6的一次小梳理

今天闲的没事回顾了ES6的一些知识，下面写的不是特别详细，只是类似于一个大纲，今天我竟然敢睡到八点起床了，md，我膨胀了，赶紧写篇博客压压惊

下面来看看ES6给我们提供了哪些新东西

（1）新的变量声明方式let/const（不具备变量提升，不可重复声明）

    let：声明的变量仅在块级作用域内有效
    const：常量，值一旦定义不可更改；声明时要赋初值

 

（2）解构赋值：对象/数组赋值

    对象赋值：对象根据属性名一一对应，无序对应
        首先有这么一个对象const props = {
            className: 'tiger-button',
            loading: false,
            clicked: true,
            disabled: 'disabled'
            }
        // es5
        var loading = props.loading;
        var clicked = props.clicked;
        // es6
        const { loading, clicked } = props;
    数组赋值：数组以序列号一一对应，有序对应；允许指定默认值；内部使用严格相等运算符（===）
        // es6
        const arr = [1, 2, 3];
        const [a, b, c] = arr;

        // es5
        var arr = [1, 2, 3];
        var a = arr[0];
        var b = arr[1];
        var c = arr[2];

 

（3）字符串的遍历：for...of循环遍历

        for(let codePointAt of 'hicai'){
        console.log(codePointAt);
        }  // h i c a i
        遍历对象用for...in

 

 

 

（4）箭头函数：

        // es5 写法
        var fn = function(a, b) {
          return a + b;
        }
        // es6 箭头函数写法，当函数直接被return时，可以省略函数体的括号{}
        const fn = (a, b) => { a + b };  // {}可以省略

　　注意：

        　　箭头函数可以替换函数表达式，但是不能替换函数声明；

        　　箭头函数本身没有this，其中的this指的是外层的this；

        　　箭头函数不可以使用arguments对象，该对象在函数体内不存在；

        　　不可以使用yield命令，因此箭头函数不能用作Generator函数。

 

 

（5）字符串模板：为了解决+号拼接字符串的不便利。用 ` `包裹字符串，在其中用${}包裹变量或表达式。

// es5写法
        var a = 20;
　　　　　var b = 30;
　　　　　var string = a + "+" + b + "=" + (a + b); 

// es6写法
        const a = 20;const b = 30;const string = `${a}+${b}=${a+b}`;
                     

 

（6）展开运算符：（提高代码效率）

        ES6中用...来表示展开运算符，可以将数组方法或者对象方法进行展开；
        数组：
            const arr1 = [1, 2, 3];
            const arr2 = [...arr1, 10, 20, 30];
            // 这样，arr2 就变成了[1, 2, 3, 10, 20, 30];
        对象：
            const obj1 = {a:1,b:2,c:3}
            const obj2 = {
            ...obj1,  d: 4,  e: 5,  f: 6
        }
        // 结果类似于 const obj2 = Object.assign({}, obj1, {d: 4})

 

（7）class（类）

        在js中，每个对象都有原型对象，所有js对象都从原型上继承方法和属性；
        ES5中，属性放在构造函数constructor里，方法放在原型prototype上；
        ES6中引入类class来代替构造函数constructor；还提供了extends划分super关键字；

（8）promise对象：解决异步编程

        特点：a）对象的状态不受外界影响，promise对象代表一个异步操作，有三种状态：pending（进行中）、resolve（成功）、rejected（失败）
        一旦状态改变，就不会改变
        基本用法：
        Promise构造函数的两个参数是resolve和reject；
        Promise实例生成后，可以用then方法分别制定resolve和rejected状态的回调函数；
        Promise的then方法是定义在原型对象Promise.prototype上的，then方法返回的是一个新的Promise实例，不是原来那个Promise实例，因此可以用链式写法；
        方法1：Promise.all()方法用于将多个promise实例包装成一个新的promise实例；
        方法2：Promise.race()方法只要有一个peomise执行完毕就执行

（9）模块化

export用于对外输出本模块（一个文件可以理解为一个模块）变量的接口

import用于在一个模块中加载另一个含有export接口的模块。

（10）数组新API

    Array.from()方法可以将伪数组转为数组
　　 Array.of()将一组数字转化为数组

（11）Set和Map数据结构：

        

　　　　Set
            a）Set实例成员值唯一存储key值，map实例存储键值对（key-value）
            b）Set实例的方法分为两大类：操作方法（用于操作数据）和遍历方法（用于遍历成员）。
            操作方法：
                add（value）：添加某个值,返回Set结构本身
                delete（value）：删除某个值，返回布尔值
                has（value）：返回布尔值，表示该值是否为Set的成员
                clear（）：清除所有成员，没有返回值
            遍历方法：
                keys()：返回键名
                values()：返回键值   
                entries()：返回键值对
                forEach()：使用回调遍历每个成员
      　Map  
            a）Map的键实际上是跟内存地址绑定的，只要内存地址不一样，就视为两个键；
            b）Map实例的属性和操作方法：
                size属性：返回Map结构的成员总数；
                set(key, value)：设置键名key对应的键值为value，然后返回整个Map结构，若key已有值，则更新键值，否则生成该键。
                get(key)：读取key对应的键值
                has(key)：返回布尔值，表示某个键是否存在当前map对象中。
                delete(key)：删除某个键，返回true，删除失败返回false
                clear()：其清除所有成员，没有返回值
            c）map的遍历方法：
                keys()：返回键名
                values：返回键值
                entries：返回所有成员
                forEach()：遍历map的所有成员，map的遍历顺序就是插入顺序

 

 

 

（12）Symbol：新的数据类型，表示独一无二的值，不会与其他属性名产生冲突；

            Symbol值通过Symbol函数生成；
            let s = Symbol();
            typeof s;    // “symbol”
　　　　注意：

            Symbol函数前不能使用new命令，

            Symbol值不是对象，所以不能添加属性；

　　　　　　Symbol函数可以接受一个字符串为参数，表示对当前Symbol实例的描述，因此相同参数的Symbol函数的返回值是不相等的；

 

（13）generator拦截器