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