什么是javascript迭代器_for_of循环如何遍历自定义对象-js教程-PHP中文网

什么是javascript迭代器_for_of循环如何遍历自定义对象

狼影

发布： 2025-12-23 17:21:07

原创

740人浏览过

JavaScript迭代器是按需返回值的统一遍历机制，for...of依赖Symbol.iterator方法；该方法须返回含next()的对象，next()返回{value, done}；普通对象需手动实现Symbol.iterator才能被for...of遍历。

什么是javascript迭代器_for_of循环如何遍历自定义对象

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 < keys.length) {
          const key = keys[index++];
          return { value: this[key], done: false };
        }
        return { value: undefined, done: true };
      }.bind(this)
    };
  }
};
<p>for (const val of obj) {
console.log(val); // 输出：1, 2, 3
}

登录后复制

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

零一万物开放平台

零一万物大模型开放平台

查看详情

立即学习“Java免费学习笔记（深入）”；

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

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

const obj = {
  a: 1,
  b: 2,
  c: 3,
  *[Symbol.iterator]() {
    for (const key of Object.keys(this)) {
      yield this[key];
    }
  }
};
<p>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