Trong JavaScript, khi bạn nghe thuật ngữ “vòng lặp”, có lẽ bạn sẽ nghĩ đến việc sử dụng các phương thức vòng lặp khác nhau như for vòng lặp, forEach(), map() và những người khác.
Nhưng thật không may, trong trường hợp của các đối tượng, các phương thức này không hoạt động vì các đối tượng không thể lặp lại được.
Điều này không có nghĩa là chúng ta không thể lặp qua một đối tượng – nhưng điều này có nghĩa là chúng ta không thể lặp trực tiếp qua một đối tượng giống như cách chúng ta thực hiện với một mảng:
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); // ❌❌❌
}
Trong bài viết này, Bạn sẽ tìm hiểu cách có thể lặp qua một đối tượng trong JavaScript. Có hai phương pháp bạn có thể sử dụng – và một trong số đó có trước ngày giới thiệu ES6.
Cách lặp qua một đối tượng trong JavaScript bằng một for…in vòng
Trước ES6, chúng tôi dựa vào for...in method bất cứ khi nào chúng ta muốn lặp qua một đối tượng.
Các for...in vòng lặp lặp qua các thuộc tính trong chuỗi nguyên mẫu. Điều này có nghĩa là chúng ta cần kiểm tra xem thuộc tính có thuộc về đối tượng hay không bằng cách sử dụng hasOwnProperty bất cứ khi nào chúng ta lặp qua một đối tượng với for…in vòng:
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]}`);
}
}
Để tránh căng thẳng và khó lặp lại và sử dụng hasOwnProperty phương thức, ES6 và ES8 đã giới thiệu các phương thức tĩnh đối tượng. Chúng chuyển đổi các thuộc tính đối tượng thành mảng, cho phép chúng ta sử dụng trực tiếp các phương thức mảng.
Cách lặp qua một đối tượng trong JavaScript bằng các phương thức tĩnh đối tượng
Một đối tượng được tạo thành từ các thuộc tính có các cặp khóa-giá trị, tức là mỗi thuộc tính luôn có một giá trị tương ứng.
Các phương thức tĩnh của đối tượng cho phép chúng tôi trích xuất một trong hai keys(), values()hoặc cả khóa và giá trị như entries() trong một mảng, cho phép chúng ta có nhiều sự linh hoạt đối với chúng như chúng ta làm với các mảng thực tế.
Chúng tôi có ba phương thức tĩnh đối tượng, đó là:
Object.keys()Object.values()Object.entries()
Cách lặp qua một đối tượng trong JavaScript với Object.keys() phương pháp
Các Object.keys() phương pháp đã được giới thiệu trong ES6. Nó lấy đối tượng mà chúng ta muốn lặp lại làm đối số và trả về một mảng chứa tất cả các tên thuộc tính (còn được gọi là khóa).
const population = {
male: 4,
female: 93,
others: 10
};
let genders = Object.keys(population);
console.log(genders); // ["male","female","others"]
Điều này bây giờ mang lại cho chúng ta lợi thế khi áp dụng bất kỳ phương thức lặp mảng nào để lặp qua mảng và truy xuất giá trị của từng thuộc tính:
let genders = Object.keys(population);
genders.forEach((gender) => console.log(gender));
Điều này sẽ trở lại:
"male"
"female"
"others"
Chúng ta cũng có thể sử dụng khóa để lấy giá trị bằng cách sử dụng ký hiệu ngoặc đơn, chẳng hạn như population[gender] như được thấy dưới đây:
genders.forEach((gender) => {
console.log(`There are ${population[gender]} ${gender}`);
})
Điều này sẽ trở lại:
"There are 4 male"
"There are 93 female"
"There are 10 others"
Trước khi tiếp tục, hãy sử dụng phương pháp này để tính tổng tất cả dân số bằng cách lặp qua để biết tổng dân số:
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
Cách lặp qua một đối tượng trong JavaScript với Object.values() phương pháp
Các Object.values() phương pháp rất giống với Object.keys() và đã được giới thiệu trong ES8. Phương thức này lấy Đối tượng mà chúng ta muốn lặp lại làm đối số và trả về một mảng chứa tất cả các giá trị khóa.
const population = {
male: 4,
female: 93,
others: 10
};
let numbers = Object.values(population);
console.log(numbers); // [4,93,10]
Điều này bây giờ mang lại cho chúng ta lợi thế của việc áp dụng bất kỳ phương thức lặp mảng nào để lặp qua mảng và truy xuất value của từng tài sản:
let numbers = Object.values(population);
numbers.forEach((number) => console.log(number));
Điều này sẽ trở lại:
4
93
10
Chúng ta có thể thực hiện phép tính tổng một cách hiệu quả vì chúng ta có thể lặp trực tiếp:
let totalPopulation = 0;
let numbers = Object.values(population);
numbers.forEach((number) => {
totalPopulation += number;
});
console.log(totalPopulation); // 107
Cách lặp qua một đối tượng trong JavaScript bằng phương thức Object.entries()
Các Object.entries() phương pháp này cũng được giới thiệu với ES8. Theo nghĩa cơ bản, những gì nó làm là xuất ra một mảng các mảng, theo đó mỗi mảng bên trong có hai phần tử là thuộc tính và giá trị.
const population = {
male: 4,
female: 93,
others: 10
};
let populationArr = Object.entries(population);
console.log(populationArr);
Kết quả đầu ra này:
[
['male', 4]
['female', 93]
['others', 10]
]
Điều này trả về một mảng các mảng, với mỗi mảng bên trong có [key, value]. Bạn có thể sử dụng bất kỳ phương thức mảng nào để lặp qua:
for (array of populationArr){
console.log(array);
}
// Output:
// ['male', 4]
// ['female', 93]
// ['others', 10]
Chúng tôi có thể quyết định hủy cấu trúc mảng, vì vậy chúng tôi nhận được key và giá trị:
for ([key, value] of populationArr){
console.log(key);
}
Bạn có thể tìm hiểu thêm về cách lặp qua các mảng trong bài viết này.
kết thúc
Trong hướng dẫn này, bạn đã học được rằng cách tốt nhất để lặp qua một đối tượng là sử dụng bất kỳ phương thức tĩnh nào của đối tượng dựa trên nhu cầu của bạn để chuyển đổi thành một mảng trước khi lặp.
Hãy mã hóa vui vẻ!
