JavaScript forEach – Cách lặp qua một mảng trong JS

Phương thức forEach của JavaScript là một trong nhiều cách để lặp qua các mảng. Mỗi phương pháp có các tính năng khác nhau và tùy thuộc vào bạn, tùy thuộc vào những gì bạn đang làm, để quyết định nên sử dụng phương pháp nào.

Trong bài đăng này, chúng ta sẽ xem xét kỹ hơn về phương thức JavaScript forEach.

Xem xét rằng chúng ta có mảng sau đây:

const numbers = [1, 2, 3, 4, 5];

Sử dụng “vòng lặp for” truyền thống để lặp qua mảng sẽ như thế này:

for (i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
} 

Điều gì làm cho phương thức forEach() trở nên khác biệt?

Phương thức forEach cũng được sử dụng để lặp qua các mảng, nhưng nó sử dụng một hàm khác với “vòng lặp for” cổ điển.

Phương thức forEach chuyển một hàm gọi lại cho từng phần tử của một mảng cùng với các tham số sau:

• Giá trị hiện tại (bắt buộc) – Giá trị của phần tử mảng hiện tại
• Chỉ mục (tùy chọn) – Số chỉ mục của phần tử hiện tại
• Mảng (tùy chọn) – Đối tượng mảng mà phần tử hiện tại thuộc về

Hãy để tôi giải thích từng bước các thông số này.

Đầu tiên, để lặp qua một mảng bằng cách sử dụng phương thức forEach, bạn cần một hàm gọi lại (hoặc hàm ẩn danh):

numbers.forEach(function() {
    // code
});

Hàm sẽ được thực thi cho từng phần tử của mảng. Nó phải nhận ít nhất một tham số đại diện cho các phần tử của một mảng:

numbers.forEach(function(number) {
    console.log(number);
});

Đó là tất cả những gì chúng ta cần làm để lặp qua mảng:

Ngoài ra, bạn có thể sử dụng biểu diễn hàm mũi tên ES6 để đơn giản hóa mã:

numbers.forEach(number => console.log(number));

Thông số tùy chọn

Mục lục

Được rồi, bây giờ hãy tiếp tục với các tham số tùy chọn. Đầu tiên là tham số “chỉ mục”, đại diện cho số chỉ mục của mỗi phần tử.

Về cơ bản, chúng ta có thể thấy số chỉ mục của một phần tử nếu chúng ta đưa nó vào làm tham số thứ hai:

numbers.forEach((number, index) => {
    console.log('Index: ' + index + ' Value: ' + number);
});

Mảng

Tham số mảng là chính mảng đó. Nó cũng là tùy chọn và có thể được sử dụng nếu cần thiết trong các hoạt động khác nhau. Mặt khác, nếu chúng ta gọi nó, nó sẽ chỉ được in nhiều lần bằng số phần tử của mảng:

numbers.forEach((number, index, array) => {
    console.log(array);
});

Bạn có thể xem ví dụ sử dụng phương thức forEach() trong video này:

Hỗ trợ trình duyệt

Phương thức Array.forEach được hỗ trợ trong tất cả các trình duyệt IE phiên bản 8 trở về trước:

Nếu bạn muốn tìm hiểu thêm về Phát triển web, vui lòng truy cập Kênh Youtube của tôi.

Cảm ơn bạn đã đọc!