17370845950

JavaScript迭代协议是一套约定：对象需实现[Symbol.iterator]方法并返回符合迭代器协议的对象；迭代器协议要求next()方法返回{value: any, done: boolean}结构，done为true时结束迭代。

JavaScript 迭代协议不是某个 API 或函数，而是一套约定：只要对象实现了 [Symbol.iterator] 方法，并返回一个符合迭代器协议的对象，它就能被 for...of、Array.from、展开运算符（...）等消费。

什么是迭代器协议？

迭代器协议规定：一个迭代器对象必须有 next() 方法，该方法返回形如 { value: any, done: boolean } 的对象。当 done 为 true 时，迭代结束。

常见错误是只实现 next()，却忘了它必须返回正确结构——比如返回 { v: 123 } 或 undefined，会导致 for...of 报错 TypeError: Iterator result undefined is not an object。

示例（手动构造一个合法迭代器）：

const iterator = {
  i: 0,
  next() {
    if (this.i < 3) {
      return { value: this.i++, done: false };
    }
    return { value: undefined, done: true };
  }
};

// 可以用 for...of 消费（但注意：它本身还不是可迭代对象）
for (const x of iterator) console.log(x); // ❌ TypeError：iterator 不可迭代

如何让对象可迭代？

关键是在对象上定义 [Symbol.iterator] 方法，且该方法必须返回一个迭代器对象（即带 next() 的对象）。

• [Symbol.iterator] 必须是函数，不能是箭头函数（否则无法用 this 绑定上下文）
• 每次调用 [Symbol.iterator] 应返回**新迭代器**，否则多次遍历会相互干扰（比如两个 for...of 同时跑，共享同一个计数器）
• 若想复用已有数组/字符串的迭代行为，可直接 return arr[Symbol.iterator]()

示例（让自定义对象支持 for...of）：

const range = {
  from: 1,
  to: 3,
  [Symbol.iterator]() {
    let current = this.from;
    return {
      next: () => {
        if (current <= this.to) {
          return { value: current++, done: false };
        }
        return { value: undefined, done: true };
      }
    };
  }
};

for (const n of range) console.log(n); // 1, 2, 3
console.log([...range]); // [1, 2, 3]

哪些内置类型默认可迭代？

数组、字符串、Map、Set、TypedArray、arguments 对象、NodeList 都原生实现了 [Symbol.iterator]。但普通对象（{}）、Object.prototype、JSON、Function 等不支持。

常见误区：

• for...in 遍历的是对象的**可枚举属性名**，和迭代协议无关；它不保证顺序，也不处理 Symbol 键
• Object.keys(obj) 返回数组，所以能展开，但 obj 本身仍不可迭代
• 给普通对象加 [Symbol.iterator] 不会影响 for...in 行为，两者完全独立

性能提示：如果只是临时需要遍历键或值，优先用 Object.keys(obj) + for...of，而不是给对象挂迭代器——后者会污染实例，且多数场景没必要。

Generator 函数是最简捷的实现方式

不用手写 next() 和状态管理，用 function* 自动返回符合协议的迭代器。

注意点：

• Generator 函数本身不是迭代器，调用后返回的才是
• 不能在 generator 内部用 this 访问外层对象（除非显式 .bind()），因为 generator 函数体不绑定 this
• generator 支持 yield* 委托，适合组合多个可迭代源

示例（更简洁安全的 range 实现）：

const range = {
  from: 1,
  to: 3,
  *[Symbol.iterator]() {
    for (let i = this.from; i <= this.to; i++) {
      yield i;
    }
  }
};

console.log([...range]); // [1, 2, 3]

最易被忽略的一点：迭代协议是“按需计算”的，next() 只在每次循环时才执行。这意味着你可以用它表达无限序列（如自然数）、延迟加载的数据流，甚至 I/O 流——但也要小心，忘记设终止条件会导致死循环。