JavaScript Iterator是什么_如何让对象可迭代?

Iterator 是一种协议,要求对象实现[Symbol.iterator]()方法并返回含next()的迭代器对象,next()须返回{value, done}结构且done为布尔值。

JavaScript 中的 Iterator 不是某个类或构造函数,而是一种协议(protocol)——只要对象实现了 [Symbol.iterator]() 方法,并返回一个符合迭代器规范的对象,它就能被 for...ofArray.from()、展开运算符(...)等消费。

什么是 Iterator 协议?

Iterator 协议包含两个层级:

  • 可迭代(iterable):对象有 [Symbol.iterator] 方法,调用后返回一个迭代器(iterator)对象
  • 迭代器(iterator):返回的对象必须有 next() 方法,该方法返回形如 { value: any, done: boolean } 的对象

注意:done: true 后再调用 next(),仍应返回 { value: undefined, done: true },这是规范要求,不是可选行为。

如何让普通对象变成可迭代?

直接在对象上定义 [Symbol.iterator] 方法即可。常见写法是返回一个闭包内的迭代器,或使用生成器函数(更简洁)。

const obj = {
  a: 1,
  b: 2,
  c: 3
};

// 方式一:手动实现迭代器 obj[Symbol.iterator] = function() { const keys = Object.keys(this); let index = 0; return { next: () => { if (index < keys.length) { const key = keys[index++]; return { value: this[key], done: false }; } return { value: undefined, done: true }; } }; };

// 方式二:用生成器(推荐) obj[Symbol.iterator] = function* () { for (const key of Object.keys(this)) { yield this[key]; } };

两种方式都让 obj 可被 for...of 遍历。但生成器写法更安全:自动处理 done 边界、支持 break/return、可暂停恢复。

为什么 Object.prototype 没有默认实现 [Symbol.iterator]?

因为普通对象的“遍历顺序”没有明确定义:ECMAScript 规范只规定了 Object.keys()Object.getOwnPropertyNames() 等 API 的枚举顺序(按插入顺序 + 数字键优先),但不强制所有对象必须遵循同一遍历语义。

对比之下,MapSet 明确以插入顺序为迭代顺序,所以原生实现了 [Symbol.iterator];而 Object 更偏向无序键值容器,强行默认迭代可能引发歧义或性能顾虑(比如遍历所有原型链属性?只遍历自身?是否包含 Symbol 键?)。

所以,JS 不会替你决定“这个对象该怎么被遍历”,得由使用者显式定义。

容易踩的坑

常见错误包括:

  • [Symbol.iterator] 拼错成 Symbol.iterator(漏掉方括号)——这只会定义一个叫 "Symbol.iterator" 的字符串属性,不是真正的 symbol 属性
  • 迭代器 next() 返回值缺少 done 字段,或类型不是 boolean ——for...of 会静默失败或无限循环
  • 在迭代过程中修改原对象结构(如增删属性)——手动实现时容易索引越界或跳过项;生成器中若依赖 Object.keys() 快照则相对安全
  • 把可迭代对象和迭代器混淆:前者是“能产生迭代器的东西”,后者是“带 next() 的东西”。重复调用 [Symbol.iterator]() 应每次返回新迭代器,而不是复用旧的

最隐蔽的问题是:自定义 [Symbol.iterator] 后,如果没考虑 this 绑定(比如箭头函数或绑定丢失),在解构或展开时可能报 Cannot read property 'xxx' of undefined