JavaScript迭代器原理与应用解析

本文深入解析了JavaScript迭代器协议的核心机制与实用价值，阐明它并非要求开发者手动编写复杂的Iterator类，而是通过实现[Symbol.iterator]方法（推荐使用简洁可靠的生成器函数function*）让任意对象支持for...of、Array.from、Promise.allSettled等现代API；文章直击常见痛点——如“TypeError: xxx is not iterable”错误的根源，并以普通对象遍历为例，演示如何优雅赋能自定义数据结构，同时强调生成器在状态管理、惰性求值和异步迭代中的天然优势，帮助开发者真正理解并高效运用这一支撑ES6+生态的关键协议。

JavaScript 不需要你“写迭代器”来让代码跑起来，但一旦你开始处理自定义数据结构、想让 for...of 正常工作、或和 Array.from、Promise.allSettled 这类接收可迭代对象的 API 配合，就绕不开迭代器协议。

什么是迭代器协议（不是 Iterator 类）

它是一套约定：只要一个对象有 [Symbol.iterator] 方法，且该方法返回一个符合要求的对象（有 next() 方法，返回 { value, done } 形式的对象），那它就是可迭代的。数组、字符串、Map、Set 天然满足；普通对象不满足。

常见错误现象：for...of 报错 TypeError: xxx is not iterable，说明目标对象没实现这个协议。

• 不必手动写 class MyIterator —— 大多数时候用生成器函数 function* 最简洁
• [Symbol.iterator] 必须是函数，不能是箭头函数（无法访问 this）
• 返回的迭代器对象必须每次调用 next() 都推进状态，不能每次都返回相同值

如何让普通对象支持 for...of

给对象加 [Symbol.iterator] 方法即可。典型场景：遍历对象的键值对，但又不想用 Object.entries(obj) 包一层（比如为了性能或语义清晰）。

const obj = { a: 1, b: 2, c: 3 };
obj[Symbol.iterator] = function* () {
  for (const key of Object.keys(this)) {
    yield [key, this[key]];
  }
};
for (const [k, v] of obj) {
console.log(k, v); // a 1, b 2, c 3
}

注意：Object.keys() 返回的是数组，本身可迭代，但直接 for (const k of this) 会报错 —— 因为 this 是普通对象，不可迭代。

生成器函数为什么是首选实现方式

它自动满足迭代器协议：函数本身返回一个迭代器对象，且 yield 天然对应 next() 的暂停/恢复逻辑。

• 避免手写 next() 状态机（容易漏 done: true 或搞错顺序）
• 可以轻松处理异步迭代（配合 async function* 和 for await...of）
• 惰性求值 —— 值只在 next() 调用时计算，适合处理大数据流或无限序列

对比手写迭代器：

// 手动实现（冗长易错）
const range = {
  from: 1,
  to: 3,
  [Symbol.iterator]() {
    return {
      current: this.from,
      last: this.to,
      next() {
        if (this.current // 生成器（一行核心逻辑）
function* rangeGen(from, to) {
for (let i = from; i <= to; i++) yield i;
}

哪些内置方法依赖迭代器协议

不只是 for...of。任何接受“可迭代对象”的 API 都会尝试调用 [Symbol.iterator]：

• Array.from(iterable) —— 把可迭代对象转成数组
• new Set(iterable)、new Map(iterable)
• Promise.all(iterable)、Promise.allSettled(iterable)
• 解构赋值：const [a, b] = myIterable;

如果你的自定义类想被这些方法消费，就必须实现 [Symbol.iterator]。否则它们会静默失败或抛出类型错误。

最容易被忽略的一点：迭代器是一次性的。同一个迭代器对象多次调用 next() 会持续推进；但如果你反复把同一个对象传给 Array.from，它每次都会重新调用 [Symbol.iterator]，所以只要这个方法每次都返回新迭代器，就没问题 —— 生成器函数天然做到这点。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript迭代器原理与应用解析》文章吧，也可关注golang学习网公众号了解相关技术文章。