JavaScript迭代器本质是具有next()方法的对象，每次调用返回{value: ..., done: true|false}；它不存储数据，只按需产出值；原生可迭代对象通过[Symbol.iterator]()提供该迭代器。
JavaScript 迭代器本质是啥？
迭代器不是语法糖，也不是新数据类型，而是一个**有 next() 方法的对象**，每次调用返回形如 { value: ..., done: true|false } 的结果。它本身不存储数据，只负责按需“吐”出下一个值。数组、字符串、Map 等原生可迭代对象背后都封装了这样的迭代器——但你调用 for...of 时，引擎自动调用其 [Symbol.iterator]() 方法拿到这个迭代器对象。
怎么让一个对象支持 for...of？
只需在对象上定义 [Symbol.iterator] 方法，且该方法必须返回一个符合迭代器协议的对象（即带 next() 的对象）。注意：不是返回值，而是返回一个迭代器实例。
-
[Symbol.iterator]是一个方法，不能是箭头函数（否则无法用this） - 返回的迭代器对象里，
next()必须是函数，且每次调用应推进内部状态 - 如果想多次遍历（比如两次
for...of），[Symbol.iterator]每次都得返回**新**的迭代器，不能复用同一个
const counter = {
from: 1,
to: 3,
[Symbol.iterator]() {
let current = this.from;
const { to } = this;
return {
next() {
if (current <= to) {
return { value: current++, done: false };
}
return { value: undefined, done: true };
}
};
}
};
for (const num of counter) {
console.log(num); // 1, 2, 3
}
为什么自定义迭代器常配合生成器函数？
手写 next() 容易出错，尤其涉及异步、暂停、复杂状态时。function* 生成器函数天然返
回符合协议的迭代器，且能用 yield 声明式地控制产出逻辑，大幅降低出错概率。
- 生成器函数体内，
yield表达式的值就是next().value - 生成器函数执行后不立即运行，只返回迭代器；每次
next()才执行到下一个yield - 若对象需要支持多次遍历，
[Symbol.iterator]仍需每次调用生成器函数（即每次return myGenerator()）
const range = {
from: 10,
to: 12,
*[Symbol.iterator]() {
for (let i = this.from; i <= this.to; i++) {
yield i;
}
}
};
[...range] // [10, 11, 12]
容易被忽略的关键细节
很多人以为只要加了 [Symbol.iterator] 就万事大吉，但实际踩坑点很具体：
-
done: true后再调next()，value应为undefined（规范要求），但手写时容易漏掉或返回旧值 - 迭代器必须可“重置”：
for...of、Array.from()、展开运算符等都会重新调用[Symbol.iterator]，所以不能把状态存在对象自身上（除非你明确只允许单次遍历） - 异步迭代器要用
[Symbol.asyncIterator]，和同步迭代器完全隔离；混用会静默失败 - 某些工具（如 Babel 转译老环境）可能不自动 polyfill
Symbol.iterator，需确认目标环境支持或引入core-js
