共计 3135 个字符，预计需要花费 8 分钟才能阅读完成。
本周精读的文章是 Iterables 与 Iteration protocols，依照为什么须要迭代器、迭代器是如何设计的，咱们还能怎么利用迭代器开展来讲。
概述
为什么须要迭代器
因为用 for ... of 循环数组十分不便，但如果仅数组才反对这个语法就太过于麻烦了，比方咱们天然会心愿 for ... of 能够遍历字符串的每个字符，心愿 new Set([1, 2, 3]) 能够疾速初始化一个新的 Set。
以上提到的能力 JS 都反对，那么为什么 JS 引擎晓得字符串该如何遍历？如何晓得数组 [1, 2, 3] 与 Set 类型每一个 Key 之间的对应关系？ 实现这些性能背地的原理就是迭代器（Iterables）。
因为 Array、Set 都是可迭代的，所以他们都能够被 for ... of 遍历，JS 引擎也天然晓得他们之间互相转换的关系。
迭代器是如何设计的
有两种定义迭代器的办法，别离是独立定义与合并在对象里定义。
独立定义
为对象拓展 [Symbol.iterator] 属性即可。之所以标准采纳 [Symbol.iterator] 是为了避免一般的字面量 Key 与对象本身的 OwnProperties 抵触：
const obj = {}
obj[Symbol.iterator] = function() {
return {
someValue: 1,
next() {
// 可通过 this.someValue 拜访与批改该值，可定义任意数量的变量作为迭代过程中的辅助变量
if (...) {return { done: false, value: this.current++} // 示意迭代还没完，以后值为 value
}
return {done: true} // 示意迭代结束
}
};
}; 在 for ... of 时，只有没有读到 done: true 就会始终循环。
合并在对象里定义
简化一点能够将迭代定义在对象里：
let range = {
from: 1,
to: 5,
[Symbol.iterator]() {
this.current = this.from;
return this;
},
next() {if (this.current <= this.to) {return { done: false, value: this.current++};
} else {return { done: true};
}
},
};这么定义的毛病是并行迭代对象时可能触发 BUG，因为每个迭代间共享了同一份状态变量。
手动管制迭代
迭代器也能够自定义触发，办法如下：
const myObj = iterable[Symbol.iterator]();
myObj.next(); // { value: 1, done: false}
myObj.next(); // { value: 2, done: false}
myObj.next(); // { value: 3, done: false}
myObj.next(); // { done: true} 当 done 为 true 时你就晓得迭代进行了。手动管制迭代的益处是，你能够自在管制 next() 触发的机会与频率，甚至提前终止，带来了更大的自由度。
可迭代与 ArrayLike 的区别
如果不理解迭代器，可能会认为 for of 是通过下标拜访的，也就会把一个对象是否用 obj[index] 拜访与是否可迭代弄混。
读过下面的介绍，你应该了解到可迭代的起因是实现了 [Symbol.iterator]，而与对象是否是数组，或者 ArrayLike 没有关系。
// 该对象可迭代，不是 ArrayLike
const range = {
from: 1,
to: 5,
};
range[Symbol.iterator] = function () {// ...};// 该对象不可迭代，是 ArrayLike
const range = {
"0": "a",
"1": "b",
length: 2,
};// 该对象可迭代，是 ArrayLike
const range = {
"0": "a",
"1": "b",
length: 2,
};
range[Symbol.iterator] = function () {// ...};顺带一提，js 的数组类型就是典型既可迭代，又属于 ArrayLike 的类型。
精读
可迭代的内置类型
String、Array、TypedArray、Map、Set 都反对迭代，其体现为：
const myString = "abc";
for (let val of myString) {console.log(val);
} // 'a', 'b', 'c'
const myArr = ["a", "b", "c"];
for (let val of myArr) {console.log(val);
} // 'a', 'b', 'c'
const myMap = [["1", "a"],
["2", "b"],
["3", "c"],
];
for (let val of myMap) {console.log(val);
} // ['1', 'a'], ['2', 'b'], ['3', 'c']
const mySet = new Set(["a", "b", "c"]);
for (let val of mySet) {console.log(val);
} // 'a', 'b', 'c'可迭代对象能够实用哪些 API
可迭代对象首先反对上文提到的 for ... of 与 for ... in 语法。
另外就是许多内置函数的入参反对传入可迭代对象：Map() WeakMap() Set() WeakSet() Promise.all() Promise.allSettled() Promise.race() Promise.any() Array.from()。
如 Array.from 语法，能够将可迭代对象变成真正的数组，该数组的下标就是执行 next() 的次数，值就是 next().value：
Array.from(new Set(["1", "2", "3"])); // ['1', '2', '3']generator 也是迭代器的一种，属于异步迭代器，所以你甚至能够将 yield 一个 generator 函数作为下面这些内置函数的参数：
new Set((function* () {
yield 1;
yield 2;
yield 3;
})());最初一种就是上周精读提到的 精读《Rest vs Spread 语法》，解构实质也是用迭代器进行运算的：
const range = {
from: 1,
to: 5,
[Symbol.iterator]() {
this.current = this.from;
return this;
},
next() {if (this.current <= this.to) {return { done: false, value: this.current++};
} else {return { done: true};
}
},
};
[...range]; // [1, 2, 3, 4, 5]总结
生存中，咱们能够数苹果的数量，数大楼的窗户，数芜杂的衣物有多少个，其实不同的场景这些对象的排列模式都不同，甚至老师在黑板写的 0~10，咱们依照这 4 个字符也能从 1 数到 10，这背地的原理形象到程序里就是迭代器。
一个对象黑盒，不管外部怎么实现，如果咱们能依照程序数出内部结构，那么这个对象就是可迭代的，这就是 [Symbol.iterator] 定义要解决的问题。
生存中与程序中都有一些默认的迭代器，能够认真领悟一下它们之间的关系。
探讨地址是：精读《迭代器 Iterable》· Issue #448 · dt-fe/weekly
如果你想参加探讨，请 点击这里，每周都有新的主题，周末或周一公布。前端精读 – 帮你筛选靠谱的内容。
关注 前端精读微信公众号
<img width=200 src=”https://img.alicdn.com/tfs/TB165W0MCzqK1RjSZFLXXcn2XXa-258-258.jpg”>
版权申明：自在转载 - 非商用 - 非衍生 - 放弃署名（创意共享 3.0 许可证）
