Cách lặp qua các đối tượng trong JavaScript

Thỉnh thoảng, bạn có thể cần lặp qua các đối tượng trong JavaScript. Cách duy nhất để làm như vậy trước ES6 là với một for...in vòng.

Vấn đề với một for...in vòng lặp là nó lặp qua các thuộc tính trong chuỗi Nguyên mẫu. Khi bạn lặp qua một đối tượng với for...in vòng lặp, bạn cần kiểm tra xem thuộc tính có thuộc đối tượng không. Bạn có thể làm điều này với hasOwnProperty.

for (var property in object) {  if (object.hasOwnProperty(property)) {    // Do things here  }}

Chúng ta không còn phải dựa vào for...in và hasOwnProperty hiện nay. Có một cách tốt hơn.

Một cách tốt hơn để lặp qua các đối tượng

Cách tốt hơn để lặp qua các đối tượng là đầu tiên để chuyển đổi đối tượng thành một mảng. Sau đó, bạn lặp qua mảng.

Bạn có thể chuyển đổi một đối tượng thành một mảng bằng ba phương thức:

1. Object.keys
2. Object.values
3. Object.entries

Object.keys

Object.keys tạo một mảng chứa các thuộc tính của một đối tượng. Đây là một ví dụ.

const fruits = { apple: 28, orange: 17, pear: 54 };
const keys = Object.keys(fruits);

console.log(keys); // ["apple", "orange", "pear"]

Object.values

Object.values tạo một mảng chứa các giá trị của mọi thuộc tính trong một đối tượng. Đây là một ví dụ:

const fruits = { apple: 28, orange: 17, pear: 54 };
const values = Object.values(fruits);

console.log(values); // [28, 17, 54]

Object.entries

Object.entries tạo ra một mảng các mảng. Mỗi mảng bên trong có hai mục. Mục đầu tiên là tài sản; mục thứ hai là giá trị.

Đây là một ví dụ:

const fruits = { apple: 28, orange: 17, pear: 54 };
const entries = Object.entries(fruits);

console.log(entries); // [["apple", 28], ["orange", 17], ["pear", 54]]

Yêu thích của tôi trong ba là Object.entriesbởi vì bạn nhận được cả giá trị khóa và thuộc tính.

Vòng qua mảng

Khi bạn đã chuyển đổi đối tượng thành một mảng với Object.keys, Object.valueshoặc Object.entriesbạn có thể lặp qua nó như thể nó là một mảng bình thường.

const fruits = { apple: 28, orange: 17, pear: 54 };
// Looping through arrays created from Object.keys
const keys = Object.keys(fruits);

for (const key of keys) {  
  console.log(keys);
}

// ["apple", "orange", "pear"]
// ["apple", "orange", "pear"]
// ["apple", "orange", "pear"]

Nếu bạn dùng Object.entriesbạn có thể muốn hủy cấu trúc mảng thành khóa và thuộc tính của nó.

const fruits = { apple: 28, orange: 17, pear: 54 };
const entries = Object.entries(fruits);

for (const [fruit, count] of entries) {
  console.log(`There are ${count} ${fruit}s`);
}

// "There are 28 apples"
// "There are 17 oranges"
// "There are 54 pears"

kết thúc

Cách tốt hơn để lặp qua các đối tượng trước tiên là chuyển đổi nó thành một mảng bằng một trong ba phương thức này.

1. Object.keys
2. Object.values
3. Object.entries

Sau đó, bạn lặp qua các kết quả giống như một mảng bình thường.

Nếu bài học này giúp ích cho bạn, bạn có thể tận hưởng Tìm hiểu JavaScript, nơi bạn sẽ học cách xây dựng bất cứ thứ gì bạn muốn từ đầu. Đăng ký Học JavaScript sẽ mở vào tháng 7 năm 2018 (rất sớm!).

Cảm ơn vì đã đọc. Bài viết này có giúp ích gì cho bạn không? Nếu tôi đã làm, Tôi hy vọng bạn xem xét chia sẻ nó; bạn chỉ có thể giúp ai đó cũng cảm thấy như bạn trước khi đọc bài báo. Cảm ơn bạn.

Bài viết này ban đầu được đăng tại blog của tôi. Đăng ký nhận bản tin của tôi nếu bạn muốn có nhiều bài viết hơn để giúp bạn trở thành nhà phát triển giao diện người dùng tốt hơn.