JavaScript迭代器是拥有next()方法的对象,返回{value, done}对象;其可迭代性由[Symbol.iterator]方法实现,供for...of等语法使用。

JavaScript 迭代器是一个具有 next() 方法的对象,每次调用返回形如 { value: ..., done: true|false } 的结果。它本身不决定“怎么遍历”,只负责按需提供下一个值;而让对象“可迭代”,关键在于实现 [Symbol.iterator] 方法——这是 for...of、解构、扩展运算符等语法背后的统一接口。
迭代器的核心:next() 方法
一个合法的迭代器对象必须有 next() 方法,该方法:
- 无参数(或仅接受一个可选参数,用于向生成器传值)
- 返回一个对象,含
value(当前产出的值)和done(布尔值,true表示遍历结束) -
done: true后再调用next(),通常仍应返回{ value: undefined, done: true }
例如手动创建一个简单迭代器:
const counter = {
current: 0,
next() {
if (this.current < 3) {
return { value: this.current++, done: false };
}
return { value: undefined, done: true };
}
};
// 可以用 for...of?不行——它没有 [Symbol.iterator]
让对象可迭代:实现 [Symbol.iterator]
只要对象的 [Symbol.iterator] 方法返回一个迭代器,它就自动支持 for...of、[...obj]、Array.from(obj) 等操作。这个方法本身可以是:
立即学习“Java免费学习笔记(深入)”;
- 一个普通函数,返回迭代器对象(如上面的
counter) - 一个生成器函数(
function*),此时方法体自动返回迭代器 - 直接复用已有的迭代器(如数组的
values())
给上面的 counter 加上可迭代能力:
counter[Symbol.iterator] = function() {
return {
current: 0,
next() {
if (this.current < 3) {
return { value: this.current++, done: false };
}
return { value: undefined, done: true };
}
};
};
// 现在可以用了
for (const n of counter) console.log(n); // 0, 1, 2
console.log([...counter]); // [0, 1, 2]
更简洁写法:用生成器函数
生成器函数(function*)天然返回迭代器,代码更清晰、状态更安全(不用手动管理 this):
const range = {
from: 0,
to: 2,
*[Symbol.iterator]() {
for (let i = this.from; i <= this.to; i++) {
yield i;
}
}
};
console.log([...range]); // [0, 1, 2]
注意:yield 会自动包装成 { value: i, done: false };循环结束后,生成器自动返回 { value: undefined, done: true }。
常见可迭代对象与自定义建议
原生可迭代对象包括 Array、Map、Set、String、TypedArray、arguments、NodeList 等。自定义时建议:
- 保持
[Symbol.iterator]是无参方法(除非你明确需要传参控制行为) - 确保每次调用都返回新迭代器(避免多个 for...of 共享同一状态)
- 如果数据源是只读的(如配置对象),可缓存迭代器;否则每次返回新实例
- 考虑兼容性:
Symbol.iterator在 IE 中不支持,需 polyfill 或降级处理
例如安全的多次遍历写法:
class Countdown {
constructor(n) {
this.n = n;
}
*[Symbol.iterator]() {
let i = this.n;
while (i > 0) yield i--;
}
}
const c = new Countdown(3);
console.log([...c]); // [3, 2, 1]
console.log([...c]); // [3, 2, 1] —— 每次都是新迭代器











