开始阅读JavaScript高级程序设计（第5版）学习JS，总共有1000+页，非常全面，短期看完不太现实，找到了一篇博客，花些时间跟着这篇博客过一下红宝书。
红宝书《JavaScript高级程序设计（第5版）》学习大纲 - 大前端全栈开发 - SegmentFault 思否
迭代的英文“iteration”源自拉丁文itero，意思是“重复”或“再来”。在软件开发领域，“迭代”的意思是按照顺序反复多次执行一段程序，通常会有明确的终止条件。ECMAScript规范新增了两个高级特性：迭代器和生成器。使用这两个特性，能够更清晰、高效、方便地实现迭代。
理解迭代：
在JavaScript中，计数循环就是一种最简单的迭代：
1
2
3
for (let i = 1; i <= 10; ++i) {
console.log(i);
}
循环是迭代机制的基础，这是因为它可以指定迭代的次数，以及每次迭代要执行什么操作。每次循环都会在下一次迭代开始之前完成，而每次迭代的顺序都是事先定义好的。
迭代会在一个有序集合上进行。（“有序”可以理解为集合中所有项都可以按照既定的顺序被遍历到，特别是开始项和结束项有明确的定义。）数组是JavaScript中有序集合的最典型例子。
1
2
3
4
5
let collection = ['foo', 'bar', 'baz'];
for (let index = 0; index < collection.length; ++index) {
console.log(collection[index]);
}
因为数组有已知的长度，且数组每一项都可以通过索引获取，所以整个数组可以通过递增索引来遍历。
由于如下原因，通过这种循环来执行例程并不理想。
· 迭代之前需要事先知道如何使用数据结构。数组中的每一项都只能先通过引用取得数组对象，然后再通过 [] 操作符取得特定索引位置上的项。这种情况并不适用于所有数据结构。
· 遍历顺序并不是数据结构固有的。通过递增索引来访问数据是特定于数组类型的方式，并不适用于其他具有隐式顺序的数据结构。
ES5新增了Array.prototype.forEach()方法，向通用迭代需求迈进了一步（但仍然不够理想）：
1
2
3
4
5
6
let collection = ['foo', 'bar', 'baz'];
collection.forEach((item) => console.log(item));
// foo
// bar
// baz
这个方法解决了单独记录索引和通过数组对象取得值的问题。不过，没有办法标识迭代何时终止。因此这个方法只适用于数组，而且回调结构也比较笨拙。
在ECMAScript较早的版本中，执行迭代必须使用循环或其他辅助结构。随着代码量增加，代码会变得越发混乱。很多语言通过原生语言结构解决了这个问题，开发者无须事先知道迭代是如何发生的就能实现迭代操作。这个解决方案就是迭代器模式。Python、Java、C++，还有其他很多语言也对这个模式提供了完备的支持。
迭代器模式：
迭代器模式描述了一个方案：某些结构实现了正式的 Iterable 接口，称为”可迭代对象”（iterable），可以被实现了 Iterator 接口的”迭代器”（iterator）消费。
可迭代对象是一种抽象的说法。基本上，可以把可迭代对象理解成数组或集合这样的集合类型的对象。它们包含的元素都是有限的，而且都具有无歧义的遍历顺序：
1
2
3
4
5
6
7
// 数组的元素是有限的
// 递增索引可以按序访问每个元素
let arr = [3, 1, 4];
// 集合的元素是有限的
// 可以按插入顺序访问每个元素
let set = new Set().add(3).add(1).add(4);
但可迭代对象不一定是集合对象，也可以是仅仅具有类似数组行为的数据结构，比如一个计数循环——生成的值是暂时性的，但循环本身在执行迭代。
临时性可迭代对象可以实现为生成器（generator），后面会讨论。
迭代器是按需创建的一次性对象。每个迭代器关联一个可迭代对象，暴露用于迭代其关联可迭代对象的 API。迭代器无须了解可迭代对象的结构，只需要知道如何取得连续的值。
这种概念上的分离正是 Iterable 和 Iterator 的强大之处。
高频必考内容（掌握这些就能应对80%的场景）：
可迭代协议与迭代器协议的区别和联系，这是面试中必问的基础概念
内置可迭代对象（Array、String、Map、Set等）的使用，这些在日常开发中天天会用到
自定义迭代器的实现，面试中经常会考手写题
for…of 循环的工作原理，理解底层机制对深入掌握JavaScript很重要
中频了解内容（知道原理，面试中可能会延伸问及）：
迭代器提前终止（即return()方法），主要用于资源清理场景
迭代器的实时性，要注意在迭代过程中修改原对象会影响到迭代
可迭代对象的继承，实际开发中可能会用到
低频认知内容（了解概念即可）：
不可关闭的迭代器，例如数组的迭代器就具有不可关闭的特性
迭代器自身也是可迭代对象，这属于实现细节，很少考察
补充建议：
生成器（Generator）在实际开发中比手动实现迭代器更常用
可迭代协议：
实现 Iterable 接口（可迭代协议）需要具备两种能力：支持迭代的自我识别能力，以及创建实现 Iterator 接口的对象的能力。
在 ECMAScript 中，这意味着必须暴露一个属性作为”默认迭代器”，且该属性必须使用 Symbol.iterator 作为键。这个属性引用一个迭代器工厂函数，调用它必须返回一个新迭代器。
内置可迭代类型：
以下内置类型都实现了 Iterable 接口：
- 字符串、数组、Map、Set
arguments对象NodeList等 DOM 集合类型
1
2
3
4
5
6
7
8
9
10
let str = 'abc';
let arr = ['a', 'b', 'c'];
// 检查是否存在默认迭代器工厂函数
str[Symbol.iterator]; // f values() { [native code] } 取到工厂函数
arr[Symbol.iterator]; // f values() { [native code] }
// 调用工厂函数生成迭代器
str[Symbol.iterator](); // StringIterator {} ()立刻执行
arr[Symbol.iterator](); // ArrayIterator {}
而 number、普通对象等没有实现：
1
2
3
4
let num = 1;
let obj = {};
num[Symbol.iterator]; // undefined
obj[Symbol.iterator]; // undefined
原生消费方式：
实际开发中不需要显式调用工厂函数。以下原生语言特性会在后台自动调用它，从而消费可迭代对象：
for...of循环- 数组解构
- 扩展操作符（
...） Array.from()Set/Map构造函数Promise.all()/Promise.race()yield*操作符
1
2
3
4
5
6
7
8
9
10
let arr = ['foo', 'bar', 'baz'];
for (let el of arr) { console.log(el); } // foo bar baz
let [a, b, c] = arr; // 数组解构
let arr2 = [...arr]; // 扩展操作符
let arr3 = Array.from(arr); // Array.from()
let set = new Set(arr); // Set 构造函数
let map = new Map(arr.map((x, i) => [x, i])); // Map 构造函数
继承：
如果对象原型链上的父类实现了 Iterable 接口，那么该对象也就自动实现了：
1
2
3
4
5
class FooArray extends Array {}
let fooArr = new FooArray('foo', 'bar', 'baz');
for (let el of fooArr) { console.log(el); }
// foo bar baz
迭代器协议：
迭代器是一种一次性使用的对象，用于迭代与其关联的可迭代对象。迭代器 API 使用 next() 方法遍历数据，每次成功调用返回一个 IteratorResult 对象。不调用 next() 就无法知道迭代器的当前位置。
IteratorResult：done 与 value
next() 返回的结果对象包含两个属性：
done：布尔值，false表示还可以继续调用next()，true表示迭代已”耗尽”value：可迭代对象的下一个值；done为true时为undefined
在实际开发中，我们很少直接利用next()处理
{value, done}这样的对象。JavaScript 提供了多种语法糖和内置方法来自动处理这些细节。例如forof循环、扩展运算符和Array.from()等，他们会在底层调用next()并检查done。
1
2
3
4
5
6
let arr = ['foo', 'bar'];
let iter = arr[Symbol.iterator]();
iter.next(); // { done: false, value: 'foo' }
iter.next(); // { done: false, value: 'bar' }
iter.next(); // { done: true, value: undefined }
迭代器到达 done: true 后，后续调用 next() 始终返回同样的耗尽结果：
1
2
3
4
5
6
let arr = ['foo'];
let iter = arr[Symbol.iterator]();
iter.next(); // { done: false, value: 'foo' }
iter.next(); // { done: true, value: undefined }
iter.next(); // { done: true, value: undefined }
迭代器是实时的，不是快照：
迭代器并不与可迭代对象某个时刻的快照绑定，而是使用游标记录遍历历程。如果可迭代对象在迭代期间被修改，迭代器也会反映相应的变化：
1
2
3
4
5
6
7
8
9
10
let arr = ['foo', 'baz'];
let iter = arr[Symbol.iterator]();
iter.next(); // { done: false, value: 'foo' }
arr.splice(1, 0, 'bar'); // 在中间插入值
iter.next(); // { done: false, value: 'bar' } ← 反映了修改
iter.next(); // { done: false, value: 'baz' }
iter.next(); // { done: true, value: undefined }
迭代器维护着指向可迭代对象的引用，因此会阻止垃圾回收程序回收该可迭代对象。
手动实现迭代：
“迭代器”这个概念有时比较模糊——它可以指通用的迭代行为、接口规范，或正式的迭代器类型。以下对比了手动实现与原生实现：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 手动实现：类实现 Iterable 接口，工厂函数返回 Iterator 对象
class Foo {
[Symbol.iterator]() {
return {
next() {
return { done: false, value: 'foo' };
}
};
}
}
let f = new Foo();
f[Symbol.iterator](); // { next: f() {} }
// 原生实现：Array 内置的迭代器工厂函数
let a = new Array();
a[Symbol.iterator](); // Array Iterator {}
自定义迭代器：
任何实现 Iterator 接口的对象都可以作为迭代器使用。下面这个 Counter 类只能被迭代一定的次数：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
class Counter {
constructor(limit) { // 构造函数接受limit参数
this.count = 1; // 将计数状态count存储在实例属性上
this.limit = limit;
}
next() { // next方法直接定义在实例上
if (this.count <= this.limit) {
return { done: false, value: this.count++ };
} else {
return { done: true, value: undefined };
}
}
[Symbol.iterator]() { // 返回实例本身
return this;
}
}
let counter = new Counter(3);
for (let i of counter) { console.log(i); }
// 1 2 3
对于[Symbol.iterator]方法的调用规则：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
[Symbol.iterator]() { ... }
// ├── [] ──┐ 属性名包裹符（因为 Symbol）
// │ │
// ├── Symbol.iterator ──┐ 属性名（Symbol 值）
// │ │
// ├── () ──┐ 方法定义符
// │ │
// └── { ... } ──┐ 方法体
class MyClass {
// 这四种写法是等价的：
// 1. 传统写法
[Symbol.iterator]: function() { return "迭代器"; }
// 2. ES6 方法简写（推荐）
[Symbol.iterator]() { return "迭代器"; }
// 3. 使用函数表达式
[Symbol.iterator] = function() { return "迭代器"; };
// 4. 使用箭头函数
[Symbol.iterator] = () => "迭代器";
}
但这个实现有缺陷：每个实例只能被迭代一次，因为 count 状态保存在实例自身，耗尽后无法重置：
1
2
for (let i of counter) { console.log(i); } // 1 2 3
for (let i of counter) { console.log(i); } // （无输出）
用闭包支持多次迭代：
解决方案是让 Symbol.iterator 工厂函数每次返回一个新的迭代器，把计数变量放到闭包里：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
class Counter {
constructor(limit) {
this.limit = limit;
}
[Symbol.iterator]() {
let count = 1,
limit = this.limit;
return {
next() { // 每次调用都返回新对象，这个next形成闭包
if (count <= limit) {
return { done: false, value: count++ };
} else {
return { done: true, value: undefined };
}
}
};
}
}
let counter = new Counter(3);
for (let i of counter) { console.log(i); } // 1 2 3
for (let i of counter) { console.log(i); } // 1 2 3
关键区别：第一种写法 Symbol.iterator 返回 this（迭代器就是实例本身），第二种写法每次调用都返回一个新的闭包迭代器，所以可以反复迭代。
迭代器自身也是可迭代对象：
每个迭代器也都实现了 Iterable 接口，其 Symbol.iterator 引用的工厂函数返回自身：
1
2
3
4
5
let arr = ['foo', 'bar', 'baz'];
let iter1 = arr[Symbol.iterator]();
let iter2 = iter1[Symbol.iterator]();
iter1 === iter2; // true（返回同一个迭代器）
因此迭代器也可以用在任何期待可迭代对象的地方：
1
2
3
4
5
let arr = [3, 1, 4];
let iter = arr[Symbol.iterator]();
for (let item of arr) { console.log(item); } // 3 1 4
for (let item of iter) { console.log(item); } // 3 1 4
提前终止迭代器：
可选的 return() 方法用于指定迭代器提前关闭时执行的逻辑。当执行迭代的结构不想遍历到耗尽时，就可以”关闭”迭代器，可能的情况包括：
for...of循环通过break、continue、return或throw提前退出- 解构操作并未消费所有值
return() 方法必须返回一个有效的 IteratorResult 对象，简单情况下可以只返回 { done: true }。内置语言结构在发现还有更多值但不会消费时，会自动调用 return()：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
class Counter {
constructor(limit) {
this.limit = limit;
}
[Symbol.iterator]() {
let count = 1,
limit = this.limit;
return {
next() {
if (count <= limit) {
return { done: false, value: count++ };
} else {
return { done: true };
}
},
return() {
console.log('Exiting early');
return { done: true };
}
};
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// break 提前退出
let counter1 = new Counter(5);
for (let i of counter1) {
if (i > 2) break;
console.log(i);
}
// 1 2 Exiting early
// throw 提前退出
let counter2 = new Counter(5);
try {
for (let i of counter2) {
if (i > 2) throw 'err';
console.log(i);
}
} catch(e) {}
// 1 2 Exiting early
// 解构未消费所有值
let counter3 = new Counter(5);
let [a, b] = counter3;
// Exiting early
不可关闭的迭代器：
如果迭代器没有关闭，则可以继续从上次离开的地方迭代。比如数组的迭代器就是不可关闭的：
1
2
3
4
5
6
7
8
9
10
11
12
13
let a = [1, 2, 3, 4, 5];
let iter = a[Symbol.iterator]();
for (let i of iter) {
console.log(i);
if (i > 2) break;
}
// 1 2 3
for (let i of iter) {
console.log(i);
}
// 4 5 ← 继续从上次的位置迭代
return() 方法是可选的，并非所有迭代器都可关闭。可以测试迭代器实例的 return 属性是否为函数来判断。
但要注意：仅仅给不可关闭的迭代器添加 return() 方法并不能让它变成可关闭的——因为调用 return() 不会强制迭代器进入关闭状态，不过 return() 还是会被调用。