Làm cách nào để lặp qua danh sách các đối tượng trong JavaScript?

Một vấn đề phổ biến mà nhiều lập trình viên gặp phải là lặp qua một tập dữ liệu có thể đếm được. Dữ liệu này có thể ở dạng mảng, danh sách, bản đồ hoặc các đối tượng khác. May mắn thay, các nhà phát triển có sẵn nhiều công cụ áp dụng cho vấn đề chính xác này. Đặc biệt, ngôn ngữ JavaScript cung cấp một loạt các thiết bị lặp lại. Dưới đây là giải thích ngắn gọn về nhiều câu lệnh JavaScript hữu ích và…

vòng lặp for là cách phổ biến nhất để lặp qua bất kỳ lần lặp nào trong JavaScript. Bạn cũng có thể sử dụng vòng lặp này để lặp qua một mảng các đối tượng

Để lặp qua một mảng các đối tượng, hãy sử dụng vòng lặp for và thực hiện vòng lặp trên chiều dài của mảng và truy cập đối tượng tại chỉ mục đó

Ví dụ sau lặp qua một mảng đối tượng và in đối tượng trong bảng điều khiển

Ví dụ

const data = [
  { name: 'John', age: 30, group: 'A' },
  { name: 'Mary', age: 25, group: 'B' },
  { name: 'Mike', age: 20, group: 'A' },
  { name: 'Jane', age: 15, group: 'C' },
  { name: 'Peter', age: 25, group: 'B' }
];

// for loop
for (let i = 0; i < data.length; i++) {
  console.log(data[i]);
}

chạy ở đây

2. Sử dụng vòng lặp forEach loop

Phương thức forEach là một cách lặp mảng hiện đại trong javascript. Vòng lặp forEach thực thi một hàm cho từng phần tử của mảng và cho phép chúng ta truy cập vào phần tử hiện tại cũng như chỉ mục bên trong hàm

Đây là ví dụ sử dụng vòng lặp forEach để lặp qua một mảng đối tượng.

Ví dụ

const data = [
  { name: 'John', age: 30, group: 'A' },
  { name: 'Mary', age: 25, group: 'B' },
  { name: 'Mike', age: 20, group: 'A' },
  { name: 'Jane', age: 15, group: 'C' },
  { name: 'Peter', age: 25, group: 'B' }
];

// forEach loop
data.forEach(function(item, index) {
  console.log(item, index);
});

chạy ở đây

Bạn có thể thấy trong ví dụ trên bạn có thể truy cập trực tiếp vào các phần tử của mảng cũng có thể truy cập vào chỉ mục

3. sử dụng cho. trong vòng lặp

cho. in loop được sử dụng khi bạn cần lặp qua các thuộc tính của một đối tượng. Và vì một mảng cũng là một đối tượng trong javascript, vì vậy bạn có thể sử dụng nó tại đây.

Vòng lặp sẽ cung cấp cho chúng ta một khóa cho từng thuộc tính trong một đối tượng và chúng ta có thể sử dụng khóa này để truy cập giá trị của thuộc tính

Ví dụ

const data = [
  { name: 'John', age: 30, group: 'A' },
  { name: 'Mary', age: 25, group: 'B' },
  { name: 'Mike', age: 20, group: 'A' },
  { name: 'Jane', age: 15, group: 'C' },
  { name: 'Peter', age: 25, group: 'B' }
];

// for...in loop
for (const key in data) {
  console.log(key, data[key]);
}

chạy ở đây

4. sử dụng cho. của vòng lặp

cho. of vòng lặp rất giống với vòng lặp for. trong vòng lặp. Sự khác biệt là đối với. of vòng lặp cung cấp cho chúng tôi quyền truy cập trực tiếp vào giá trị của thuộc tính.

Ví dụ sau sử dụng cho. of để lặp qua một mảng các đối tượng.

Ví dụ

const data = [
  { name: 'John', age: 30, group: 'A' },
  { name: 'Mary', age: 25, group: 'B' },
  { name: 'Mike', age: 20, group: 'A' },
  { name: 'Jane', age: 15, group: 'C' },
  { name: 'Peter', age: 25, group: 'B' }
];

// for...of loop
for (const item of data) {
  console.log(item);
}

chạy ở đây

báo cáo quảng cáo này

5. Sử dụng vòng lặp while

vòng lặp while không phải là lựa chọn nổi tiếng để lặp trong javascript nhưng thật tốt khi biết cách sử dụng nó

Chúng ta có thể lưu trữ độ dài của mảng trong một biến và sử dụng biến này trong điều kiện của vòng lặp while để ngắt vòng lặp

Ngoài ra, hãy tạo một biến count để truy cập các phần tử đối tượng trong mảng.

Ví dụ

const data = [
  { name: 'John', age: 30, group: 'A' },
  { name: 'Mary', age: 25, group: 'B' },
  { name: 'Mike', age: 20, group: 'A' },
  { name: 'Jane', age: 15, group: 'C' },
  { name: 'Peter', age: 25, group: 'B' }
];

// while loop
let len = data.length, count = 0;
while(len--) {
  console.log(data[count]);
  count++;
}

chạy ở đây

Lặp qua mảng và thực hiện thao tác trên các đối tượng

Chúng ta đã thấy 5 cách khác nhau để lặp qua một mảng các đối tượng ở trên. Bây giờ hãy xem cách chúng ta có thể thực hiện các thao tác trên từng đối tượng trong mảng

Thao tác bạn có thể thực hiện trên từng đối tượng có thể là bất kỳ thao tác nào như thêm thuộc tính, sửa đổi hoặc xóa thuộc tính, v.v.

Javascript lặp qua mảng đối tượng có chỉ mục

Việc truy cập chỉ số của phần tử trong mảng rất quan trọng khi chúng ta muốn thực hiện một thao tác trên các phần tử của mảng

Ví dụ sau đây cho thấy cách bạn có thể lọc ra các phần tử mảng và lọc ra những người có tuổi lớn hơn 20

Làm cách nào để lặp qua danh sách các đối tượng trong js?

Làm cách nào để lặp qua đối tượng của các đối tượng trong JavaScript?

Làm cách nào để lặp danh sách các đối tượng trong Java?

Làm cách nào để lặp qua các thuộc tính đối tượng trong JavaScript?