JS - ECMAScript2015（ES6）新特性

友情提示：本文仅mark几个常用的新特性，详细请参见：ES6入门 - ryf；

碎片

var VS let VS const

• var：声明全局变量，
• let：声明块级变量，即局部变量
• const：声明常量，块级作用域，不可修改且必须初始化

将一个对象彻底冻结为常量的方法

var constantize = (obj) => {
  // 冻结对象本身 
  Object.freeze(obj); 
  // 冻结对象的属性
  Object.keys(obj).forEach( (key, i) => {
    if ( typeof obj[key] === 'object' ) {
      constantize( obj[key] );
    }
  });
};　　

ES6声明变量的方法，除上述外，还支持：class、import、function。

Number.isNaN() & Number.isFinite()　　

该两者仅对数值有效：

• Number.isNaN()：判断一个数值是否为NaN，利用NaN是唯一不等于自身的值，用于isNaN()判断
• Number.isFinite()：表示某个数值是否为正常的数值（即，非infinity），Infinity、-Infinity、NaN和undefined返回false，其余均返回true

注意与传统的全局方法isFinite()和isNaN()的区别，传统方法先调用Number()将非数值的值转为数值，再进行判断。

同理，Number.parseInt(), Number.parseFloat()优先使用。

新增Number.EPSILON表示极小量，表示 1 与大于 1 的最小浮点数之间的差。

function isTrueWithinErrorMargin (left, right) {
  return Math.abs(left - right) < Number.EPSILON * Math.pow(2, 2);
}

新增Number.MAX_SAFE_INTEGER和Number.MIN_SAFE_INTEGER分别表示安全的极大值和极小值。

Symbol

JS 的第7种数据类型，独一无二的特性：

• 用于扩展对象属性名
• 定义常量

提供几个常用方法

• Symbol()
• Symbol.for()
• Symbol.keyfor()

${}

模版字符串（template string）语法，配合反引号``使用

• 换行
• 表达式嵌入：占位符（使用 <%...%> 放置 JavaScript 代码，使用 <%= ... %> 输出 JavaScript 表达式。）
• 支持嵌套

标签模版

函数调用的一种特殊形式：fun`xxx`。

可过滤 HTML 字符串，防止用户输入恶意内容（特殊字符转义）

function toSaferHTML(templateData) {
  let s = templateData[0];
  for (let i = 1; i < arguments.length; i++) {
    let arg = String(arguments[i]);

    // Escape special characters in the substitution.
    s += arg.replace(/&/g, "&")
            .replace(/</g, "<")
            .replace(/>/g, ">");

    // Don't escape special characters in the template.
    s += templateData[i];
  }
  return s;
}

let sender = '<script>alert("abc")</script>'; // 恶意代码
let message = toSaferHTML`<p>${sender} has sent you a message.</p>`;
// <p><script>alert("abc")</script> has sent you a message.</p>

注：模板处理函数的第一个参数（模板字符串数组），还有一个 raw 属性，用于保存转义后的原字符串。

支持多语言处理。

...

扩展运算符，基于 for...of，将一个数组转为参数序列，或将实现了 Iterator 接口的对象转化为真正的数组。

• 取代apply()方法
• 复制数组（深拷贝）或合并数组（浅拷贝）
• 配合解构赋值：扩展运算符可以识别四字节的Unicode字符的长度

注意，没有实现 Iterator 接口的对象可以使用Array.from 

• 类似数组的对象：（1）DOM 操作返回的 NodeList 集合；（2）函数内部的arguments对象
• 可遍历的对象

提供2种字符串长度方法

[1]. [...str].length
[2]. Array.from(str).length　

Object.assign

将源对象（source）的所有可枚举属性，复制到目标对象（target）。（浅拷贝）

• undefined和null不能作为第一个参数
• 只拷贝源对象的自身属性（不拷贝继承属性），也不拷贝不可枚举的属性（enumerable: false）

使用场景

• 为对象添加属性/方法
• 克隆/合并对象
• 为属性指定默认值

Object.getOwnPropertyDescriptor

获取对象属性的描述对象，其中属性enumerable表示可枚举性。以下只对enumerable=true的对象有效

• for...in循环：只遍历对象自身的和继承的可枚举的属性
• Object.keys()：返回对象自身的所有可枚举的属性的键名
• JSON.stringify()：只串行化对象自身的可枚举的属性
• Object.assign()： 忽略enumerable为false的属性，只拷贝对象自身的可枚举的属性

Object.getOwnPropertyDescriptors

