可迭代协议要求对象实现[Symbol.iterator]方法，返回遵循迭代器协议的迭代器对象，后者通过next()方法返回{value, done}形式的结果，从而支持for...of、扩展运算符等语法。
在JavaScript中，迭代协议并不是一个具体的内置对象或类，而是一套规范，用来定义如何遍历数据结构中的元素。它由两个核心部分组成：可迭代协议（Iterable Protocol）和迭代器协议（Iterator Protocol）。理解这两个协议，有助于我们更好地使用 for...of 循环、展开运算符（...）、Array.from() 等语言特性，并能自定义支持遍历的对象。
可迭代协议（Iterable Protocol）
一个对象如果实现了 [Symbol.iterator] 方法，就被认为是“可迭代的”。这个方法必须返回一个迭代器对象，也就是遵循迭代器协议的对象。很多内置类型天然支持该协议，比如：
- 数组（Array）
- 字符串（String）
- Map 和 Set
- arguments 对象
- NodeList 等 DOM 集合（部分环境）
你可以通过检测对象是否含有 [Symbol.iterator] 方法来判断其是否可迭代：
[1, 2, 3][Symbol.iterator] // ƒ values() { [native code] }'hello'[Symbol.iterator] // ƒ [Symbol.iterator]() { [native code] }
123[Symbol.iterator] // undefined
这意味着数字 123 不可迭代，因此不能用于 for...of 中。
立即学习“Java免费学习笔记（深入）”；
迭代器协议（Iterator Protocol）
迭代器协议定义了一个标准方式来产生一系列值（有限或无限），并可能在结束后返回一个返回值。一个迭代器是一个对象，它实现了 next() 方法，该方法返回一个格式为：
{ value: any, done: boolean }其中：
- value 是当前步骤的值（当 done 为 true 且无返回值时可省略）
- done 是布尔值，表示迭代是否完成
当 done 为 true 时，表示迭代结束；为 false 时表示还有更多值待返回。
下面是一个手动创建迭代器的例子：
const createCounter = () => ({
[Symbol.iterator]() {
let current = 1;
return {
next() {
if (current return { value: current++, done: false };
} else {
return { done: true };
}
}
};
}
});
这个对象是可迭代的，可以这样使用：
for (const num of createCounter()) {console.log(num); // 输出 1, 2, 3
}
生成器函数：简化迭代器创建
手动实现 next() 和状态管理比较繁琐。ES6 引入了生成器函数（Generator Function），用 function* 定义，内部使用 yield 返回值，能自动返回符合迭代器协议的对象。
function* idGenerator() {let id = 1;
while (true) {
yield id++;
}
}
const gen = idGenerator();
gen.next(); // { value: 1, done: false }
gen.next(); // { value: 2, done: false }
生成器函数返回的对象既是可迭代的，也是迭代器本身（即实现了 next 方法并返回 {value, done} 格式），非常方便。
实际应用场景
理解迭代协议能帮助我们写出更灵活的代码。例如：
- 封装自定义集合类，使其能被 for...of 遍历
- 构建惰性求值序列（如无限流）
- 组合多个数据源进行统一迭代
- 与异步操作结合（通过 async/await 和异步迭代器）
比如，我们可以让一个树结构支持遍历：
class TreeNode {constructor(value, children = []) {
this.value = value;
this.children = children;
}
[Symbol.iterator]() {
yield this.value;
for (const child of this.children) {
yield child;
}
}
}
这样就能递归地遍历整棵树：
const tree = new TreeNode(1, [new TreeNode(2),
new TreeNode(3, [new TreeNode(4)])
]);
for (const val of tree) {
console.log(val); // 1, 2, 3, 4
}
基本上就这些。掌握迭代协议，能让你更深入理解JavaScript中“可遍历”的本质，不再局限于数组和循环语法糖。不复杂但容易忽略。
