17370845950

迭代器是拥有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() 是线性推进的，没有重置机制——这是迭代器的核心特征，也是它和循环语句的本质区别。

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），会导致逻辑错误或无限循环

真正难的不是写出一个能跑的迭代器，而是判断什么时候该用它、什么时候该用数组方法、什么时候该用生成器——这取决于你是否需要延迟计算、是否要中断遍历、是否要复用遍历逻辑。