基于Object.getOwnPropertyDescriptor实现，返回指定对象所有自身属性（非继承属性）的描述对象。

• 解决Object.assign()无法正确拷贝get属性和set属性的问题
• 配合Object.create方法，将对象属性克隆到一个新对象（浅拷贝）
• 实现 Mixin（混入）模式

//克隆 方法1
const clone = Object.create(
  Object.getPrototypeOf(obj),
  Object.getOwnPropertyDescriptors(obj)
); 
//方法2
const clone2 = Object.assign(
  Object.create(Object.getPrototypeOf(obj)),
  obj
);

属性遍历

• for...in
• Object.keys()
• Object.getOwnPropertyNames()：返回一个数组，包含对象自身的所有属性的键名
• Object.getOwnPropertySymbols()：返回一个数组，包含对象自身的所有 Symbol 属性的键名
• Reflect.ownKeys()：返回一个数组，包含对象自身的所有键名，不管键名是 Symbol 或字符串，也不管是否可枚举

建议，尽量不要用for...in循环，而用Object.keys()代替。

此外，for...in只能获得对象的键名，不能直接获取键值，而for...of允许遍历获得键值。

Iterator & for...of

为不同的数据结构提供统一的访问机制，任何数据结构只要部署了Iterator接口：

• 支持遍历（for...of）操作
• 使用扩展运算符，将其转为数组

本质是：数据结构部署Symbol.iterator属性

遍历器接口（Iterable）、指针对象（Iterator）和next方法返回值的模版描述如下

interface Iterable {
  [Symbol.iterator]() : Iterator,
}

interface Iterator {
  next(value?: any) : IterationResult,
}

interface IterationResult {
  value: any,
  done: boolean,
}

原生具备 Iterator 接口的数据结构：

Array
Map
Set
String
TypedArray
函数的 arguments 对象
NodeList 对象

默认调用遍历器的场景

• for...of
• 解构赋值
• ...
• yield*：其后面跟一个可遍历的结构，默认调用该结构的遍历器接口
• Array.from()，Promise.all/race()

扩展应用

• String

将遍历器转换为数组，提供2种方法：

[...str.matchAll(regex)]
Array.from(str.matchAll(regex));

其中，matchAll() 用于一次性取出所有匹配结果，返回一个遍历器。　　

Set & Map

ES6在原有的集合数据结构（数组Array和对象Object）的基础上，新增Map和Set

• Set：类似数组，值唯一
• Map：类似(键值对集合的)对象，将"字符串-值"结构的Object扩展到"值-值"结构的Map
• WeakSet：不可遍历，成员只能是对象
• WeakMap：不可遍历

很重要：遍历顺序就是插入顺序。支持遍历 for...of 和 forEach。

其中，forEach 方法的

• 第一个参数回调函数的参数依次为：(value, key, map)
• 第二个参数用于绑定this，指向某个对象

Set

[1]. 数组去重

function dedupe(array) {
  return Array.from(new Set(array));
}

[2]. 交并差集运算

若想改变Set本身，提供如下2种方法

// 方法一：利用原 Set 结构映射出一个新的结构，然后赋值给原来的 Set 结构
let set = new Set([1, 2, 3]);
set = new Set([...set].map(val => val * 2));
// 方法二：利用Array.from方法
let set = new Set([1, 2, 3]);
set = new Set(Array.from(set, val => val * 2));

Map

关于Map与其他数据结构的转换，可参见：http://es6.ruanyifeng.com/#docs/set-map

解构赋值

从数组和对象中提取值，对变量进行赋值：（模式匹配）

• 只要等号右边的值不是对象或数组，就先将其转为对象
• 实现了Iterator接口的数据结构，可以采用数组形式的解构赋值
• 由于undefined和null无法转为对象，所以对其解构赋值，会报错
• 解构赋值尽量不适用圆括号()

支持默认值，前提是对象的属性值/数组成员严格等于undefined。若数组成员是null，默认值不会生效。

除数组和对象，字符串也支持解构赋值。 

应用场景

• 交换变量的值
• 从函数返回多个值
• 函数参数的定义、默认值
• 提取json数据
• 利用for...of遍历map结构

[1]. 在函数形参使用解构赋值

