Bạn biết những cách nào để lặp qua các thuộc tính đối tượng trong Javascript?

Question

Lê Tài · Accepted Answer

Trong JavaScript, có nhiều cách để lặp qua các thuộc tính của một đối tượng. Dưới đây là các cách phổ biến để thực hiện việc này:
1. for...in loop
Cách này cho phép lặp qua các thuộc tính liệt kê được (enumerable properties) của một đối tượng, bao gồm cả các thuộc tính kế thừa từ prototype.
const obj = { name: 'Alice', age: 25, city: 'New York' };
for (let key in obj) {
  console.log(`${key}: ${obj&#x5B;key]}`);
}
2. Object.keys()
Trả về một mảng chứa tất cả các thuộc tính liệt kê được của đối tượng. Sau đó có thể lặp qua mảng này bằng các vòng lặp thông thường như for, forEach.
const obj = { name: 'Alice', age: 25, city: 'New York' };
const keys = Object.keys(obj);
keys.forEach(key => {
  console.log(`${key}: ${obj&#x5B;key]}`);
});
3. Object.values()
Tương tự như Object.keys(), nhưng thay vì trả về các khóa, nó trả về các giá trị của các thuộc tính liệt kê được của đối tượng.
const obj = { name: 'Alice', age: 25, city: 'New York' };
const values = Object.values(obj);
values.forEach(value => {
  console.log(value);
});
4. Object.entries()
Trả về một mảng chứa các cặp [key, value], cho phép bạn lặp qua cả khóa và giá trị của đối tượng một cách dễ dàng.
const obj = { name: 'Alice', age: 25, city: 'New York' };
const entries = Object.entries(obj);
entries.forEach((&#x5B;key, value]) => {
  console.log(`${key}: ${value}`);
});
5. Object.getOwnPropertyNames()
Trả về một mảng chứa tất cả các thuộc tính (bao gồm cả các thuộc tính không liệt kê được) của đối tượng, nhưng không bao gồm các thuộc tính kế thừa.
const obj = { name: 'Alice', age: 25, city: 'New York' };
const propNames = Object.getOwnPropertyNames(obj);
propNames.forEach(prop => {
  console.log(`${prop}: ${obj&#x5B;prop]}`);
});
6. Reflect.ownKeys()
Trả về một mảng chứa tất cả các thuộc tính của đối tượng, bao gồm cả thuộc tính không liệt kê được và các thuộc tính ký hiệu (symbol).
const obj = { name: 'Alice', age: 25, city: 'New York' };
const keys = Reflect.ownKeys(obj);
keys.forEach(key => {
  console.log(`${key}: ${obj&#x5B;key]}`);
});
7. for...of with Object.entries()
Kết hợp for...of với Object.entries() để lặp qua các cặp key và value một cách rõ ràng và dễ hiểu hơn.
const obj = { name: 'Alice', age: 25, city: 'New York' };
for (let &#x5B;key, value] of Object.entries(obj)) {
  console.log(`${key}: ${value}`);
}
Mỗi phương pháp có những ưu điểm riêng và nên sử dụng tùy theo trường hợp cụ thể.