迭代器是拥有next()方法的对象,返回{value, done}结构;它不是数据本身而是按需取值的接口;数组等是可迭代对象,调用[Symbol.iterator]()才得到迭代器。

迭代器对象长什么样?
JavaScript 中的迭代器是一个拥有 next() 方法的对象,每次调用都返回形如 { value: ..., done: true|false } 的结果。它不等于数据本身,而是“按需取值”的访问接口。数组、字符串、Map、Set 等内置类型默认实现了 [Symbol.iterator] 方法,所以能被 for...of 消费。
常见误解是把迭代器和可迭代对象混为一谈:数组是可迭代对象,arr[Symbol.iterator]() 才是真正的迭代器。
-
next()必须存在,且不能带参数(除非是生成器迭代器) -
done: true后再调next(),value通常为undefined(规范未强制,但主流引擎如此) - 手动创建迭代器时,状态必须可维护——比如用闭包保存当前索引
怎么手动实现一个数组迭代器?
理解原理最直接的方式是手写。下面是一个模仿 Array.prototype.values() 的简单实现:
function createArrayIterator(arr) {
let index = 0;
return {
next() {
if (index < arr.length) {
return { value: arr[index++], done: false };
}
return { value: undefined, done: true };
}
};
}
const it = createArrayIterator([10, 20, 30]);
console.log(it.next()); // { value: 10, done: false }
console.log(it.next()); // { value: 20, done: false }
console.log(it.next()); // { value: 30, done: false }
console.log(it.next()); // { value: undefined, done: true }
注意:这个迭代器只能用一次。多次调用 next() 是线性推进的,没有重置机制——这是迭代器的核心特征,也是它和循环语句的本质区别。
立即学习“Java免费学习笔记(深入)”;
for...of 和扩展运算符背后都依赖它
for...of 不是语法糖,它明确要求操作对象有 [Symbol.iterator] 方法;扩展运算符 [...iterable] 同理。如果对象没实现该接口,就会报错:TypeError: XXX is not iterable。
- 普通对象(
{})默认不可迭代,想让它支持for...of,得手动加[Symbol.iterator]方法 - 类数组对象(如
arguments、DOM 列表)在 ES6+ 中多数已内置迭代器,但旧版 IE 需用Array.from()或展开为数组 -
yield函数(Generator)自动返回迭代器,且支持多次遍历(每次调用gen()都新建一个独立迭代器)
哪些地方容易踩坑?
迭代器的“一次性”和“懒执行”特性,在实际使用中常被忽略:
- 用
for...of遍历完一次后,再次遍历同一迭代器对象,什么也不会发生——因为内部指针已到末尾,done始终为true - 把迭代器误传给期望接收可迭代对象的 API(比如
Promise.all(iter)),会失败;应先确认它是可迭代对象,或用Array.from(it)转成数组 - 异步迭代器(
AsyncIterator)用for await...of,不能混用for...of,否则得不到值,也不报错,只是静默跳过 - 自定义迭代器若没正确处理边界(如
index > length还继续返回value),会导致逻辑错误或无限循环
真正难的不是写出一个能跑的迭代器,而是判断什么时候该用它、什么时候该用数组方法、什么时候该用生成器——这取决于你是否需要延迟计算、是否要中断遍历、是否要复用遍历逻辑。