// 写法一
function m1({x = 0, y = 0} = {}) {
  return [x, y];
}
// 写法二
function m2({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}

• 写法一：函数参数的默认值是空对象，但是设置了对象解构赋值的默认值
• 写法二：函数参数的默认值是一个有具体属性的对象，但是没有设置对象解构赋值的默认值

推荐写法一，因为在函数体中实际使用的左边的x和y。　

箭头函数

箭头函数可以让this指向固定化，总是指向函数定义生效时所在的作用域，而不是指向运行时所在的作用域，这种特性很有利于封装回调函数。

s1 = 0;  s2 = 0;
function Timer() {
  this.s1 = 0;  this.s2 = 0;
  // 箭头函数
  setInterval(() => this.s1++, 1000);
  // 普通函数
  setInterval(function () {
    this.s2++;
  }, 1000);
}

var timer = new Timer();
setTimeout(() => console.log('s1: ', timer.s1), 3200);  // 3
setTimeout(() => console.log('s2: ', timer.s2), 3200);  // 0
setTimeout(() => console.log('s11: ', this.s1), 3200);  // 0
setTimeout(() => console.log('s22: ', this.s2), 3200);  // 3

箭头函数自动绑定this，可以减少对this的显式绑定（call、apply、bind）。

::双冒号运算符（函数绑定运算符），可以用来取代call、apply、bind调用。

foo::bar(...arguments);  等同于  bar.apply(foo, arguments);　　

注意点

• 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象
• 不可以当作构造函数，即：不可以使用new命令　
• 不可以使用yield命令，即：箭头函数不能用作 Generator 函数
• 不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替

尾调用 & 尾递归

尾调用：某个函数的最后一步是调用另一个函数

function f(x){
  return g(x); //（1）return （2）无其他计算
}

尾递归基于尾调用，相对节省内存，不会发生栈溢出。

相关示例，可参考：阶乘或Fibonacci 数列.

注意，尾调用优化，仅在严格模式下有效。

Proxy & Reflect

Proxy：修改某些操作的默认行为，可以进行数据验证

关于 Proxy 支持的拦截操作，具体参见：http://es6.ruanyifeng.com/#docs/proxy

其中，apply用于拦截如下操作：

• 函数调用
• call、apply
• Reflect.apply

Reflect：将Object对象上的方法迁移到Reflect对象上

关于Reflect对象的方法与Proxy对象的方法一一对应，具体参见：http://es6.ruanyifeng.com/#docs/reflect

建议用 Reflect.xxx 代替 Object.xxx

综上，Proxy 对象和 Reflect 对象联合使用，前者拦截操作，后者完成默认行为。

Promise对象

引出

• 回调地狱（callback hell）
• 多个异步回调难以维护和控制的问题

设计思想：所有异步任务都返回一个 Promise 实例。（异步操作同步化）

Promise 实质上是一个构造函数。

var p = new Promise(f1);
p.then(f2);

回调函数f1完成后，执行回调函数f2。（添加状态改变时的回调函数通过then()方法）

Promise 对象通过自身的状态，来控制异步操作。

• 异步操作未完成（pending）
• 异步操作成功（fulfilled）
• 异步操作失败（rejected)

同时，只有异步操作的结果才会改变其状态，Promise 实例的状态变化只可能发生一次：

• 异步操作成功，Promise 实例传回一个值（value），状态变为 fulfilled
• 异步操作失败，Promise 实例抛出一个错误（error），状态变为 rejected

// resolve 和 reject 均由 JavaScript 引擎提供，无需自己实现
var p = new Promise(function (resolve, reject) {
  // ...
  if (/* 异步操作成功 */){
    resolve(value);
  } else { /* 异步操作失败 */
    reject(new Error());
  }
});

• resolve：将Promise实例的状态从“未完成”变为“成功”（pending-->fulfilled），在异步操作成功时调用，并将异步操作的结果作为参数传出
• reject：将Promise实例的状态从“未完成”变为“失败”（pending-->rejected），在异步操作失败时调用，并将异步操作的错误作为参数传出

注意：

• Promise 的回调函数属于异步任务，会在同步任务之后执行。
• Promise 的回调函数不是正常的异步任务，而是微任务（microtask）　

正常任务追加到下一轮事件循环，微任务追加到本轮事件循环。所以，微任务的执行时间一定早于正常任务。

setTimeout(function() {
  console.log(1);
}, 0);

new Promise(function (resolve, reject) {
  resolve(2);
}).then(console.log);

console.log(3);

//  3 2 1

Promise对象还有其他特性（可以看作是缺点）：

• Promise 对象新建后就会立即执行，无法取消Promise 
• Promise 内部的错误不会影响到 Promise 外部的代码（Promise 会吃掉错误），也可以通过设置回调函数将错误信息抛出
• 代码冗余，all then()...

