如何迭代 JavaScript 中的对象

假设您有一个简单的 JavaScript 对象：

const obj = {
  name: Luke Skywalker,
  title: Jedi Knight,
  age: 23
};

你如何遍历键/值对并打印出 name: Luke Skywalker、title: Jedi Knight 和 age: 23？在现代 JavaScript 中有很多方法可以做到这一点。 这里有3种不同的方式：

使用 Object.entries()

Object.entries() 函数返回一个包含对象的键/值对的 arrau。 这是您如何使用打印出键/值对的方法 Object.entries() 和一个 for/of 循环 。

const obj = {
  name: Luke Skywalker,
  title: Jedi Knight,
  age: 23
};

// Prints out:
// name: Luke Skywalker
// title: Jedi Knight
// age: 23
for (const [key, value] of Object.entries(obj)) {
  console.log(`${key}: ${value}`);
}

在 JavaScript 中，一个 条目 是一个恰好有 2 个元素的数组，其中第一个元素是 key 第二个元素是 value，入口模式出现在 JavaScript 的 Map 构造函数 和 Object.fromEntries()。

如果将迭代器转换为 Object.entries() 使用返回到数组中 Array.from()，您将获得一个包含对象的键/值对的数组。

const obj = {
  name: Luke Skywalker,
  title: Jedi Knight,
  age: 23
};

const keyValuePairs = Object.entries(obj);
keyValuePairs[0]; // [name, Luke Skywalker]
keyValuePairs[1]; // [title, Jedi Knight]
keyValuePairs[2]; // [age, 23]

使用 Object.keys()

Object.keys() 函数返回对象键的数组，而不是键和值。 然后您可以使用方括号 [] 获取对象的值。

const obj = {
  name: Luke Skywalker,
  title: Jedi Knight,
  age: 23
};

// Prints out:
// name: Luke Skywalker
// title: Jedi Knight
// age: 23
for (const key of Object.keys(obj)) {
  console.log(`${key}: ${obj[key]}`);
}

为什么使用 Object.keys() 相对 Object.entries()？因为您无法更改条目中的值来更改对象中的值。

const obj = {
  name: Luke Skywalker,
  title: Jedi Knight,
  age: 23
};

// Assigning to `value` does **not** change the property
// value! You need to do `obj[key] = newValue`
for (let [key, value] of Object.entries(obj)) {
  if (key === title) {
    value = Jedi Master;
  }
}
obj.title; // Jedi Knight

// Works!
for (const key of Object.keys(obj)) {
  if (key === title) {
    obj[key] = Jedi Master;
  }
}

for/in

Object.keys() 和 Object.entries() 函数只循环 对象自己的属性。对于 POJO ，这种区别并不重要。 但是当您使用 Promise ，这种区别可能很重要。用一个 for/in 循环允许您遍历对象的所有键，包括继承的键。

function JediKnight(name, age) {
  this.name = name;
  this.age = age;
}
// `title` is an inherited property for instances of the
// `Jedi Knight` class.
JediKnight.prototype.title = Jedi Knight;

const obj = new JediKnight(Luke Skywalker, 23);

// `entries` will **not** include the `title` property
const entries = Object.entries(obj);
entries; // [[name, Luke Skywalker], [age, 23]]

// Includes `title`, because `for/in` also loops over
// inheritted properties.
// name: Luke Skywalker
// age: 23
// title: Jedi Knight
for (const key in obj) {
  console.log(`${key}: ${obj[key]}`);
}

一般来说，你应该使用 Object.keys() 或者 Object.entries() 使用 POJO 以避免意外拾取继承的属性。但是你可以使用 for/in 如果您确定要遍历继承的属性。