ES6-总结

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

 

一、语法

    1.一、命令［＊＊＊］

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

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

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

    1.二、变量的解构赋值［＊＊］

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

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

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

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

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

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

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

 

二、数据变化

    2.一、新增数据类型

        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.二、数据类型的扩展

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

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

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

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

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

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

 

三、异步相关

    3.一、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.二、Generator［＊＊＊］

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

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

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

    3.三、co［＊＊］

        其实质是Generator函数的自执行模块。因为Generator自身是一种同步机制，若是存在异步操做，其不会等待异步执行结束，因此没法完成真正的自执行。

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

        应用：

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

    3.四、async［ES7］

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

 

四、Class［＊＊＊］

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

               b、其prototype不可枚举；

                c、继承：extends；

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

                

五、Module模块［＊＊＊］

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

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

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

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

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

   

内容摘自：http://www.cnblogs.com/hity-tt/p/7048224.html