ES6 速通

《阮一峰 ECMAScript 6 (ES6) 标准入门教程 第三版》 - 书栈网 · BookStack

1. 声明变量方法

var function let const import class
前面两个是es5的，后面是es6的，let const 的好处是块变量：只在声明所在的块级作用域内有效；
const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。

2. 取顶层对象

JavaScript 语言存在一个顶层对象，它提供全局环境（即全局作用域），所有代码都是在这个环境中运行。但是，顶层对象在各种实现里面是不统一的。

• 浏览器里面，顶层对象是window，但 Node 和 Web Worker 没有window。
• 浏览器和 Web Worker 里面，self也指向顶层对象，但是 Node 没有self。
• Node 里面，顶层对象是global，但其他环境都不支持。

同一段代码为了能够在各种环境，都能取到顶层对象，现在一般是使用this变量，但是有局限性。

• 全局环境中，this会返回顶层对象。但是，Node 模块和 ES6 模块中，this返回的是当前模块。
• 函数里面的this，如果函数不是作为对象的方法运行，而是单纯作为函数运行，this会指向顶层对象。但是，严格模式下，这时this会返回undefined。
• 不管是严格模式，还是普通模式，new Function('return this')()，总是会返回全局对象。但是，如果浏览器用了 CSP（Content Security Policy，内容安全策略），那么eval、new Function这些方法都可能无法使用。

综上所述，很难找到一种方法，可以在所有情况下，都取到顶层对象。下面是两种勉强可以使用的方法。

1. // 方法一

