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

Phương thức JavaScript forEach 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 việc bạn đang làm, quyết định 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 phương thức JavaScript forEach.

Xét rằng chúng ta có mảng sau:

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 () 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 mỗi 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 các thông số này từng bước.

Đầ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 mọi phần tử của mảng. Nó phải có í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));

Các 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 thông số tùy chọn. Tham số đầu tiên là tham số "index", đạ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 bao gồm nó dưới dạng 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. Ngược lại, 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 cách sử dụng ví dụ của 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 có IE phiên bản 8 trở xuống:

Nếu bạn muốn tìm hiểu thêm về Phát triển Web, hãy truy cập Kênh Youtube của tôi.

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