[转]如何在 JavaScript 中遍历对象

原文地址:如何在 JavaScript 中遍历对象

在 JavaScript 中，当你听到“循环”一词时，你可能会想到使用各种循环方法，例如 for 循环、forEach() 方法、map() 方法等等。

但不幸的是，这些方法对于对象不起作用，因为对象是不可迭代的。

这并不意味着我们不能循环遍历一个对象——只是我们不能像遍历数组一样直接遍历一个对象：

let arr = [24, 33, 77];
arr.forEach((val) => console.log(val)); // ✅✅✅

for (val of arr) {
  console.log(val); // ✅✅✅
}

let obj = { age: 12, name: "John Doe" };
obj.forEach((val) => console.log(val)); // ❌❌❌

for (val of obj) {
  console.log(val); // ❌❌❌
}

在本文中，你将了解如何在 JavaScript 中循环访问对象。你可以使用两种方法——其中一种早于 ES6 的引入。

如何使用 for...in 循环在 JavaScript 中循环对象

在 ES6 之前，每当我们想要循环一个对象时，我们都依赖于 for...in 方法。

for...in 循环遍历原型链中的属性。这意味着每当我们使用 for...in 循环遍历一个对象时，我们都需要使用 hasOwnProperty 检查该属性是否属于该对象：

const population = {
  male: 4,
  female: 93,
  others: 10
};

// Iterate through the object
for (const key in population) {
  if (population.hasOwnProperty(key)) {
    console.log(`${key}: ${population[key]}`);
  }
}

为了避免循环的压力和困难以及使用 hasOwnProperty 方法，ES6 和 ES8 引入了对象静态方法。这些方法将对象属性转换为数组，允许我们直接使用数组方法。

如何使用对象静态方法在 JavaScript 中循环对象

对象由具有键值对的属性组成，即每个属性始终具有对应的值。

对象静态方法让我们可以将 keys()、values() 或两者都提取为数组中的 entries()（条目），从而使我们对它们具有与处理实际数组一样多的灵活性。

我们有三个对象静态方法，它们是：

• Object.keys()
• Object.values()
• Object.entries()

如何使用 Object.keys() 方法在 JavaScript 中循环对象

Object.keys() 方法是在 ES6 中引入的。它将我们想要循环的对象作为参数，并返回一个包含所有属性名称（也称为键）的数组。

const population = {
  male: 4,
  female: 93,
  others: 10
};

let genders = Object.keys(population);

console.log(genders); // ["male","female","others"]

现在，这为我们提供了应用任何数组循环方法来遍历数组并检索每个属性的值的优势：

let genders = Object.keys(population);

genders.forEach((gender) => console.log(gender));

这将返回：

"male"
"female"
"others"

我们还可以使用键来通过括号表示法获取值，例如 population[gender]，如下所示：

genders.forEach((gender) => {
  console.log(`There are ${population[gender]} ${gender}`);
})

这将返回：

"There are 4 male"
"There are 93 female"
"There are 10 others"

在继续之前，让我们使用这种方法通过循环对所有人口求和，这样我们就知道总人口：

const population = {
  male: 4,
  female: 93,
  others: 10
};

let totalPopulation = 0;
let genders = Object.keys(population);

genders.forEach((gender) => {
  totalPopulation += population[gender];
});

console.log(totalPopulation); // 107

如何使用 Object.values() 方法在 JavaScript 中循环对象

Object.values() 方法与 Object.keys() 方法非常相似，是在 ES8 中引入的。该方法将我们想要循环的对象作为参数，并返回一个包含所有键值的数组。

const population = {
  male: 4,
  female: 93,
  others: 10
};

let numbers = Object.values(population);

console.log(numbers); // [4,93,10]

现在，这为我们提供了应用任何数组循环方法来遍历数组并检索每个属性的值的优势：

let numbers = Object.values(population);

numbers.forEach((number) => console.log(number));

这将返回：

4
93
10

我们可以有效地执行汇总加法，因为我们可以直接循环：

let totalPopulation = 0;
let numbers = Object.values(population);

numbers.forEach((number) => {
  totalPopulation += number;
});

console.log(totalPopulation); // 107

如何使用 Object.entries() 方法在 JavaScript 中循环对象

ES8 也引入了 Object.entries() 方法。从基本意义上讲，它的作用是输出一个数组的数组，其中每个内部数组都有两个元素，即属性和值。

const population = {
  male: 4,
  female: 93,
  others: 10
};

let populationArr = Object.entries(population);

console.log(populationArr);

这将输出：

[
  ['male', 4]
  ['female', 93]
  ['others', 10]
]

这将返回一个数组的数组，每个内部数组都有 [key, value]。你可以使用任何数组方法来循环：

for (array of populationArr){
  console.log(array);
}

// Output:
// ['male', 4]
// ['female', 93]
// ['others', 10]

我们可以决定解构数组，所以我们得到键和值：

for ([key, value] of populationArr){
  console.log(key);
} 

你可以在本文中了解有关如何循环数组的更多信息。

总结

在本教程中，你了解到循环对象的最佳方法是根据你的需要使用对象静态方法，在循环之前首先将对象转换为数组。