HomeLập trìnhJavaScript如何在 JavaScript 中遍历对象

如何在 JavaScript 中遍历对象



原文: Lặp qua một đối tượng trong JavaScript – Cách lặp qua một đối tượng trong JS,Người viết: Joel Olawanle


译者: Thành Quân.L

在 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); // ❌❌❌
}

Bạn có thể sử dụng JavaScript để phát triển các phiên bản mới của ES6 hay không?

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

Đối với ES6, bạn không nên sử dụng 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 Bạn có thể sử dụng ES6 và ES8 để thay thế ES6 và ES8.

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

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

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

我们有三个对象静态方法,它们是:

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

Sử dụng Object.keys() để sử dụng JavaScript

Object.keys() Người dùng có thể sử dụng ES6 để phát triển ứng dụng của mình.

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"

Đọc thêm  JavaScript Ba dấu bằng VS Dấu bằng kép – Các toán tử so sánh được giải thích bằng các ví dụ

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

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

Sử dụng JavaScript Object.values()

Object.values() 方法与 Object.keys() Người chơi có thể sử dụng ES8 để phát triển bản thân.

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

Sử dụng Object.entries() để sử dụng 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);
} 

Bạn sẽ không bao giờ có một cuộc sống khó khăn như vậy.

总结

在 教程 , 到 循环 最 佳 是 你 你 的 对象 对象 对象 , , , 循环 之前 首先 首先 首先 首先 首先 首先 首先 将 对象 转换 为数 为数。。

祝你编程愉快!



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status