Cách lặp các thuộc tính của Object trong JavaScript

Trong bài viết này, cùng mình sẽ xem xét cách Cách lặp các thuộc tính của Object trong JavaScript.

Đôi khi, bạn muốn lặp qua một đối tượng mảng liên kết JavaScript trong mã JavaScript của tôi.

Object (đối tượng) trong JavaScript

Các kiểu đơn giản nhất trong JavaScript là kiểu số (numbers), kiểu chuỗi (strings), kiểu luận lý (booleans: gồm hai giá trị true, false), null và undefined. Chúng có thể là các objects nhưng immutable (không thay đổi khi được tạo ra). Ngoài những kiểu đơn giản đó, mọi thứ trong JavaScript đều là objects và có thể thay đổi (mutable): mảng, hàm, biểu thức thường quy (regular expression),…

Objects chứa các thuộc tính (properties), đó là cặp tên (name) và giá trị (value). Tên thuộc tính là một chuỗi (có thể là rỗng), giá trị thuộc tính có thể là bất kì giá trị nào trong JavaScript trừ undefined. Objects có ích trong việc lưu trữ và tổ chức dữ liệu, đồng thời mỗi object có thể chứa bên trong nó các objects khác nên nó có thể được tổ chức theo cây hay đồ thị. Các objects có thể được thừa kế cho nhau.

Sử dụng vòng lặp for-in trong JavaScript

Một cách để lặp qua một đối tượng mảng liên kết JavaScript với vòng lặp for-in.

Ví dụ, bạn có thể viết như sau:

const obj = {
  a: 1,
  b: 2,
  c: 3
}
for (const key in obj) {
  const value = obj[key];
  console.log(key, value);
}Code language: JavaScript (javascript)

Tôi tạo một đối tượng obj với một số cặp khóa-giá trị.

Sau đó, tôi lặp qua các khóa đối tượng bằng vòng lặp for-in.

Tôi nhận được giá trị thuộc tính với obj[key] trong phần thân của vòng lặp.

Do đó, từ nhật ký bảng điều khiển, mình nhận thấy kết quả dưới đây:

a 1
b 2
c 3

Sử dụng Object.entries với Phương thức forEach

Bạn có thể sử dụng phương thức Object.entries để trả về một mảng các mảng cặp khóa-giá trị.

Sau đó, bạn có thể sử dụng phương thức forEach để lặp qua các mảng khác nhau.

Ví dụ, bạn có thể viết như sau:

const obj = {
  a: 1,
  b: 2,
  c: 3
}
Object.entries(obj).forEach(([key, value]) => console.log(key, value));Code language: JavaScript (javascript)

Tôi gọi forEach với một cuộc gọi lại với một mảng với key và value bị hủy từ nó.

Sau đó, trong phần nội dung gọi lại, tôi ghi nhật ký key và value.

Do đó, tôi nhận được kết quả tương tự như trước đây.

Sử dụng vòng lặp for-of

Một cách khác để lặp qua các cặp khóa-giá trị là sử dụng vòng lặp for-of.

Ví dụ, bạn có thể viết như sau:

const obj = { 
  a: 1, 
  b: 2, 
  c: 3 
}for (const [key, value] of Object.entries (obj)) { 
  console.log (key, value) 
}Code language: JavaScript (javascript)

Tôi sử dụng Object.entries để trả về một mảng các mảng cặp khóa-giá trị.

Và tôi hủy cấu trúc khóa và giá trị từ các mảng khóa-giá trị đã bị hủy.

Và tôi ghi nhật ký key và value từ nhật ký giao diện điều khiển như trên.

Kết luận

Vậy nên bạn có thể sử dụng để lặp qua cặp khóa-giá trị của một đối tượng Obj kết hợp với JavaScript.

Cảm ơn bạn đã theo dõi bài viết!

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.

---

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU

KHOÁ HỌC BOOTCAMP JAVA/JAVASCRIPT/PHP TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG