在 JavaScript 中,如果一个对象要被 for…of 迭代,那么它必须是可迭代的。可迭代对象是一种具有 Symbol.iterator 方法的对象,该方法返回一个迭代器对象,该迭代器对象实现了 next() 方法,每次调用 next() 方法都返回一个包含 value 和 done 属性的对象,用于迭代对象的每个元素。

因此,要使一个对象 iterable 化,需要实现一个 Symbol.iterator 方法。该方法应该返回一个迭代器对象,这个迭代器对象应该实现 next() 方法,用于返回迭代对象的每个元素。

举一个例子下面是一个简单的示例,演示如何将一个普通对象 iterable 化:

 1const myObj = {
 2  data: [1, 2, 3],
 3  [Symbol.iterator]() {
 4    let index = 0;
 5    return {
 6      next: () => {
 7        if (index < this.data.length) {
 8          return { value: this.data[index++], done: false };
 9        } else {
10          return { done: true };
11        }
12      },
13    };
14  },
15};
16
17for (const item of myObj) {
18  console.log(item);
19}
20// 输出:1, 2, 3

再举一个例子,比如我们有一个对象,里面存储了一些学生的信息,我们希望能够使用 for…of 循环遍历每个学生信息:

 1const students = {
 2  Alice: { age: 18, gender: 'female', score: 90 },
 3  Bob: { age: 19, gender: 'male', score: 85 },
 4  Charlie: { age: 20, gender: 'male', score: 95 }
 5};
 6
 7students[Symbol.iterator] = function* () {
 8  const keys = Object.keys(this);
 9  for (let i = 0; i < keys.length; i++) {
10    yield [keys[i], this[keys[i]]];
11  }
12};
13
14for (const [name, info] of students) {
15  console.log(`${name}: ${info.age} ${info.gender} ${info.score}`);
16}

这样我们就可以使用 for…of 循环遍历学生信息对象中的每个学生信息了。

个人笔记记录 2021 ~ 2025