JavaScript迭代协议通过Symbol.iterator让对象可迭代，实现该方法并返回带next()的迭代器对象，即可用for...of或展开运算符遍历；生成器函数（function*）配合yield能更简洁地创建迭代器，自动管理状态与next()逻辑，提升代码可读性与灵活性。
JavaScript中的迭代协议，说白了，就是一套约定，它让任何对象都能定义自己的遍历行为。核心在于实现一个特定的方法：
[Symbol.iterator]。只要一个对象有这个方法，并且这个方法能返回一个符合迭代器协议的对象，那它就是“可迭代对象”。这意味着你可以用
for...of循环它，或者用展开运算符（
...）来解构它，就像处理数组一样。这套机制让数据消费变得非常统一和灵活。
迭代协议的实现机制
要让一个JavaScript对象变得可迭代，你需要给它添加一个名为
[Symbol.iterator]的方法。这个方法必须是一个函数，并且它被调用时，必须返回一个“迭代器”对象。
那么，什么是迭代器呢？迭代器本身也是一个对象，它必须包含一个
next()方法。每次调用这个
next()方法时，它都应该返回一个包含两个属性的对象：
value
: 这是当前迭代到的值。done
: 这是一个布尔值，表示迭代是否已经完成。如果迭代结束，done
就应该是true
；否则，就是false
。
举个例子，假设我们想创建一个简单的计数器，让它能从某个数字开始，数到另一个数字：
function createCounter(start, end) {
let current = start;
return {
[Symbol.iterator]() { // 这就是可迭代协议的关键
return { // 返回一个迭代器对象
next() { // 迭代器对象必须有next方法
if (current <= end) {
return { value: current++, done: false };
} else {
return { value: undefined, done: true };
}
}
};
}
};
}
const myCounter = createCounter(1, 3);
for (const num of myCounter) {
console.log(num); // 输出 1, 2, 3
}
// 也可以用展开运算符
const numsArray = [...createCounter(5, 7)];
console.log(numsArray); // 输出 [5, 6, 7]这里可以看到，
createCounter返回的对象就是可迭代的，因为它实现了
[Symbol.iterator]。而
[Symbol.iterator]方法返回的那个带有
next()的对象，就是迭代器。这种分离的设计很常见，让你可以控制迭代的状态。
for...of
循环是如何与迭代协议协同工作的？
for...of循环是ES6引入的，它专门用来遍历可迭代对象。它的工作原理其实非常直接，但又很巧妙。当你写下
for (const item of someIterableObject)时，JavaScript引擎在幕后做了几件事：
它会首先尝试调用
someIterableObject的
[Symbol.iterator]()方法。如果这个方法不存在，或者返回的不是一个迭代器对象，那么就会抛出一个错误，告诉你这个对象不是可迭代的。
如果成功获取到迭代器，
for...of就会反复调用这个迭代器的
next()方法。每次调用，它都会检查
next()返回的对象中的
done属性。
- 如果
done
是false
，那么value
属性的值就会被赋给item
变量，然后循环体内的代码会被执行。 - 如果
done
是true
，这意味着迭代已经完成，for...of
循环就会终止。
这与传统的
for...in循环形成鲜明对比。
for...in是用来遍历对象属性名的，它会枚举对象自身以及原型链上的可枚举属性。而
for...of则完全聚焦于数据集合的“值”本身，它不关心属性名，只关心通过迭代协议暴露出来的数据序列。这使得
for...of在处理数组、字符串、Map、Set以及你自定义的任何可迭代数据结构时，都能提供一种统一且直观的遍历方式。在我看来，这是现代JavaScript中处理数据流非常基础且强大的一个抽象。
如何利用生成器函数更简洁地创建可迭代对象？
手动实现迭代器的
next()方法，尤其是当迭代逻辑比较复杂时，可能会显得有些冗长和容易出错。JavaScript为此提供了一个语法糖，也就是“生成器函数”（Generator Function），它能极大地简化可迭代对象的创建过程。
生成器函数使用
function*语法定义，并且在函数体内部，你可以使用
yield关键字来“产出”值。每次
yield一个值，生成器函数就会暂停执行，并返回这个值作为迭代器结果的
value，同时
done会被自动设为
false。当再次调用迭代器的
next()方法时，生成器函数会从上次暂停的地方继续执行，直到遇到下一个
yield或函数结束。如果函数执行完毕（没有更多的
yield），那么返回的
done就会是
true。
这意味着，一个生成器函数本身在被调用时，就会返回一个迭代器对象，这个对象已经自动实现了
next()方法。所以，要创建一个可迭代对象，你只需要让它的
[Symbol.iterator]方法是一个生成器函数即可。
// 还是那个计数器，用生成器函数实现
function createCounterWithGenerator(start, end) {
return {
[Symbol.iterator]: function* () { // [Symbol.iterator] 现在是一个生成器函数
for (let i = start; i <= end; i++) {
yield i; // 每次yield一个值，就会暂停并返回
}
}
};
}
const myGenCounter = createCounterWithGenerator(10, 12);
for (const num of myGenCounter) {
console.log(num); // 输出 10, 11, 12
}
// 或者更直接地，生成器函数本身就是迭代器
function* simpleGenerator() {
yield 'Hello';
yield 'World';
yield '!';
}
const gen = simpleGenerator(); // 调用生成器函数直接返回一个迭代器
console.log(gen.next()); // { value: 'Hello', done: false }
console.log(gen.next()); // { value: 'World', done: false }
console.log(gen.next()); // { value: '!', done: false }
console.log(gen.next()); // { value: undefined, done: true }
// 甚至可以直接用for...of遍历生成器函数返回的迭代器
for (const item of simpleGenerator()) {
console.log(item); // 输出 Hello, World, !
}在我看来，生成器函数简直是迭代器协议的“最佳拍档”。它把复杂的迭代逻辑，特别是那些需要维护内部状态的遍历，用一种更接近同步代码的直观方式表达出来。你不再需要手动管理
value和
done，
yield关键字和生成器函数的执行流程帮你把这些都处理好了。这不仅提升了代码的可读性，也大大降低了实现自定义迭代器的心智负担。当你需要处理任何形式的数据流，无论是从文件读取、网络请求分块，还是简单的数字序列，生成器函数都能提供一种非常优雅的解决方案。