静态方法

• Promise.all()：与
• Promise.race()：或
• Promise.resolve()：将现有对象转为立即resolved的Promise对象
• Promise.reject()：返回一个新的Promise实例，该实例的状态为rejected，回调立即执行

Promise.resolve()与Promise.reject()略有不同，Promise.reject()会将参数原封不动地传出。

新的Promise.try()用于统一管理同步和异步代码，统一用promise.catch()捕获所有同步和异步的错误

Promise.try(database.users.get({id: userId}))
  .then(...)
  .catch(...)

参考：Promise对象；ES6 - Promise - ryfeng；

Generator函数

遍历器对象生成函数，可以暂停函数执行，返回任意表达式的值

• function*：
• yield：产出，暂停标志

调用Generator函数，返回一个遍历器对象，代表Generator函数的内部指针，可以通过next()依次遍历Generator函数内部的每一个状态（异步操作的容器）。

• 异步操作同步化表达
• 为任意对象部署 Iterator 接口
• 作为数据结构，提供类似数组的接口
• 控制流管理：项目拆分成任务，任务拆分成步骤，依次执行
• 状态机（容器）
• 协程（coroutine）

注意，返回的遍历器对象，其Symbol.iterator属性是其自身

function* gen(){...}
var g = gen();
g[Symbol.iterator] === g

遍历器对象是Generator函数的实例，继承其原型上的方法，但是this对象无法访问。若想访问：

// 将遍历器对象绑定到Generator函数的原型
var gen = Gen.call(Gen.prototype);　　

若想应用new命令，对外封装一层即可

function F() {
  return Gen.call(Gen.prototype);
}
// f即遍历器对象
F f = new F();

for...of

支持自动遍历Generator函数时生成的Iterator对象。

注意，不会遍历到return语句，扩展运算符、解构赋值和Array.from()亦是。

利用for...of循环，可以写出遍历任意对象（object）的方法。通过Generator函数为对象加上这个接口

function* objectEntries() {
  let propKeys = Object.keys(this);

  for (let propKey of propKeys) {
    yield [propKey, this[propKey]];
  }
}

let obj= { first: 'Jane', last: 'Doe' };
obj[Symbol.iterator] = objectEntries;

for (let [key, value] of objectEntries(obj)) {
  console.log(`${key}: ${value}`);
}

重点理解下述3个原型方法：

Generator.prototype.next()

• next方法可以带一个参数，该参数重写上一个yield表达式的返回值（yield表达式默认无返回值或undefined）
• 第一次执行next方法，等同于启动执行Generator函数的内部代码

Generator.prototype.throw()

• Generator函数体内或外抛出的错误gen.throw()，会优先被Generator体内的try...catch捕获
• 注意遍历器对象的throw()方法和throw命令的不同
• throw方法抛出的错误要被内部try...catch捕获，前提是必须至少执行过一次next方法,，否则只能被外部try...catch捕获
• throw方法被捕获后，会附带执行一次next方法，返回下一条yield表达式
• Generator函数体内的错误未捕获到，会中断Generator函数体内的后续代码　

Generator.prototype.return()

• 返回给定的值，终结执行Generator函数
• 优先级低于finally代码块

next(): 将yield表达式替换成一个值
throw(): 将yield表达式替换成一个throw语句
return(): 将yield表达式替换成一个return语句　　

yield*

在一个Generator函数A里面执行另一个Generator函数B。

场景：递归

若B中有return语句，通过以下形式获取返回值

var value = yield* B()

异步应用

异步调用方式

• 发布/订阅（事件监听）
• 回调函数
• Promise对象
• Generator函数：协程

协程

Generator函数是协程在ES6的实现，可以理解为Generator函数是协程的实例

最大特点就是可以交出函数的执行权（暂停函数执行和恢复执行）

• 函数体内、外的数据交换
• 错误处理机制

自动执行机制：接收和交还程序的执行权（当异步操作有了结果，自动交回执行权）

• 回调函数：将异步操作包装成 Thunk 函数，在回调函数里面交回执行权
• Promise对象：将异步操作包装成 Promise 对象，用then方法交回执行权

Thunk函数

自动执行Generator函数的一种方法。

• yield：将程序的执行权移出 Generator 函数
• thunk：将执行权交还给 Generator 函数

懒执行，传名调用的实现策略，用临时函数（Thunk函数）替换某个表达式。在JavaScript中，是将多参数（某个参数是回调函数）函数fn，替换成一个只接受回调函数作为参数的单参数函数。

