JavaScript迭代器怎么用？让对象可迭代的方法

一分耕耘，一分收获！既然打开了这篇文章《JavaScript迭代器是什么？如何让对象可迭代》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

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

JavaScript 中的 Iterator 不是某个类或构造函数，而是一种协议（protocol）——只要对象实现了 [Symbol.iterator]() 方法，并返回一个符合迭代器规范的对象，它就能被 for...of、Array.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
};
<p>// 方式一：手动实现迭代器
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 };
}
};
};</p><p>// 方式二：用生成器（推荐）
obj[Symbol.iterator] = function* () {
for (const key of Object.keys(this)) {
yield this[key];
}
};</p>

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

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

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

对比之下，Map 和 Set 明确以插入顺序为迭代顺序，所以原生实现了 [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。

终于介绍完啦！小伙伴们，这篇关于《JavaScript迭代器怎么用？让对象可迭代的方法》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！