ES6 笔记- 总结

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6 笔记- 总结相关的知识,希望对你有一定的参考价值。

    在最近进行的项目中,已经全面使用到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加载时运行。
    

以上是关于ES6 笔记- 总结的主要内容,如果未能解决你的问题,请参考以下文章

使用es6总结笔记

ES6学习笔记——字符串扩展

平时笔记总结

es6学习总结

ES6-10学习笔记

js 笔记读阮一峰老师 es6 入门笔记 —— 第一章