// Thunk函数转换器
const Thunk = function(fn) {
  return function (...args) {
    return function (callback) {
      return fn.call(this, ...args, callback);
    }
  };
};　　

提供Thunk函数转换工具：Thunkify 模块

无需编写Generator函数的自动执行器，而且其检查机制，确保回调函数只运行一次。使用前提是Generator函数的yield命令后面，只能是Thunk函数。

// 引入
var thunkify = require('thunkify');
// 转换
var thunkFun= thunkify(fn);

co模块

自动执行Generator函数的另一种方法，基于Promise对象的自动执行器。

co函数接收Generator函数作为参数，返回Promise对象，支持then方法执行回调函数。

// 引入
var co = require('co');
// 自动执行
co(gen).then(...);

本质上封装了两种自动执行器（Thunk 函数和 Promise 对象），使用 co 的前提条件是，Generator函数的yield命令后面，只能是 Thunk 函数或 Promise 对象。　

而且，co函数支持并发操作：把并发的操作放在数组或对象里，跟在yield命令后面

参考 ：Generator - ruanyifeng；

以上，使Generator支持异步操作，即yield命令后是异步方法，则：该方法只能返回一个Thunk函数或者一个Promise对象。

async函数

• async：表示函数里有异步操作
• await：表示紧跟在后面的表达式需要等待结果

Generator函数的语法糖：对Generator函数和自动执行器的封装

相比Generator函数：（ *和yield --> async和await ）

• 内置（自动）执行器
• 立即返回Promise对象，支持then方法执行回调函数。
• 语义清晰，适应性广

async函数可以看作是将多个异步操作封装成一个Promise对象，await命令是内部then()方法的语法糖。

关于3者的比较，可参见：async函数-5

务必注意，不能在普通函数中使用await。但是 esm 模块加载器支持顶层await，即await命令可以不放在async函数里面，直接使用

// 顶层 await 的写法
const res = await fetch('google.com');
console.log(await res.text());　

常见形式：

// 函数声明
async function foo() {}
// 函数表达式
const foo = async function () {};
// 箭头函数
const foo = async () => {};

// 对象的方法
let obj = { 
  async foo() {} 
};
obj.foo().then(...)

// Class 的方法
class Storage {
  constructor() {
    this.cachePromise = caches.open('avatars');
  }
  async getAvatar(name) {
    const cache = await this.cachePromise;
    return cache.match(`/avatars/${name}.jpg`);
  }
}
const storage = new Storage();
storage.getAvatar('jake').then(…);

错误处理机制

async函数内部抛出错误，会导致返回的Promise对象变为reject状态，同时中断async函数的执行，若不中断：

• try...catch
• await Promise(...).catch()

抛出的错误对象会被catch方法回调函数接收到。

并发

互不影响相互独立的2个异步操作同时执行

let [foo, bar] = await Promise.all([getFoo(), getBar()]);

场景：并发拉数据

async function pullDataFeomUrl(urls) {
  // 并发读取远程URL
  const textPromises = urls.map(async url => {
    const response = await fetch(url);
    return response.text();
  });

  // 按次序输出
  for (const textPromise of textPromises) {
    console.log(await textPromise);
  }
}

异步遍历器（Async Iterator）

es2018引入，为异步操作提供原生的遍历器接口：异步返回value和done

特点：异步遍历器的next()方法返回一个Promise对象。

类似对象的同步遍历器部署Symbol.iterator属性，支持for...of，对象的异步遍历器部署Symbol.asynciterator属性，支持for await...of。

即，可遍历对象的Symbol.asynciterator属性返回一个异步Generator函数

const asyncIterator = asyncIterable[Symbol.asyncIterator]();　　

注意，for await...of循环也可以用于同步遍历器。

异步遍历器重要的是：可以接近相同的方式处理同步操作和异步操作。

// 同步Generator函数
function* map(iterable, func) {
  const iter = iterable[Symbol.iterator]();
  while (true) {
    const {value, done} = iter.next();
    if (done) break;
    yield func(value);
  }
}

// 异步Generator函数
async function* map(iterable, func) {
  const iter = iterable[Symbol.asyncIterator]();
  while (true) {
    const {value, done} = await iter.next();
    if (done) break;
    yield func(value);
  }
}

异步Generator函数

async函数与Generator函数的结合

• await：用于将外部操作产生的值输入函数内部
• yield：用于将函数内部的值输出

Generator函数返回同步遍历器对象，异步Generator函数返回异步遍历器对象。