17370845950

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) 等操作。这个方法本身可以是：

• 一个普通函数，返回迭代器对象（如上面的 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] —— 每次都是新迭代器