如何使用for of 循环遍历对象

在 JavaScript 中，for...of 循环用于遍历可迭代对象，例如数组、字符串、Map、Set 等。然而，普通对象（Object）并不是默认的可迭代对象，因此无法直接使用 for...of 循环进行遍历。

var obj = {'a': 1, 'b': 2}
for(let item of obj) {
    console.log(item)
}
// Error: Uncaught TypeError: obj is not iterable

上述代码会直接报错 Uncaught TypeError: obj is not iterable

实例

面试过程中经常会碰到手撕代码环节，假设你是参加面试的应聘者，要你实现如下功能：

// 定义一个 Person 对象
const Person = {
  name: 'John',
  age: 30,
  city: 'New York'
};

// 处理，对Person进行改写
// doSomething……

// 使用 for...of 循环遍历 Person 对象
for (const [key, value] of Person) {
  console.log(`${key}: ${value}`);
}

// 输出
// name: John
// age: 30
// city: New York

分析

核心原理：对象{}默认不支持for of遍历，要实现for of遍历关键在于Symbol.iterator。因此要实现上述遍历功能，需要增加一个key属性实现迭代器功能，实现代码如下

// 定义一个 Person 对象
const Person = {
  name: 'John',
  age: 30,
  city: 'New York'
};

// 为 Person 对象添加 Symbol.iterator 方法
Person[Symbol.iterator] = function() {
  const keys = Object.keys(this);
  let index = 0;

  return {
    next: () => {
      if (index < keys.length) {
        const key = keys[index++];
        return { value: [key, this[key]], done: false };
      } else {
        return { done: true };
      }
    }
  };
};

// 使用 for...of 循环遍历 Person 对象
for (const [key, value] of Person) {
  console.log(`${key}: ${value}`);
}

// 输出
// name: John
// age: 30
// city: New York

解释

• Symbol.iterator 方法为 Person 对象添加了迭代功能。它返回了一个包含 next 方法的迭代器对象。
• next 方法返回当前属性名及其对应的值，并将 done 设置为 false，直到迭代结束时，done 被设置为 true。
• for...of 循环遍历每一个键值对，并打印出来。

通过这种方式，你可以成功遍历对象的属性和值，同时利用 for...of 循环。