可迭代协议通过Symbol.iterator使对象支持for...of遍历，返回迭代器对象；迭代器协议由next()方法实现，生成器函数以*声明并用yield简化迭代逻辑，自动实现迭代器协议。
JavaScript中的迭代器和生成器是处理数据序列的核心机制，理解它们的工作原理有助于写出更高效、更具可读性的代码。关键在于掌握“可迭代协议”和“迭代器协议”的区别与联系，以及生成器如何简化迭代逻辑。
可迭代协议：让对象能被 for...of 遍历
一个对象如果实现了Symbol.iterator方法，它就是“可迭代的”。这个方法必须返回一个迭代器对象，从而支持for...of循环、展开运算符（...）、Array.from()等语法。
常见内置可迭代对象包括：数组、字符串、Map、Set、arguments 对象等。你也可以为自定义对象实现可迭代性。
例如，让一个对象支持遍历其属性值：
立即学习“Java免费学习笔记（深入）”；
const myObj = {
a: 1,
b: 2,
c: 3,
[Symbol.iterator]() {
const values = Object.values(this);
let index = 0;
return {
next() {
if (index < values.length) {
return { value: values[index++], done: false };
}
return { done: true };
}
};
}
};
<p>for (const val of myObj) {
console.log(val); // 输出 1, 2, 3
}</p>迭代器协议：定义如何逐步访问数据
迭代器是一个具有next()方法的对象，每次调用返回一个形如{ value, done }的结果。done 为 true 表示遍历结束。
迭代器本身不需要一次性拥有所有数据，适合处理无限序列或懒加载场景。
手动创建一个计数迭代器：
function createCounter(max) {
let count = 0;
return {
next() {
if (count < max) {
return { value: count++, done: false };
}
return { done: true };
}
};
}
<p>const counter = createCounter(3);
console.log(counter.next()); // { value: 0, done: false }
console.log(counter.next()); // { value: 1, done: false }
console.log(counter.next()); // { value: 2, done: false }
console.log(counter.next()); // { done: true }</p>生成器函数：优雅创建迭代器
使用function*定义的生成器函数，调用后会返回一个生成器对象——既是迭代器，也是可迭代对象。
通过yield关键字暂停执行并返回值，下次调用next()时从暂停处继续。
重写上面的计数器：
function* counterGenerator(max) {
let count = 0;
while (count < max) {
yield count++;
}
}
<p>const gen = counterGenerator(3);
for (const val of gen) {
console.log(val); // 输出 0, 1, 2
}</p>生成器的优势在于代码简洁，状态自动维护，且天然支持惰性求值。
实际应用场景举例
利用生成器可以轻松实现一些实用功能：
- 无限序列：如斐波那契数列，只在需要时计算下一个值
- 分页数据流：逐页拉取 API 数据，对外表现为单一可迭代接口
- 异步迭代：结合 async/await 使用 async generator 处理异步任务队列
例如，生成斐波那契数列前 n 项：
function* fibonacci() {
let [prev, curr] = [0, 1];
while (true) {
yield curr;
[prev, curr] = [curr, prev + curr];
}
}
<p>for (const num of fibonacci()) {
if (num > 100) break;
console.log(num);
}</p>基本上就这些。掌握可迭代协议和生成器，能让代码更贴近数据流动的本质，写出既直观又高效的迭代逻辑。
