JavaScript迭代器与for-of遍历教程

JavaScript的迭代器协议为对象提供了统一、按需的遍历能力，而for...of循环正是基于Symbol.iterator方法工作的核心机制——只要对象实现该方法并返回符合规范的迭代器（即拥有返回{value, done}对象的next()函数），就能被优雅遍历；普通对象默认不支持，但可通过手动编写迭代逻辑或更简洁可靠的生成器函数（function*）轻松赋能，同时需注意for...in与for...of的本质区别、迭代器的一次性特性及常见报错陷阱，掌握这些要点，你就能灵活定制任意对象的遍历行为，写出更清晰、健壮的现代JavaScript代码。

JavaScript 迭代器（Iterator）是一种统一的遍历机制，它让对象能按需逐个返回值；for...of 循环正是基于迭代器协议工作的——它不关心数据结构内部怎么存，只认一个方法：[Symbol.iterator]()，只要对象实现了这个方法并返回符合规范的迭代器对象，就能被 for...of 遍历。

迭代器协议的核心：Symbol.iterator 方法

一个对象要支持 for...of，必须在自身或原型链上拥有 Symbol.iterator 属性，且该属性是一个无参函数，返回一个“迭代器对象”。这个迭代器对象必须有 next() 方法，每次调用返回形如 { value: ..., done: true|false } 的对象。

• value 是当前产出的值（可以是任意类型）
• done: false 表示还有值可取；done: true 表示遍历结束，之后的 next() 调用也应返回 { value: undefined, done: true }

让普通对象支持 for...of：手动实现 Symbol.iterator

默认情况下，普通对象（如 {a:1, b:2}）**不支持** for...of，因为它没实现迭代器协议。你可以手动添加：

const obj = {
  a: 1,
  b: 2,
  c: 3,
  [Symbol.iterator]() {
    const keys = Object.keys(this);
    let index = 0;
    return {
      next() {
        if (index for (const val of obj) {
console.log(val); // 输出：1, 2, 3
}

注意：next() 中用了 .bind(this)，因为迭代器对象内部需要访问原对象的属性（this[key]），否则 this 会丢失。

更简洁写法：用生成器函数（Generator）自动实现迭代器

生成器函数（用 function* 定义）天然返回符合协议的迭代器，代码更清晰、不易出错：

const obj = {
  a: 1,
  b: 2,
  c: 3,
  *[Symbol.iterator]() {
    for (const key of Object.keys(this)) {
      yield this[key];
    }
  }
};
for (const val of obj) {
console.log(val); // 同样输出：1, 2, 3
}

生成器自动处理 done 和状态维护，推荐在自定义迭代逻辑时优先使用。

常见误区与注意事项

• for...in 遍历的是对象的**可枚举属性名**（key），而 for...of 遍历的是对象提供的**值序列**（由 [Symbol.iterator] 决定）
• 数组、字符串、Map、Set 等内置类型已内置 Symbol.iterator，所以开箱即用；普通对象没有，必须手动加
• 迭代器是一次性的：同一个迭代器对象只能遍历一次；若需多次遍历，[Symbol.iterator] 应每次返回**新迭代器**（如上面两个例子中，每次调用都新建闭包或生成器实例）
• 如果 [Symbol.iterator] 返回的不是对象，或返回对象没有 next 方法，for...of 会报 TypeError

本篇关于《JavaScript迭代器与for-of遍历教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！