在 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