zoukankan      html  css  js  c++  java
  • 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加载时运行。
        
  • 相关阅读:
    Nodejs chrome 调试node-inspector
    Nodejs 文件修改自动重启扩展
    PHP post & get请求
    mysql 忘记root密码
    Linux安装mysql
    Linux 安装reids
    技术 | TypeScript
    秦涛:深度学习的五个挑战和其解决方案
    人脸检测与识别的趋势和分析
    370 门免费编程与计算机科学在线课程
  • 原文地址:https://www.cnblogs.com/hity-tt/p/7048224.html
Copyright © 2011-2022 走看看