在 JavaScript 对象上循环

在 JavaScript 中，对象是一种常见的数据类型。对象是由属性和方法组成的键值对的集合。在许多情况下，我们需要遍历 JavaScript 对象中的每个键值对以获取所需的信息。在本文中，我们将探讨如何在 JavaScript 对象上循环。

1. 使用 for...in 循环

在 JavaScript 中，可以使用 for...in 循环遍历一个对象。for...in 循环会遍历对象中的所有可枚举属性，包括从原型继承的属性。以下是一个使用 for...in 循环遍历对象的示例代码：

const obj = {a: 1, b: 2, c: 3};

for (let key in obj) {
  console.log(`${key}: ${obj[key]}`);
}

上述代码会输出以下内容：

a: 1
b: 2
c: 3

在上述代码中，我们使用 for...in 循环遍历对象 obj 中的属性。对象的属性可以使用中括号符号或点符号进行访问。在循环的每个迭代中，我们将每个属性的键和值打印到控制台中。

需要注意的是，我们应该始终使用 hasOwnProperty 方法来检查对象是否真正拥有这个属性，以避免遍历原型链上的属性。因此，我们可以改进上面的示例代码：

const obj = {a: 1, b: 2, c: 3};

for (let key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(`${key}: ${obj[key]}`);
  }
}

上述代码会输出与之前相同的结果。

2. 使用 Object.keys() 方法

除了使用 for...in 循环外，我们还可以使用 Object.keys() 方法获取对象的属性键，并使用 forEach() 或 map() 方法遍历键值对。以下是使用 Object.keys() 方法遍历对象的示例代码：

const obj = {a: 1, b: 2, c: 3};

Object.keys(obj).forEach(key => {
  console.log(`${key}: ${obj[key]}`);
});

上述代码会输出以下内容：

a: 1
b: 2
c: 3

在上述代码中，我们使用 Object.keys() 方法获取对象 obj 的属性键，然后使用 forEach() 方法遍历每个属性。在每个迭代中，我们将每个属性的键和值打印到控制台中。

我们还可以使用 map() 方法将属性映射到新数组中：

const obj = {a: 1, b: 2, c: 3};

const entries = Object.keys(obj).map(key => [key, obj[key]]);

console.log(entries);

上述代码会输出以下内容：

[ [ 'a', 1 ], [ 'b', 2 ], [ 'c', 3 ] ]

在上述代码中，我们使用 Object.keys() 方法获取对象 obj 的属性键，然后使用 map() 方法将每个属性映射到一个包含键和值的新数组中。

3. 使用 Object.entries() 方法

在 ECMAScript 2017 中，引入了 Object.entries() 方法，该方法返回一个包含对象所有可枚举属性的键值对数组。以下是使用 Object.entries() 方法遍历对象的示例代码：

const obj = {a: 1, b: 2, c: 3};

for (let [key, value] of Object.entries(obj)) {
  console.log(`${key}: ${value}`);
}

上述代码会输出以下内容：

a: 1
b: 2
c: 3

在上述代码中，我们使用 Object.entries() 方法获取对象 obj 的所有可枚举属性的键值对数组。然后，我们使用 for...of 循环遍历数组，并在每个迭代中将键和值打印到控制台中。

需要注意的是，如果需要支持旧版本的浏览器，则需要使用 polyfill 或其他库提供的 Object.entries() 的实现。

结论

在 JavaScript 中，我们可以使用多种方式遍历一个对象。使用 for...in 循环是最基本且最常见的方法。使用 Object.keys()、Object.values() 或 Object.entries() 方法也是不错的选择，它们提供了更多操作对象的选项。需要根据具体情况选择哪种方式更适合。