ES6 笔记－ 总结

Posted 2020-09-23

    在最近进行的项目中，已经全面使用到ES6，这里对ES6进行整理总结。用得比较多的是带＊的内容，这些语法、新增类型、模块调用等从代码量上、可读性上、操作上给项目带来了不少便利。

 

1、语法

    1.1、命令［＊＊＊］

        a、let：提供块级作用域；不存在变量提升； 暂时性死区；不允许重复声明。

        b、const：一旦声明，值不可变；其他同上2-4；仅当前模块可用，跨模块需如下定义：export const A = 1。

        c、全局变量：ES6中，var、function生命的全局变量依旧为全局对象的属性；但是let、const、class是声明的全局变量不属于全局对象属性。

    1.2、变量的解构赋值［＊＊］

        解构类型：数组解构［模式匹配、默认值、按次序匹配］、对象解构［按变量名取值、模式匹配］、字符串、函数。

        用途：交换变量、从函数返回多个值、函数参数定义、提取Json数据、函数参数默认值等。

        一句话总结：从复杂的结构中提取想要的数据。 

    1.3、循环（Iterator、for...of）［＊＊］

        Iterator：遍历器，它是一种接口，为不同的数据结构提供统一的访问机制。

        for...of：部署了Symbol.iterator属性的数据结构，就可以使用for...of进行遍历［ES6新增］。

        其中，数组、Set、Map，可以使用entries()、keys()、values()三个方法，调用后返回遍历器接口；其自身也存在遍历器接口。

 

2、数据变化

    2.1、新增数据类型

        a、Symbol：

            概念：独一无二的值。

            方法：查找symbol：

                Symbol.for()：创建新的symbol；先查找现有symbol是否存在，如果存在则使用现有的；

                Symbol()：生成新的symbol；

                Symbol.keyFor()：返回已登记的symbol类型值的key。

            应用：消除魔法字符等

        b、Set数据结构［＊＊＊］：相当于无重复值的数组。［并集、交集、差集的实现简单］

              WeakSet数据结构：成员只能是对象；其中的对象为弱引用，即垃圾回收机制不考虑。所以，其对象无法引用，weakSet本身也无法遍历。     

        c、Map数据结构［＊＊＊］：类似对象，其键值仅为字符串［字符串－值］，Map结构的键值可以是任何类型［值－值］；

            WeakMap：仅对象为键名；且键名所指对象不计入垃圾回收机制。（weap对象随时会被回收）

        d、Proxy［对象处理方法］：对目标对象架设“拦截”层，外界的访问需通过“拦截”层。且提供一种机制，对外界的访问进行过滤和改写。 

        e、Reflect［对象处理方法］：Object的优化对象。

        f、二进制数组：该接口的设计目的与WebGl有关，对动画性能有提升［未深入了解］  

    2.2、数据类型的扩展

        a、字符串扩展：主要增加了Unicode的处理方法（双字节字符）

        b、正则的扩展：主要增加了修饰符 u［检测Unicode］和 y［相当于带^的g］

        c、数值的扩展：主要提供了一些特殊值的处理方法：浮点数差的处理；Math增加了高级方法

        d、数组的扩展［＊＊］：提供了创建、填充、查找、遍历数组的方法

        e、函数的扩展［＊＊＊］：提供了参数方法、箭头函数［固定this作用域］、尾调用优化策略等

        f、对象的扩展［＊＊＊］：简写方法、属性名表达式、扩展运算符、属性操作的新方法：assign()、create()、defineProperty()［含ES5］

 

3、异步相关

    3.1、Promise ［all、race、then、catch等］［＊＊＊］

        特点：对象的状态不受外界影响；

                一旦状态改变就不会再变；

        优点：可以将异步操作，同步表达出来。

        与jquery promise的区别：

            （1）ES6 Promise是一个构造函数，jquery Promise为对象；

            （2）ES6在new Promise对象时，传入函数，在该函数内部设置resolve、reject［状态不受外界影响］；

                    jquery Promise可以任意位置设置状态。

            （3）ES6 Promise的异步处理函数将进入事件循环的任务消息队列，优先级比一般的网络、延时异步更高，且该队列为microtask，将在同一事件循环中得到处理。

    3.2、Generator［＊＊＊］

        它是一个状态机、一个遍历器。

        通过next方法进行遍历，每次遍历返回一个状态对象｛value:, done:boolean｝；通过状态对象done的状态决定遍历是否结束。且每次暂停位置由yield指令决定。亦可通过for...of进行遍历，返回done为true的value值，而非状态对象。

        通过Generator，可按需控制每个yield的执行时机。

    3.3、co［＊＊］

        其实质是Generator函数的自执行模块。由于Generator自身是一种同步机制，如果存在异步操作，其不会等待异步执行结束，所以无法完成真正的自执行。

        而co模块，可通过结合Promise实现Generator的自执行。所以使用co模块的前提条件是，Generator函数的yield命令后面只能是Thunk函数或Promise对象。

        应用：

            控制页面js执行流，协调ajax、图片资源加载等异步操作及页面渲染的时机。

    3.4、async［ES7］

       其关键字： async、await， 类似co模块实现的Generator自执行机制，同步执行异步操作。

 

4、Class［＊＊＊］

      特点：a、类似语法糖，让类的定义更清晰；

               b、其prototype不可枚举；

                c、继承：extends；

                d、使用getter、setter拦截其存取行为。

                

5、Module模块［＊＊＊］

    设计思想尽量静态化，在编译时加载。

    优点：不需要使用UMD模式，服务器、浏览器都将支持。

    模块功能主要由：export［输出］和import［输入］命令构成～

    模块的继承：export ＊ from ‘circle‘

    加载的实质：commonJS模块是值得拷贝，而ES6是值的引用。ES6为动态引用，加载时不去运行js；而commonJS加载时运行。