2. (typeof window !== 'undefined'

3. ? window

4. : (typeof process === 'object' &&

5.   `typeof require === 'function' &&`
   

6.   `typeof global === 'object')`
   

7.  `? global`
   

8.  `: this);`
   

9. // 方法二

10. var getGlobal = function () {

11. if (typeof self !== 'undefined') { return self; }

12. if (typeof window !== 'undefined') { return window; }

13. if (typeof global !== 'undefined') { return global; }

14. throw new Error('unable to locate global object');

15. };

es6采用的方式是globalThis，都可以从它拿到顶层对象

3. 变量解构

数组字符串解构按顺序

1. let [a, b, c] = [1, 2, 3];
2. const [a, b, c, d, e] = 'hello';

对象解构按对象名

1. let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
2. let { foo: foo, bar: bar } = { foo: 'aaa', bar: 'bbb' };

数值和布尔值解构

1. let {toString: s} = 123;

2. s === Number.prototype.toString // true

3. let {toString: s} = true;

4. s === Boolean.prototype.toString // true

5. let { prop: x } = undefined; // TypeError

6. let { prop: y } = null; // TypeError

函数解构

1. [1, undefined, 3].map((x = 'yes') => x);
2. // [ 1, 'yes', 3 ]

结构默认值：

1. var {x = 3} = {};

2. x // 3

3. var { message: msg = 'Something went wrong' } = {};

4. msg // "Something went wrong"

这里要注意：

1. // 错误的写法
2. let x;
3. {x} = {x: 1};
4. // SyntaxError: syntax error

上面代码的写法会报错，因为 JavaScript 引擎会将{x}理解成一个代码块，从而发生语法错误。

1. // 正确的写法
2. let x;
3. ({x} = {x: 1});

不能使用圆括号

（1）变量声明语句
（2）函数参数
（3）赋值语句的模式

4. 字符串拓展

模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

1. $('#result').append(`
2. There are ${basket.count} items
3. in your basket, ${basket.onSale}
4. are on sale!
5. `);

模板字符串前后的空格和换行可以使用trim()来处理
` this is a template string `.trim()

“标签模板”的一个重要应用，就是过滤 HTML 字符串，防止用户输入恶意内容。

1. let a = 5;

2. let b = 10;

3. tag`Hello ${ a + b } world ${ a * b }`;

4. // 等同于

5. tag(['Hello ', ' world ', ''], 15, 50);

5. 字符串新增方法

ES6 提供了String.fromCodePoint()方法，可以识别大于0xFFFF的字符，弥补了String.fromCharCode()方法的不足。在作用上，正好与下面的codePointAt()方法相反。

1. String.fromCodePoint(0x20BB7)
2. // ""
3. String.fromCodePoint(0x78, 0x1f680, 0x79) === 'x\uD83D\uDE80y'
4. // true

ES6 还为原生的 String 对象，提供了一个raw()方法。该方法返回一个斜杠都被转义（即斜杠前面再加一个斜杠）的字符串，往往用于模板字符串的处理方法。

1. // `foo${1 + 2}bar`
2. // 等同于
3. String.raw({ raw: ['foo', 'bar'] }, 1 + 2) // "foo3bar"

语调符号和重音符号。为了表示它们，Unicode 提供了两种方法。一种是直接提供带重音符号的字符，比如Ǒ（\u01D1）。另一种是提供合成符号（combining character），即原字符与重音符号的合成，两个字符合成一个字符，比如O（\u004F）和ˇ（\u030C）合成Ǒ（\u004F\u030C）。

1. '\u01D1'==='\u004F\u030C' //false

2. '\u01D1'.length // 1

3. '\u004F\u030C'.length // 2

4. '\u01D1'.normalize() === '\u004F\u030C'.normalize()

5. // true

传统上，JavaScript 只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。和后面两个和python一致

• includes()：返回布尔值，表示是否找到了参数字符串。
• startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
• endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。

1. let s = 'Hello world!';

2. s.startsWith('world', 6) // true

3. s.endsWith('Hello', 5) // true

4. s.includes('Hello', 6) // false

repeat方法返回一个新字符串，表示将原字符串重复n次。小数会向下取整，负数或者Infinity会报错

1. 'x'.repeat(3) // "xxx"
2. 'hello'.repeat(2) // "hellohello"
3. 'na'.repeat(0) // ""

ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。

1. 'x'.padStart(5, 'ab') // 'ababx'

2. 'x'.padStart(4, 'ab') // 'abax'

3. 'x'.padEnd(5, 'ab') // 'xabab'

4. 'x'.padEnd(4, 'ab') // 'xaba'

ES2019 对字符串实例新增了trimStart()和trimEnd()这两个方法。它们的行为与trim()一致，trimStart()消除字符串头部的空格，trimEnd()消除尾部的空格。它们返回的都是新字符串，不会修改原始字符串。浏览器还部署了额外的两个方法，trimLeft()是trimStart()的别名，trimRight()是trimEnd()的别名。

1. const s = ' abc ';

2. s.trim() // "abc"

3. s.trimStart() // "abc "

4. s.trimEnd() // " abc"

matchAll()方法返回一个正则表达式在当前字符串的所有匹配，详见《正则的扩展》的一章。

6. 正则的拓展

感觉和现在的python差不多，这里要注意是exec进行调用

1. const RE_OPT_A = /^(?a+)?$/;

2. const matchObj = RE_OPT_A.exec('');

3. matchObj.groups.as // undefined

4. 'as' in matchObj.groups // true

字符串对象共有 4 个方法，可以使用正则表达式：match()、replace()、search()和split()。

ES6 将这 4 个方法，在语言内部全部调用RegExp的实例方法，从而做到所有与正则相关的方法，全都定义在RegExp对象上。

• String.prototype.match 调用 RegExp.prototype[Symbol.match]
• String.prototype.replace 调用 RegExp.prototype[Symbol.replace]
• String.prototype.search 调用 RegExp.prototype[Symbol.search]
• String.prototype.split 调用 RegExp.prototype[Symbol.split]

7. 数值的拓展

ES6 在Number对象上，新提供了Number.isFinite()和Number.isNaN()两个方法。它们与传统的全局方法isFinite()和isNaN()的区别在于，传统方法先调用Number()将非数值的值转为数值，再进行判断，而这两个新方法只对数值有效，Number.isFinite()对于非数值一律返回false, Number.isNaN()只有对于NaN才返回true，非NaN一律返回false。

ES6 将全局方法parseInt()和parseFloat()，移植到Number对象上面，行为完全保持不变。其功能是解析string转化为int或者float

1. Number.parseInt('12.34') // 12
2. Number.parseFloat('123.45#') // 123.45

Number.isInteger()用来判断一个数值是否为整数。

1. Number.isInteger(5E-324) // false
2. Number.isInteger(5E-325) // true
   如果一个数值的绝对值小于Number.MIN_VALUE（5E-324）会被自动转为 0，上面代码中，5E-325由于值太小，会被自动转为0，因此返回true。

ES6 在Number对象上面，新增一个极小的常量Number.EPSILON。根据规格，它表示 1 与大于 1 的最小浮点数之间的差。Number.EPSILON实际上是 JavaScript 能够表示的最小精度。误差如果小于这个值，就可以认为已经没有意义了，即不存在误差了。

1. 0.1 + 0.2 === 0.3 // false

JavaScript 能够准确表示的整数范围在-2^53到2^53之间（不含两个端点），超过这个范围，无法精确表示这个值。ES6 引入了Number.MAX_SAFE_INTEGER和Number.MIN_SAFE_INTEGER这两个常量，用来表示这个范围的上下限。Number.isSafeInteger()则是用来判断一个整数是否落在这个范围之内。

JavaScript 所有数字都保存成 64 位浮点数，这给数值的表示带来了两大限制。一是数值的精度只能到 53 个二进制位（相当于 16 个十进制位），大于这个范围的整数，JavaScript 是无法精确表示的，这使得 JavaScript 不适合进行科学和金融方面的精确计算。二是大于或等于2的1024次方的数值，JavaScript 无法表示，会返回Infinity。

1. // 超过 53 个二进制位的数值，无法保持精度

2. Math.pow(2, 53) === Math.pow(2, 53) + 1 // true

3. // 超过 2 的 1024 次方的数值，无法表示

4. Math.pow(2, 1024) // Infinity

8. 函数的拓展

如果有默认值的参数都不是尾参数。这时，无法只省略该参数，而不省略它后面的参数，除非显式输入undefined。ES2017 允许函数的最后一个参数有尾逗号（trailing comma）。

1. // 例一

2. function f(x = 1, y) {

3. return [x, y];

4. }

5. f() // [1, undefined]

6. f(2) // [2, undefined]

7. f(, 1) // 报错

8. f(undefined, 1) // [1, 1]

9. // 例二

10. function f(x, y = 5, z) {

11. return [x, y, z];

12. }

13. f() // [undefined, 5, undefined]

14. f(1) // [1, 5, undefined]

15. f(1, ,2) // 报错

16. f(1, undefined, 2) // [1, 5, 2]

指定了默认值以后，函数的length属性，将返回没有指定默认值的参数个数。也就是说，指定了默认值后，length属性将失真。

1. (function (a) {}).length // 1
2. (function (a = 5) {}).length // 0
3. (function (a, b, c = 5) {}).length // 2

如果设置了默认值的参数不是尾参数，那么length属性也不再计入后面的参数了。

1. (function (a = 0, b, c) {}).length // 0
2. (function (a, b = 1, c) {}).length // 1

ES6 引入 rest 参数（形式为...变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。下面是一个 rest 参数代替arguments变量的例子。

1. // arguments变量的写法

2. function sortNumbers() {

3. return Array.prototype.slice.call(arguments).sort();

4. }

5. // rest参数的写法

6. const sortNumbers = (...numbers) => numbers.sort();

arguments对象不是数组，而是一个类似数组的对象。所以为了使用数组的方法，必须使用Array.prototype.slice.call先将其转为数组。rest 参数就不存在这个问题，它就是一个真正的数组，数组特有的方法都可以使用。下面是一个利用 rest 参数改写数组push方法的例子。

注意，rest 参数之后不能再有其他参数（即只能是最后一个参数），否则会报错。

1. function push(array, ...items) {

2. items.forEach(function(item) {

3. array.push(item);

4. console.log(item);

5. });

6. }

7. var a = [];

8. push(a, 1, 2, 3)

ES2016 做了一点修改，规定只要函数参数使用了默认值、解构赋值、或者扩展运算符，那么函数内部就不能显式设定为严格模式，否则会报错。这样规定的原因是，函数内部的严格模式，同时适用于函数体和函数参数。但是，函数执行的时候，先执行函数参数，然后再执行函数体。这样就有一个不合理的地方，只有从函数体之中，才能知道参数是否应该以严格模式执行，但是参数却应该先于函数体执行。

1. function doSomething(a, b) {
2. 'use strict';
3. // code
4. }

函数的name属性，返回该函数的函数名。

1. const bar = function baz() {};
2. bar.name // "baz"

箭头函数

ES6 允许使用“箭头”（=>）定义函数。

1. var f = v => v;

2. // 等同于

3. var f = function (v) {

4. return v;

5. };

如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。

1. var f = () => 5;

2. // 等同于

3. var f = function () { return 5 };

4. var sum = (num1, num2) => num1 + num2;

5. // 等同于

6. var sum = function(num1, num2) {

7. return num1 + num2;

8. };

ES6 的尾调用优化只在严格模式下开启，正常模式是无效的。递归本质上是一种循环操作。纯粹的函数式编程语言没有循环操作命令，所有的循环都用递归实现，这就是为什么尾递归对这些语言极其重要。对于其他支持“尾调用优化”的语言（比如 Lua，ES6），只需要知道循环可以用递归代替，而一旦使用递归，就最好使用尾递归。

9. 数组的拓展

扩展运算符（spread）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。

1. console.log(...[1, 2, 3])

2. // 1 2 3

3. console.log(1, ...[2, 3, 4], 5)

4. // 1 2 3 4 5

复制数组

1. const a1 = [1, 2];
2. // 写法一
3. const a2 = [...a1];
4. // 写法二
5. const [...a2] = a1;

合并数组

1. const arr1 = ['a', 'b'];

2. const arr2 = ['c'];

3. const arr3 = ['d', 'e'];

4. // ES5 的合并数组

5. arr1.concat(arr2, arr3);

6. // [ 'a', 'b', 'c', 'd', 'e' ]

7. // ES6 的合并数组

8. [...arr1, ...arr2, ...arr3]

9. // [ 'a', 'b', 'c', 'd', 'e' ]

两种转化数组的方式，array.from() array.of()

Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。
Array.of方法用于将一组值，转换为数组。

数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。

1. [1, 4, -5, 10].find((n) => n < 0)
2. // -5

上面代码找出数组中第一个小于 0 的成员。

1. [1, 5, 10, 15].find(function(value, index, arr) {
2. return value > 9;
3. }) // 10

数组实例的findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

1. [1, 5, 10, 15].findIndex(function(value, index, arr) {
2. return value > 9;
3. }) // 2

fill方法使用给定值，填充一个数组。

1. ['a', 'b', 'c'].fill(7)

2. // [7, 7, 7]

3. new Array(3).fill(7)

4. // [7, 7, 7]

数组也是键值对组成的['a', 'b'] 相当于 {0: 'a', 1: 'b'}，其键就是序号，其值是本身；

entries()，keys()和values()——用于遍历数组。它们都返回一个遍历器对象（详见《Iterator》一章），可以用for...of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。

数组的成员有时还是数组，Array.prototype.flat()用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。

1. [1, 2, [3, [4, 5]]].flat()

2. // [1, 2, 3, [4, 5]]

3. [1, 2, [3, [4, 5]]].flat(2)

4. // [1, 2, 3, 4, 5]

flatMap()方法对原数组的每个成员执行一个函数（相当于执行Array.prototype.map()），然后对返回值组成的数组执行flat()方法。该方法返回一个新数组，不改变原数组。

1. // 相当于 [[2, 4], [3, 6], [4, 8]].flat()
2. [2, 3, 4].flatMap((x) => [x, x * 2])
3. // [2, 4, 3, 6, 4, 8]

10. 对象的扩展

变量foo直接写在大括号里面。这时，属性名就是变量名, 属性值就是变量值。下面是另一个例子。

1. let birth = '2000/01/01';

2. const Person = {

3. name: '张三',

4. //等同于birth: birth

5. birth,

6. // 等同于hello: function ()...

7. hello() { console.log('我的名字是', this.name); }

8. };

ES6 允许字面量定义对象时，用方法二（表达式）作为对象的属性名，即把表达式放在方括号内。

1. let lastWord = 'last word';

2. const a = {

3. 'first word': 'hello',

4. [lastWord]: 'world'

5. };

6. a['first word'] // "hello"

7. a[lastWord] // "world"

8. a['last word'] // "world"

注意，属性名表达式如果是一个对象{}，默认情况下会自动将对象转为字符串[object Object]，这一点要特别小心。

我们知道，this关键字总是指向函数所在的当前对象，ES6 又新增了另一个类似的关键字super，指向当前对象的原型对象。

三种super的用法都会报错，因为对于 JavaScript 引擎来说，这里的super都没有用在对象的方法之中。第一种写法是super用在属性里面，第二种和第三种写法是super用在一个函数里面，然后赋值给foo属性。目前，只有对象方法的简写法可以让 JavaScript 引擎确认，定义的是对象的方法。

1. // 报错

2. const obj = {

3. foo: super.foo

4. }

5. // 报错

6. const obj = {

7. foo: () => super.foo

8. }

9. // 报错

10. const obj = {

11. foo: function () {

12. return super.foo

13. }

14. }

对象的拓展运算符

1. let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
2. let { x, ...y, ...z } = someObject; // 句法错误
3. let { ...x, y, z } = someObject; // 句法错误
4. let { x, ...y, ...z } = someObject; // 句法错误

注意，解构赋值的拷贝是浅拷贝，即如果一个键的值是复合类型的值（数组、对象、函数）、那么解构赋值拷贝的是这个值的引用，而不是这个值的副本。

1. let obj = { a: { b: 1 } };
2. let { ...x } = obj;
3. obj.a.b = 2;
4. x.a.b // 2

ES2020 引入了“链判断运算符”（optional chaining operator）?.

1. const firstName = (message

2. && message.body

3. && message.body.user

4. && message.body.user.firstName) || 'default';

5. const firstName = message?.body?.user?.firstName || 'default';

6. const fooValue = myForm.querySelector('input[name=foo]')?.value

相等运算符（==）和严格相等运算符（===）ES6 提出“Same-value equality”（同值相等）算法，用来解决这个问题。Object.is就是部署这个算法的新方法。它用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致。

1. Object.is('foo', 'foo')

2. // true

3. Object.is({}, {})

4. // false

5. +0 === -0 //true

6. NaN === NaN // false

7. Object.is(+0, -0) // false

8. Object.is(NaN, NaN) // true

Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。

Object.assign方法实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。

1. const obj1 = {a: {b: 1}};

2. const obj2 = Object.assign({}, obj1);

3. obj1.a.b = 2;

4. obj2.a.b // 2

对于这种嵌套的对象，一旦遇到同名属性，Object.assign的处理方法是替换，而不是添加。

1. const target = { a: { b: 'c', d: 'e' } }
2. const source = { a: { b: 'hello' } }
3. Object.assign(target, source)
4. // { a: { b: 'hello' } }

Object.assign可以用来处理数组，但是会把数组视为对象。

Object.assign只能进行值的复制，如果要复制的值是一个取值函数，那么将求值后再复制。

1. const source = {

2. get foo() { return 1 }

3. };

4. const target = {};

5. Object.assign(target, source)

6. // { foo: 1 }

ES2017 引入了Object.getOwnPropertyDescriptors()方法，返回指定对象所有自身属性（非继承属性）的描述对象。

1. const obj = {

2. foo: 123,

3. get bar() { return 'abc' }

4. };

5. Object.getOwnPropertyDescriptors(obj)

6. // { foo:

7. // { value: 123,

8. // writable: true,

9. // enumerable: true,

10. // configurable: true },

11. // bar:

12. // { get: [Function: get bar],

13. // set: undefined,

14. // enumerable: true,

15. // configurable: true } }

__proto__属性（前后各两个下划线），用来读取或设置当前对象的原型对象（prototype）。目前，所有浏览器（包括 IE11）都部署了这个属性。但是不推荐使用，实现上，__proto__调用的是Object.prototype.__proto__，具体实现如下。

Object.setPrototypeOf方法的作用与__proto__相同，用来设置一个对象的原型对象（prototype），返回参数对象本身。它是 ES6 正式推荐的设置原型对象的方法。

Object.getPrototypeOf()该方法与Object.setPrototypeOf方法配套，用于读取一个对象的原型对象。

Object.keys()，Object.values()，Object.entries() 作为遍历一个对象的补充手段，供for...of循环使用。

Object.fromEntries()方法是Object.entries()的逆操作，用于将一个键值对数组转为对象。

12. Symbol

ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，前六种是：undefined、null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）。

Symbol 作为属性名，遍历对象的时候，该属性不会出现在for...in、for...of循环中，也不会被Object.keys()、Object.getOwnPropertyNames()、JSON.stringify()返回。

但是，它也不是私有属性，有一个Object.getOwnPropertySymbols()方法，可以获取指定对象的所有 Symbol 属性名。该方法返回一个数组，成员是当前对象的所有用作属性名的 Symbol 值。

1. const obj = {};

2. const foo = Symbol('foo');

3. obj[foo] = 'bar';

4. for (let i in obj) {

5. console.log(i); // 无输出

6. }

7. Object.getOwnPropertyNames(obj) // []

8. Object.getOwnPropertySymbols(obj) // [Symbol(foo)]

13. Set 和 Map 数据结构

Set 结构的实例有以下属性。

• Set.prototype.constructor：构造函数，默认就是Set函数。
• Set.prototype.size：返回Set实例的成员总数。

Set 实例的方法分为两大类：操作方法（用于操作数据）和遍历方法（用于遍历成员）。下面先介绍四个操作方法。

• Set.prototype.add(value)：添加某个值，返回 Set 结构本身。
• Set.prototype.delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
• Set.prototype.has(value)：返回一个布尔值，表示该值是否为Set的成员。
• Set.prototype.clear()：清除所有成员，没有返回值。

keys方法、values方法、entries方法返回的都是遍历器对象（详见《Iterator 对象》一章）。由于 Set 结构没有键名，只有键值（或者说键名和键值是同一个值），所以keys方法和values方法的行为完全一致。

WeakSet 结构与 Set 类似，也是不重复的值的集合。但是，它与 Set 有两个区别。首先，WeakSet 的成员只能是对象，而不能是其他类型的值。其次，WeakSet 中的对象都是弱引用，即垃圾回收机制不考虑 WeakSet 对该对象的引用，也就是说，如果其他对象都不再引用该对象，那么垃圾回收机制会自动回收该对象所占用的内存，不考虑该对象还存在于 WeakSet 之中。

Map是JavaScript 的对象（Object），本质上是键值对的集合（Hash 结构），但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。
Map 结构的实例有以下属性和操作方法。

size属性返回 Map 结构的成员总数。

set方法设置键名key对应的键值为value，然后返回整个 Map 结构。如果key已经有值，则键值会被更新，否则就新生成该键。

set方法返回的是当前的Map对象，因此可以采用链式写法。

get方法读取key对应的键值，如果找不到key，返回undefined。

has方法返回一个布尔值，表示某个键是否在当前 Map 对象之中。

delete方法删除某个键，返回true。如果删除失败，返回false。

clear方法清除所有成员，没有返回值。

• Map.prototype.keys()：返回键名的遍历器。
• Map.prototype.values()：返回键值的遍历器。
• Map.prototype.entries()：返回所有成员的遍历器。
• Map.prototype.forEach()：遍历 Map 的所有成员。

（1）Map 转为数组

前面已经提过，Map 转为数组最方便的方法，就是使用扩展运算符（...）。

1. const myMap = new Map()
2. .set(true, 7)
3. .set({foo: 3}, ['abc']);
4. [...myMap]
5. // [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ]

（2）数组 转为 Map

将数组传入 Map 构造函数，就可以转为 Map。

1. new Map([
2. [true, 7],
3. [{foo: 3}, ['abc']]
4. ])
5. // Map {
6. // true => 7,
7. // Object {foo: 3} => ['abc']
8. // }

（3）Map 转为对象

如果所有 Map 的键都是字符串，它可以无损地转为对象。

1. function strMapToObj(strMap) {

2. let obj = Object.create(null);

3. for (let [k,v] of strMap) {

4. `obj[k] = v;`
   

5. }

6. return obj;

7. }

8. const myMap = new Map()

9. .set('yes', true)

10. .set('no', false);

11. strMapToObj(myMap)

12. // { yes: true, no: false }

如果有非字符串的键名，那么这个键名会被转成字符串，再作为对象的键名。

（4）对象转为 Map

对象转为 Map 可以通过Object.entries()。

1. let obj = {"a":1, "b":2};
2. let map = new Map(Object.entries(obj));

此外，也可以自己实现一个转换函数。

1. function objToStrMap(obj) {

2. let strMap = new Map();

3. for (let k of Object.keys(obj)) {

4. `strMap.set(k, obj[k]);`
   

5. }

6. return strMap;

7. }

8. objToStrMap({yes: true, no: false})

9. // Map {"yes" => true, "no" => false}

（5）Map 转为 JSON

Map 转为 JSON 要区分两种情况。一种情况是，Map 的键名都是字符串，这时可以选择转为对象 JSON。

1. function strMapToJson(strMap) {

2. return JSON.stringify(strMapToObj(strMap));

3. }

4. let myMap = new Map().set('yes', true).set('no', false);

5. strMapToJson(myMap)

6. // '{"yes":true,"no":false}'

另一种情况是，Map 的键名有非字符串，这时可以选择转为数组 JSON。

1. function mapToArrayJson(map) {

2. return JSON.stringify([...map]);

3. }

4. let myMap = new Map().set(true, 7).set({foo: 3}, ['abc']);

5. mapToArrayJson(myMap)

6. // '[[true,7],[{"foo":3},["abc"]]]'

（6）JSON 转为 Map

JSON 转为 Map，正常情况下，所有键名都是字符串。

1. function jsonToStrMap(jsonStr) {

2. return objToStrMap(JSON.parse(jsonStr));

3. }

4. jsonToStrMap('{"yes": true, "no": false}')

5. // Map {'yes' => true, 'no' => false}

但是，有一种特殊情况，整个 JSON 就是一个数组，且每个数组成员本身，又是一个有两个成员的数组。这时，它可以一一对应地转为 Map。这往往是 Map 转为数组 JSON 的逆操作。

1. function jsonToMap(jsonStr) {

2. return new Map(JSON.parse(jsonStr));

3. }

4. jsonToMap('[[true,7],[{"foo":3},["abc"]]]')

5. // Map {true => 7, Object {foo: 3} => ['abc']}

WeakMap结构与Map结构类似，也是用于生成键值对的集合。WeakMap与Map的区别有两点。首先，WeakMap只接受对象作为键名（null除外），不接受其他类型的值作为键名。其次，WeakMap的键名所指向的对象，不计入垃圾回收机制。

和weakset一样

14. Proxy

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。

下面是 Proxy 支持的拦截操作一览，一共 13 种。

• get(target, propKey, receiver)：拦截对象属性的读取，比如proxy.foo和proxy['foo']。
• set(target, propKey, value, receiver)：拦截对象属性的设置，比如proxy.foo = v或proxy['foo'] = v，返回一个布尔值。
• has(target, propKey)：拦截propKey in proxy的操作，返回一个布尔值。
• deleteProperty(target, propKey)：拦截delete proxy[propKey]的操作，返回一个布尔值。
• ownKeys(target)：拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for...in循环，返回一个数组。该方法返回目标对象所有自身的属性的属性名，而Object.keys()的返回结果仅包括目标对象自身的可遍历属性。
• getOwnPropertyDescriptor(target, propKey)：拦截Object.getOwnPropertyDescriptor(proxy, propKey)，返回属性的描述对象。
• defineProperty(target, propKey, propDesc)：拦截Object.defineProperty(proxy, propKey, propDesc）、Object.defineProperties(proxy, propDescs)，返回一个布尔值。
• preventExtensions(target)：拦截Object.preventExtensions(proxy)，返回一个布尔值。
• getPrototypeOf(target)：拦截Object.getPrototypeOf(proxy)，返回一个对象。
• isExtensible(target)：拦截Object.isExtensible(proxy)，返回一个布尔值。
• setPrototypeOf(target, proto)：拦截Object.setPrototypeOf(proxy, proto)，返回一个布尔值。如果目标对象是函数，那么还有两种额外操作可以拦截。
• apply(target, object, args)：拦截 Proxy 实例作为函数调用的操作，比如proxy(...args)、proxy.call(object, ...args)、proxy.apply(...)。
• construct(target, args)：拦截 Proxy 实例作为构造函数调用的操作，比如new proxy(...args)。

1. var person = {

2. name: "张三"

3. };

4. var proxy = new Proxy(person, {

5. get: function(target, propKey) {

6. if (propKey in target) {

7. return target[propKey];

8. } else {

9. throw new ReferenceError("Prop name \"" + propKey + "\" does not exist.");

10. }

11. }

12. });

13. proxy.name // "张三"

14. proxy.age // 抛出一个错误

Proxy.revocable()方法返回一个可取消的 Proxy 实例。

Proxy.revocable()方法返回一个对象，该对象的proxy属性是Proxy实例，revoke属性是一个函数，可以取消Proxy实例。上面代码中，当执行revoke函数之后，再访问Proxy实例，就会抛出一个错误。

Proxy.revocable()的一个使用场景是，目标对象不允许直接访问，必须通过代理访问，一旦访问结束，就收回代理权，不允许再次访问。

15. Reflect

Reflect对象与Proxy对象一样，也是 ES6 为了操作对象而提供的新 API。Reflect对象的设计目的有这样几个。

（1） 将Object对象的一些明显属于语言内部的方法（比如Object.defineProperty），放到Reflect对象上。现阶段，某些方法同时在Object和Reflect对象上部署，未来的新方法将只部署在Reflect对象上。也就是说，从Reflect对象上可以拿到语言内部的方法。

（2） 修改某些Object方法的返回结果，让其变得更合理。比如，Object.defineProperty(obj, name, desc)在无法定义属性时，会抛出一个错误，而Reflect.defineProperty(obj, name, desc)则会返回false。

（3） 让Object操作都变成函数行为。某些Object操作是命令式，比如name in obj和delete obj[name]，而Reflect.has(obj, name)和Reflect.deleteProperty(obj, name)让它们变成了函数行为。

（4）Reflect对象的方法与Proxy对象的方法一一对应，只要是Proxy对象的方法，就能在Reflect对象上找到对应的方法。这就让Proxy对象可以方便地调用对应的Reflect方法，完成默认行为，作为修改行为的基础。也就是说，不管Proxy怎么修改默认行为，你总可以在Reflect上获取默认行为。

Reflect对象一共有 13 个静态方法。

• Reflect.apply(target, thisArg, args)
• Reflect.construct(target, args)
• Reflect.get(target, name, receiver)
• Reflect.set(target, name, value, receiver)
• Reflect.defineProperty(target, name, desc)
• Reflect.deleteProperty(target, name)
• Reflect.has(target, name)
• Reflect.ownKeys(target)
• Reflect.isExtensible(target)
• Reflect.preventExtensions(target)
• Reflect.getOwnPropertyDescriptor(target, name)
• Reflect.getPrototypeOf(target)
• Reflect.setPrototypeOf(target, prototype)

上面这些方法的作用，大部分与Object对象的同名方法的作用都是相同的，而且它与Proxy对象的方法是一一对应的。下面是对它们的解释。

16. Promise

Promise对象有以下两个特点。

（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。

（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

我们可以将图片的加载写成一个Promise，一旦加载完成，Promise的状态就发生变化。

1. const preloadImage = function (path) {
2. return new Promise(function (resolve, reject) {
3. const image = new Image();
4. image.onload = resolve;
5. image.onerror = reject;
6. image.src = path;
7. });
8. };

同时要注意：

1. setTimeout(function () {

2. console.log('three');

3. }, 0);

4. Promise.resolve().then(function () {

5. console.log('two');

6. });

7. console.log('one');

8. // one

9. // two

10. // three

上面代码中，setTimeout(fn, 0)在下一轮“事件循环”开始时执行，Promise.resolve()在本轮“事件循环”结束时执行，console.log('one')则是立即执行，因此最先输出。

实际开发中，经常遇到一种情况：不知道或者不想区分，函数f是同步函数还是异步操作，但是想用 Promise 来处理它。因为这样就可以不管f是否包含异步操作，都用then方法指定下一步流程，用catch方法处理f抛出的错误。一般就会采用下面的写法。

由于Promise.try为所有操作提供了统一的处理机制，所以如果想用then方法管理流程，最好都用Promise.try包装一下，其中一点就是可以更好地管理异常。

1. Promise.try(() => database.users.get({id: userId}))
2. .then(...)
3. .catch(...)

基本操作

ES6 规定，Promise对象是一个构造函数，用来生成Promise实例。

下面代码创造了一个Promise实例。

1. const promise = new Promise(function(resolve, reject) {

2. // ... some code

3. if (/* 异步操作成功 */){

4. `resolve(value);`
   

5. } else {

6. `reject(error);`
   

7. }

8. });

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署。

resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。

1. promise.then(function(value) {
2. // success
3. }, function(error) {
4. // failure
5. });

then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。其中，第二个函数是可选的，不一定要提供。这两个函数都接受Promise对象传出的值作为参数。

1. getJSON("/post/1.json").then(
2. post => getJSON(post.commentURL)
3. ).then(
4. comments => console.log("resolved: ", comments),
5. err => console.log("rejected: ", err)
6. );

Promise.prototype.catch()方法是.then(null, rejection)或.then(undefined, rejection)的别名，用于指定发生错误时的回调函数。

1. getJSON('/posts.json').then(function(posts) {
2. // ...
3. }).catch(function(error) {
4. // 处理 getJSON 和 前一个回调函数运行时发生的错误
5. console.log('发生错误！', error);
6. });

上面代码中，getJSON()方法返回一个 Promise 对象，如果该对象状态变为resolved，则会调用then()方法指定的回调函数；如果异步操作抛出错误，状态就会变为rejected，就会调用catch()方法指定的回调函数，处理这个错误。另外，then()方法指定的回调函数，如果运行中抛出错误，也会被catch()方法捕获。

1. p.then((val) => console.log('fulfilled:', val))

2. .catch((err) => console.log('rejected', err));

3. // 等同于

4. p.then((val) => console.log('fulfilled:', val))

5. .then(null, (err) => console.log("rejected:", err));

finally()方法用于指定不管 Promise 对象最后状态如何，都会执行的操作。该方法是 ES2018 引入标准的。

1. promise
2. .then(result => {···})
3. .catch(error => {···})
4. .finally(() => {···});

上面代码中，不管promise最后的状态，在执行完then或catch指定的回调函数以后，都会执行finally方法指定的回调函数。

下面是一个例子，服务器使用 Promise 处理请求，然后使用finally方法关掉服务器。

1. server.listen(port)
2. .then(function () {

3. `// ...`
   

4. })
5. .finally(server.stop);

finally方法的回调函数不接受任何参数，这意味着没有办法知道，前面的 Promise 状态到底是fulfilled还是rejected。这表明，finally方法里面的操作，应该是与状态无关的，不依赖于 Promise 的执行结果。

Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。

1. const p = Promise.all([p1, p2, p3]);

上面代码中，Promise.all()方法接受一个数组作为参数，p1、p2、p3都是 Promise 实例，如果不是，就会先调用下面讲到的Promise.resolve方法，将参数转为 Promise 实例，再进一步处理。另外，Promise.all()方法的参数可以不是数组，但必须具有 Iterator 接口，且返回的每个成员都是 Promise 实例。

p的状态由p1、p2、p3决定，分成两种情况。

（1）只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。

（2）只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

Promise.race()方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例。

复制代码

1. const p = Promise.race([p1, p2, p3]);

上面代码中，只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数。

Promise.race()方法的参数与Promise.all()方法一样，如果不是 Promise 实例，就会先调用下面讲到的Promise.resolve()方法，将参数转为 Promise 实例，再进一步处理。

下面是一个例子，如果指定时间内没有获得结果，就将 Promise 的状态变为reject，否则变为resolve。

1. const p = Promise.race([

2. fetch('/resource-that-may-take-a-while'),

3. new Promise(function (resolve, reject) {

4. `setTimeout(() => reject(new Error('request timeout')), 5000)`
   

5. })

6. ]);

7. p

8. .then(console.log)

9. .catch(console.error);

上面代码中，如果 5 秒之内fetch方法无法返回结果，变量p的状态就会变为rejected，从而触发catch方法指定的回调函数。

Promise.allSettled()

Promise.allSettled()方法接受一组 Promise 实例作为参数，包装成一个新的 Promise 实例。只有等到所有这些参数实例都返回结果，不管是fulfilled还是rejected，包装实例才会结束。该方法由 ES2020 引入。

1. const promises = [

2. fetch('/api-1'),

3. fetch('/api-2'),

4. fetch('/api-3'),

5. ];

6. await Promise.allSettled(promises);

7. removeLoadingIndicator();

上面代码对服务器发出三个请求，等到三个请求都结束，不管请求成功还是失败，加载的滚动图标就会消失。

该方法返回的新的 Promise 实例，一旦结束，状态总是fulfilled，不会变成rejected。状态变成fulfilled后，Promise 的监听函数接收到的参数是一个数组，每个成员对应一个传入Promise.allSettled()的 Promise 实例。

1. const resolved = Promise.resolve(42);

2. const rejected = Promise.reject(-1);

3. const allSettledPromise = Promise.allSettled([resolved, rejected]);

4. allSettledPromise.then(function (results) {

5. console.log(results);

6. });

7. // [

8. // { status: 'fulfilled', value: 42 },

9. // { status: 'rejected', reason: -1 }

10. // ]

上面代码中，Promise.allSettled()的返回值allSettledPromise，状态只可能变成fulfilled。它的监听函数接收到的参数是数组results。该数组的每个成员都是一个对象，对应传入Promise.allSettled()的两个 Promise 实例。每个对象都有status属性，该属性的值只可能是字符串fulfilled或字符串rejected。fulfilled时，对象有value属性，rejected时有reason属性，对应两种状态的返回值。

下面是返回值用法的例子。

1. const promises = [ fetch('index.html'), fetch('https://does-not-exist/') ];

2. const results = await Promise.allSettled(promises);

3. // 过滤出成功的请求

4. const successfulPromises = results.filter(p => p.status === 'fulfilled');

5. // 过滤出失败的请求，并输出原因

6. const errors = results

7. .filter(p => p.status === 'rejected')

8. .map(p => p.reason);

有时候，我们不关心异步操作的结果，只关心这些操作有没有结束。这时，Promise.allSettled()方法就很有用。如果没有这个方法，想要确保所有操作都结束，就很麻烦。Promise.all()方法无法做到这一点。

1. const urls = [ /* ... */ ];

2. const requests = urls.map(x => fetch(x));

3. try {

4. await Promise.all(requests);

5. console.log('所有请求都成功。');

6. } catch {

7. console.log('至少一个请求失败，其他请求可能还没结束。');

8. }

上面代码中，Promise.all()无法确定所有请求都结束。想要达到这个目的，写起来很麻烦，有了Promise.allSettled()，这就很容易了。

Promise.any()方法接受一组 Promise 实例作为参数，包装成一个新的 Promise 实例。只要参数实例有一个变成fulfilled状态，包装实例就会变成fulfilled状态；如果所有参数实例都变成rejected状态，包装实例就会变成rejected状态。该方法目前是一个第三阶段的提案 。

Promise.any()跟Promise.race()方法很像，只有一点不同，就是不会因为某个 Promise 变成rejected状态而结束。

1. var resolved = Promise.resolve(42);

2. var rejected = Promise.reject(-1);

3. var alsoRejected = Promise.reject(Infinity);

4. Promise.any([resolved, rejected, alsoRejected]).then(function (result) {

5. console.log(result); // 42

6. });

7. Promise.any([rejected, alsoRejected]).catch(function (results) {

8. console.log(results); // [-1, Infinity]

9. });

17. Iterator 和 for … of 循环

扩展运算符

只要某个数据结构部署了 Iterator 接口，就可以对它使用扩展运算符，将其转为数组。

1. let arr = [...iterable];

yield

yield*后面跟的是一个可遍历的结构，它会调用该结构的遍历器接口。

1. let generator = function* () {

2. yield 1;

3. yield* [2,3,4];

4. yield 5;

5. };

6. var iterator = generator();

7. iterator.next() // { value: 1, done: false }

8. iterator.next() // { value: 2, done: false }

9. iterator.next() // { value: 3, done: false }

10. iterator.next() // { value: 4, done: false }

11. iterator.next() // { value: 5, done: false }

12. iterator.next() // { value: undefined, done: true }

其他场合

由于数组的遍历会调用遍历器接口，所以任何接受数组作为参数的场合，其实都调用了遍历器接口。下面是一些例子。

• for…of
• Array.from()
• Map(), Set(), WeakMap(), WeakSet()（比如new Map([['a',1],['b',2]])）
• Promise.all()
• Promise.race()

generator 函数

1. let myIterable = {

2. [Symbol.iterator]: function* () {

3. yield 1;

4. yield 2;

5. yield 3;

6. }

7. }

8. [...myIterable] // [1, 2, 3]

9. // 或者采用下面的简洁写法

10. let obj = {

11. * [Symbol.iterator]() {

12. yield 'hello';

13. yield 'world';

14. }

15. };

16. for (let x of obj) {

17. console.log(x);

18. }

19. // "hello"

20. // "world"

遍历器对象除了具有next方法，还可以具有return方法和throw方法。如果你自己写遍历器对象生成函数，那么next方法是必须部署的，return方法和throw方法是否部署是可选的。

return方法的使用场合是，如果for...of循环提前退出（通常是因为出错，或者有break语句），就会调用return方法。如果一个对象在完成遍历前，需要清理或释放资源，就可以部署return方法。

1. function readLinesSync(file) {

2. return {

3. `[Symbol.iterator]() {`
   

4.   `return {`
   

5.     `next() {`
   

6.       `return { done: false };`
   

7.     `},`
   

8.     `return() {`
   

9.       `file.close();`
   

10.       `return { done: true };`
    

11.     `}`
    

12.   `};`
    

13. `},`
    

14. };

15. }
    上面代码中，函数readLinesSync接受一个文件对象作为参数，返回一个遍历器对象，其中除了next方法，还部署了return方法。下面的两种情况，都会触发执行return方法。

16. // 情况一

17. for (let line of readLinesSync(fileName)) {

18. console.log(line);

19. break;

20. }

21. // 情况二

22. for (let line of readLinesSync(fileName)) {

23. console.log(line);

24. throw new Error();

25. }

18. Generator 函数

函数的写法如下：

1. function* foo(x, y) { ··· }

yield 表达式

由于 Generator 函数返回的遍历器对象，只有调用next方法才会遍历下一个内部状态，所以其实提供了一种可以暂停执行的函数。yield表达式就是暂停标志。

遍历器对象的next方法的运行逻辑如下。

（1）遇到yield表达式，就暂停执行后面的操作，并将紧跟在yield后面的那个表达式的值，作为返回的对象的value属性值。

（2）下一次调用next方法时，再继续往下执行，直到遇到下一个yield表达式。

（3）如果没有再遇到新的yield表达式，就一直运行到函数结束，直到return语句为止，并将return语句后面的表达式的值，作为返回的对象的value属性值。

（4）如果该函数没有return语句，则返回的对象的value属性值为undefined。

需要注意的是，yield表达式后面的表达式，只有当调用next方法、内部指针指向该语句时才会执行，因此等于为 JavaScript 提供了手动的“惰性求值”（Lazy Evaluation）的语法功能。

复制代码

1. function* gen() {
2. yield 123 + 456;
3. }

上面代码中，yield后面的表达式123 + 456，不会立即求值，只会在next方法将指针移到这一句时，才会求值。

yield表达式与return语句既有相似之处，也有区别。相似之处在于，都能返回紧跟在语句后面的那个表达式的值。区别在于每次遇到yield，函数暂停执行，下一次再从该位置继续向后执行，而return语句不具备位置记忆的功能。一个函数里面，只能执行一次（或者说一个）return语句，但是可以执行多次（或者说多个）yield表达式。正常函数只能返回一个值，因为只能执行一次return；Generator 函数可以返回一系列的值，因为可以有任意多个yield。从另一个角度看，也可以说 Generator 生成了一系列的值，这也就是它的名称的来历（英语中，generator 这个词是“生成器”的意思）。

Generator 函数可以不用yield表达式，这时就变成了一个单纯的暂缓执行函数。

1. function* f() {

2. console.log('执行了！')

3. }

4. var generator = f();

5. setTimeout(function () {

6. generator.next()

7. }, 2000);

上面代码中，函数f如果是普通函数，在为变量generator赋值时就会执行。但是，函数f是一个 Generator 函数，就变成只有调用next方法时，函数f才会执行。

另外需要注意，yield表达式只能用在 Generator 函数里面，用在其他地方都会报错。

Generator 是实现状态机的最佳结构。比如，下面的clock函数就是一个状态机。

1. var ticking = true;
2. var clock = function() {
3. if (ticking)

4. `console.log('Tick!');`
   

5. else

6. `console.log('Tock!');`
   

7. ticking = !ticking;
8. }

上面代码的clock函数一共有两种状态（Tick和Tock），每运行一次，就改变一次状态。这个函数如果用 Generator 实现，就是下面这样。

1. var clock = function* () {
2. while (true) {

3. `console.log('Tick!');`
   

4. `yield;`
   

5. `console.log('Tock!');`
   

6. `yield;`
   

7. }
8. };

18. Generator 函数的语法 - 应用 - 《阮一峰 ECMAScript 6 (ES6) 标准入门教程 第三版》 - 书栈网 · BookStack

generator 控制流

1. scheduler(longRunningTask(initialValue));

2. function scheduler(task) {

3. var taskObj = task.next(task.value);

4. // 如果Generator函数未结束，就继续调用

5. if (!taskObj.done) {

6. task.value = taskObj.value

7. scheduler(task);

8. }

9. }

10. let steps = [step1Func, step2Func, step3Func];

11. function* iterateSteps(steps){

12. for (var i=0; i< steps.length; i++){

13. var step = steps[i];

14. yield step();

15. }

16. }

for … of 无法遍历return 对象

for...of循环可以自动遍历 Generator 函数运行时生成的Iterator对象，且此时不再需要调用next方法。

1. function* foo() {

2. yield 1;

3. yield 2;

4. yield 3;

5. yield 4;

6. yield 5;

7. return 6;

8. }

9. for (let v of foo()) {

10. console.log(v);

11. }

12. // 1 2 3 4 5

上面代码使用for...of循环，依次显示 5 个yield表达式的值。这里需要注意，一旦next方法的返回对象的done属性为true，for...of循环就会中止，且不包含该返回对象，所以上面代码的return语句返回的6，不包括在for...of循环之中。

Generator 函数返回的遍历器对象，还有一个return方法，可以返回给定的值，并且终结遍历 Generator 函数。

1. function* numbers () {
2. yield 1;
3. try {
4. yield 2;
5. yield 3;
6. } finally {
7. yield 4;
8. yield 5;
9. }
10. yield 6;
11. }
12. var g = numbers();
13. g.next() // { value: 1, done: false }
14. g.next() // { value: 2, done: false }
15. g.return(7) // { value: 4, done: false }
16. g.next() // { value: 5, done: false }
17. g.next() // { value: 7, done: true }

上面代码中，调用return()方法后，就开始执行finally代码块，不执行try里面剩下的代码了，然后等到finally代码块执行完，再返回return()方法指定的返回值。

next()、throw()、return()这三个方法本质上是同一件事，可以放在一起理解。它们的作用都是让 Generator 函数恢复执行，并且使用不同的语句替换yield表达式。

next()是将yield表达式替换成一个值。

1. const g = function* (x, y) {

2. let result = yield x + y;

3. return result;

4. };

5. const gen = g(1, 2);

6. gen.next(); // Object {value: 3, done: false}

7. gen.next(1); // Object {value: 1, done: true}

8. // 相当于将 let result = yield x + y

9. // 替换成 let result = 1;

上面代码中，第二个next(1)方法就相当于将yield表达式替换成一个值1。如果next方法没有参数，就相当于替换成undefined。

throw()是将yield表达式替换成一个throw语句。

1. gen.throw(new Error('出错了')); // Uncaught Error: 出错了
2. // 相当于将 let result = yield x + y
3. // 替换成 let result = throw(new Error('出错了'));

return()是将yield表达式替换成一个return语句。

1. gen.return(2); // Object {value: 2, done: true}
2. // 相当于将 let result = yield x + y
3. // 替换成 let result = return 2;

yield*表达式，用来在一个 Generator 函数里面执行另一个 Generator 函数。

yield*命令可以很方便地取出嵌套数组的所有成员。

复制代码

1. function* iterTree(tree) {

2. if (Array.isArray(tree)) {

3. `for(let i=0; i < tree.length; i++) {`
   

4.   `yield* iterTree(tree[i]);`
   

5. `}`
   

6. } else {

7. `yield tree;`
   

8. }

9. }

10. const tree = [ 'a', ['b', 'c'], ['d', 'e'] ];

11. for(let x of iterTree(tree)) {

12. console.log(x);

13. }

14. // a

15. // b

16. // c

17. // d

18. // e

由于扩展运算符...默认调用 Iterator 接口，所以上面这个函数也可以用于嵌套数组的平铺。

1. [...iterTree(tree)] // ["a", "b", "c", "d", "e"]

this 结合 generator ：

1. function* F() {

2. this.a = 1;

3. yield this.b = 2;

4. yield this.c = 3;

5. }

6. var f = F.call(F.prototype);

7. f.next(); // Object {value: 2, done: false}

8. f.next(); // Object {value: 3, done: false}

9. f.next(); // Object {value: undefined, done: true}

10. f.a // 1

11. f.b // 2

12. f.c // 3

19. Generator 函数的异步应用

Generator 函数可以暂停执行和恢复执行，这是它能封装异步任务的根本原因。除此之外，它还有两个特性，使它可以作为异步编程的完整解决方案：函数体内外的数据交换和错误处理机制。

下面看看如何使用 Generator 函数，执行一个真实的异步任务。

1. var fetch = require('node-fetch');

2. function* gen(){

3. var url = 'https://api.github.com/users/github';

4. var result = yield fetch(url);

5. console.log(result.bio);

6. }

上面代码中，Generator 函数封装了一个异步操作，该操作先读取一个远程接口，然后从 JSON 格式的数据解析信息。就像前面说过的，这段代码非常像同步操作，除了加上了yield命令。

执行这段代码的方法如下。

1. var g = gen();

2. var result = g.next();

3. result.value.then(function(data){

4. return data.json();

5. }).then(function(data){

6. g.next(data);

7. });

上面代码中，首先执行 Generator 函数，获取遍历器对象，然后使用next方法（第二行），执行异步任务的第一阶段。由于Fetch模块返回的是一个 Promise 对象，因此要用then方法调用下一个next方法。

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

传值调用和传名调用

”传值调用”（call by value），即在进入函数体之前，就计算x + 5的值（等于 6），再将这个值传入函数f。C 语言就采用这种策略。
“传名调用”（call by name），即直接将表达式x + 5传入函数体，只在用到它的时候求值。Haskell 语言采用这种策略。

Thunk 函数真正的威力，在于可以自动执行 Generator 函数。下面就是一个基于 Thunk 函数的 Generator 执行器。

1. function run(fn) {

2. var gen = fn();

3. function next(err, data) {

4. `var result = gen.next(data);`
   

5. `if (result.done) return;`
   

6. `result.value(next);`
   

7. }

8. next();

9. }

10. function* g() {

11. // ...

12. }

13. run(g);

上面代码的run函数，就是一个 Generator 函数的自动执行器。内部的next函数就是 Thunk 的回调函数。next函数先将指针移到 Generator 函数的下一步（gen.next方法），然后判断 Generator 函数是否结束（result.done属性），如果没结束，就将next函数再传入 Thunk 函数（result.value属性），否则就直接退出。

co 模块是著名程序员 TJ Holowaychuk 于 2013 年 6 月发布的一个小工具，用于 Generator 函数的自动执行。

下面是一个 Generator 函数，用于依次读取两个文件。

1. var gen = function* () {
2. var f1 = yield readFile('/etc/fstab');
3. var f2 = yield readFile('/etc/shells');
4. console.log(f1.toString());
5. console.log(f2.toString());
6. };

co 模块可以让你不用编写 Generator 函数的执行器。

1. var co = require('co');
2. co(gen);

co就是把对象转化为promise对象如何层层then

20. async 函数

async 函数是什么？一句话，它就是 Generator 函数的语法糖。

前文有一个 Generator 函数，依次读取两个文件。

1. const fs = require('fs');

2. const readFile = function (fileName) {

3. return new Promise(function (resolve, reject) {

4. `fs.readFile(fileName, function(error, data) {`
   

5.   `if (error) return reject(error);`
   

6.   `resolve(data);`
   

7. `});`
   

8. });

9. };

10. const gen = function* () {

11. const f1 = yield readFile('/etc/fstab');

12. const f2 = yield readFile('/etc/shells');

13. console.log(f1.toString());

14. console.log(f2.toString());

15. };

上面代码的函数gen可以写成async函数，就是下面这样。

1. const asyncReadFile = async function () {
2. const f1 = await readFile('/etc/fstab');
3. const f2 = await readFile('/etc/shells');
4. console.log(f1.toString());
5. console.log(f2.toString());
6. };

一比较就会发现，async函数就是将 Generator 函数的星号（*）替换成async，将yield替换成await，仅此而已。

ad
async函数对 Generator 函数的改进，体现在以下四点。

（1）内置执行器。

Generator 函数的执行必须靠执行器，所以才有了co模块，而async函数自带执行器。也就是说，async函数的执行，与普通函数一模一样，只要一行。

1. asyncReadFile();

上面的代码调用了asyncReadFile函数，然后它就会自动执行，输出最后结果。这完全不像 Generator 函数，需要调用next方法，或者用co模块，才能真正执行，得到最后结果。

（2）更好的语义。

async和await，比起星号和yield，语义更清楚了。async表示函数里有异步操作，await表示紧跟在后面的表达式需要等待结果。

（3）更广的适用性。

co模块约定，yield命令后面只能是 Thunk 函数或 Promise 对象，而async函数的await命令后面，可以是 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时会自动转成立即 resolved 的 Promise 对象）。

（4）返回值是 Promise。

async函数的返回值是 Promise 对象，这比 Generator 函数的返回值是 Iterator 对象方便多了。你可以用then方法指定下一步的操作。

进一步说，async函数完全可以看作多个异步操作，包装成的一个 Promise 对象，而await命令就是内部then命令的语法糖。

async 函数有多种使用形式。

1. // 函数声明

2. async function foo() {}

3. // 函数表达式

4. const foo = async function () {};

5. // 对象的方法

6. let obj = { async foo() {} };

7. obj.foo().then(...)

8. // Class 的方法

9. class Storage {

10. constructor() {

11. this.cachePromise = caches.open('avatars');

12. }

13. async getAvatar(name) {

14. const cache = await this.cachePromise;

15. return cache.match(`/avatars/${name}.jpg`);

16. }

17. }

18. const storage = new Storage();

19. storage.getAvatar('jake').then(…);

20. // 箭头函数

21. const foo = async () => {};

Promise 对象的状态变化

async函数返回的 Promise 对象，必须等到内部所有await命令后面的 Promise 对象执行完，才会发生状态改变，除非遇到return语句或者抛出错误。也就是说，只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数。

下面是一个例子。

1. async function getTitle(url) {
2. let response = await fetch(url);
3. let html = await response.text();
4. return html.match(/