Khi nào nên sử dụng forEach trong JavaScript?

Xuất thân từ nền tảng PHP, khi lần đầu tiên tôi nhìn thấy mọi người sử dụng phương pháp .forEach[] để duyệt qua các mảng của họ, bản thân người mới bắt đầu của tôi không nghĩ gì về điều đó - đó là cách triển khai chính xác giống như vòng lặp for tiêu chuẩn, tôi tự nhủ. Sau khi viết một số mã JavaScript, tôi nhanh chóng nhận ra rằng cả hai đều có sự khác biệt

Trong bài viết này, tôi muốn phác thảo sự khác biệt đằng sau vòng lặp for tiêu chuẩn và phương thức .forEach[] cũng như nhận xét về một số lợi ích mà mỗi phương thức mang lại cho bảng.

Như một tuyên bố từ chối trách nhiệm, vui lòng không lấy tiêu đề theo nghĩa đen. Mục tiêu của tôi với bài báo là thông báo cho người đọc về các nút thắt cổ chai và cung cấp thông tin chi tiết về thời điểm bạn có thể hoặc không muốn sử dụng .forEach[] - không có gì khác. Bắt đầu nào

Cách forEach hoạt động

Phương thức

let fruits = ['apples', 'oranges', 'bananas'];

fruits.forEach[function [item, index] {
  console.log[item, index]
}]

1 chấp nhận hàm gọi lại làm đầu vào và đối với mỗi phần tử trong mảng mà bạn đang lặp lại, hàm gọi lại này sẽ được thực thi. Cần lưu ý rằng có một vài đối số tùy chọn mà chức năng gọi lại của bạn có thể chấp nhận. Chúng bao gồm giá trị hiện tại được chuyển đến hàm của bạn, chỉ mục tương ứng của giá trị hiện tại. Hàm

let fruits = ['apples', 'oranges', 'bananas'];

fruits.forEach[function [item, index] {
  console.log[item, index]
}]

1 cũng cung cấp một đối số tùy chọn để xác định

let fruits = ['apples', 'oranges', 'bananas'];

fruits.forEach[function [item, index] {
  console.log[item, index]
}]

3 trong hàm gọi lại của bạn

Hãy xem xét những điều sau đây

Đầu ra tương ứng sẽ là

corgis - 0
are - 1
cool - 2

ngắn mạch

Nếu bạn không biết đoản mạch là gì, nó đề cập đến việc chúng ta kết thúc sớm và/hoặc bỏ qua một lần lặp của một vòng lặp. Khi chúng tôi đang sử dụng

let fruits = ['apples', 'oranges', 'bananas'];

fruits.forEach[function [item, index] {
  console.log[item, index]
}]

4, không có cách nào để tận dụng đoản mạch, mà trong mọi trường hợp của vòng lặp của chúng tôi, chúng tôi sẽ chịu đựng một thời gian chạy tuyến tính đối với kích thước của mảng của chúng tôi

Tại sao tôi nên quan tâm đến điều này? . Giả sử chúng ta thực sự may mắn và tìm thấy phần tử này trong lần lặp đầu tiên của vòng lặp. Trên thực tế, chúng tôi muốn quay lại sớm vì chúng tôi đã tìm thấy những gì chúng tôi đang tìm kiếm, nhưng cách triển khai

let fruits = ['apples', 'oranges', 'bananas'];

fruits.forEach[function [item, index] {
  console.log[item, index]
}]

4, chúng tôi sẽ luôn chạy qua các yếu tố còn lại. Chúng tôi có thể sẽ sử dụng phương pháp .forEach[]1 cho loại vấn đề này

Hiệu suất

Trong phương thức

let fruits = ['apples', 'oranges', 'bananas'];

fruits.forEach[function [item, index] {
  console.log[item, index]
}]

4, vì chúng ta đang gọi một hàm gọi lại ở mỗi lần lặp lại, nên chúng ta đang tạo thêm một chi phí phạm vi dẫn đến tốc độ chậm hơn so với vòng lặp for gốc. Khi so sánh với vòng lặp for truyền thống, chúng ta có một câu lệnh khởi tạo, một điều kiện được đánh giá ở mỗi lần lặp và một giai đoạn thực thi sau khi phần thân của vòng lặp được tăng dần. So với phương thức

let fruits = ['apples', 'oranges', 'bananas'];

fruits.forEach[function [item, index] {
  console.log[item, index]
}]

4, trong đó chúng ta phải tạo các lệnh gọi hàm bổ sung ở mỗi lần lặp, thì chi phí thấp hơn

Để kiểm tra hiệu suất, tôi đã tạo tập lệnh hẹn giờ theo dõi thời gian thực hiện sau khi khởi tạo một mảng. Cả hai vòng lặp đang thực hiện thao tác O[1] đơn giản trong phần thân của chúng

khả năng đọc

Khi phát triển phần mềm, ưu tiên hàng đầu là tạo mã có thể bảo trì và dễ đọc. Tôi tin rằng một đối số rất hợp lệ để tiếp tục sử dụng

let fruits = ['apples', 'oranges', 'bananas'];

fruits.forEach[function [item, index] {
  console.log[item, index]
}]

4 trong mã của bạn là vì mục đích dễ đọc. Với việc xâu chuỗi phương thức gần như trở thành bản chất thứ hai đối với các mảng trong JavaScript, sẽ tốt hơn nếu chạy qua một mảng bằng cách sử dụng vòng lặp

let fruits = ['apples', 'oranges', 'bananas'];

fruits.forEach[function [item, index] {
  console.log[item, index]
}]

4 thay vì vòng lặp for

Cũng cần lưu ý rằng các trường hợp kích thước đầu vào của bạn cực kỳ lớn, như trong ví dụ trên, có xu hướng khó xảy ra. Ở kích thước đầu vào hợp lý, hai vòng lặp đang hoạt động tương đối giống nhau. Bạn có muốn có một chức năng hoạt động nhanh hơn vài mili giây với chi phí dễ đọc không?

Phần kết luận

Các phương thức đã được phát hành cùng với các phiên bản ECMAScript mới nhất đã nâng tầm cho toàn bộ JavaScript. Tôi là người tin tưởng hàng đầu vào việc sử dụng đúng công cụ cho công việc. Nếu bạn cần đọc qua một số lượng lớn các phần tử trong một mảng, thì có thể một vòng lặp for riêng có thể là giải pháp cho vấn đề của bạn. Mặt khác, tôi không thấy vấn đề gì ngoài việc giảm nhẹ hiệu suất khi sử dụng .forEach[] hoặc bất kỳ phương thức mảng ES nào được phát hành sau này. Sự đánh đổi giữa khả năng đọc và hiệu suất là điều tôi sẽ ủng hộ trong hầu hết các tình huống

Đối với nhiều nhà phát triển, JavaScript đóng vai trò giới thiệu về mô hình lập trình chức năng. Và nếu bạn chưa bao giờ gặp các chức năng gọi lại trước đây, JavaScript cho mỗi chức năng có thể trông hơi buồn cười

Trong bài viết nhanh này, chúng ta sẽ xem cách lặp qua một mảng dữ liệu bằng hàm forEach của JavaScript. Chúng ta sẽ xem xét các cách khác nhau để gọi nó và thảo luận khi nào nên sử dụng nó so với. vòng lặp for truyền thống

Sử dụng JavaScript cho từng chức năng

Trong JavaScript, đối tượng mảng chứa phương thức

let fruits = ['apples', 'oranges', 'bananas'];

fruits.forEach[function [item, index] {
  console.log[item, index]
}]

1. Điều này có nghĩa là trên bất kỳ mảng nào, chúng ta có thể gọi

let fruits = ['apples', 'oranges', 'bananas'];

fruits.forEach[function [item, index] {
  console.log[item, index]
}]

1 như vậy

let fruits = ['apples', 'oranges', 'bananas'];

fruits.forEach[function [item, index] {
  console.log[item, index]
}]

Điều này sẽ in ra như sau

Hãy giải thích cách thức hoạt động của nó

1. Chúng tôi chuyển một hàm ẩn danh cho phương thức

   let fruits = ['apples', 'oranges', 'bananas'];
   
   fruits.forEach[function [item, index] {
     console.log[item, index]
   }]

   1
2. Trong hàm ẩn danh đó, chúng tôi bao gồm các tham số để có quyền truy cập vào

   arr.forEach[[item, index] => console.log[item, index]]

   9 hiện tại và số

   let fruits = ['apples', 'oranges', 'bananas'];
   
   function printPretty [item, index] {
     console.log[`${index} - ${item}`]
   }
   
   fruits.forEach[printPretty];

   0 trong mảng mà mục đó đại diện

Hàm chúng tôi cung cấp cho hàm

let fruits = ['apples', 'oranges', 'bananas'];

fruits.forEach[function [item, index] {
  console.log[item, index]
}]

1 có ba tham số [hai trong số đó là tùy chọn]

• [Bắt buộc] Phần tử hiện tại - Đại diện cho phần tử hiện tại
• [Tùy chọn] Chỉ mục - Trả về chỉ mục hiện tại
• [Tùy chọn] Mảng - Trả về toàn bộ mảng cho mỗi vòng lặp

cách khác để gọi nó

lựa chọn 1. Chức năng ẩn danh

Cách đầu tiên để gọi chức năng này là sử dụng chức năng ẩn danh. Đây là những gì chúng ta vừa thấy

Lựa chọn 2. Sử dụng chức năng mũi tên

Tùy chọn thứ hai là sử dụng chức năng mũi tên

arr.forEach[[item, index] => console.log[item, index]]

Thử thứ này đi. Nó cho phép bạn viết vòng lặp trên một dòng

Tùy chọn 3. Một chức năng gọi lại

Tùy chọn cuối cùng là sử dụng hàm gọi lại, đây thực sự chỉ là một hàm được xác định riêng mà chúng ta chuyển vào làm đối số cho hàm

let fruits = ['apples', 'oranges', 'bananas'];

fruits.forEach[function [item, index] {
  console.log[item, index]
}]

1

let fruits = ['apples', 'oranges', 'bananas'];

function printPretty [item, index] {
  console.log[`${index} - ${item}`]
}

fruits.forEach[printPretty];

Điều này sẽ in ra như sau

0 - apples
1 - oranges
2 - bananas

Khi nào nên sử dụng vòng lặp for vs. vòng lặp for

Hầu hết chúng ta lần đầu tiên tìm hiểu về các vòng lặp theo cách truyền thống - bạn biết đấy, các vòng lặp có bộ đếm tăng dần?

let fruits = ['apples', 'oranges', 'bananas'];

for [let index = 0; i < fruits.length; i++] {
  console.log[fruits[i]];
}

Sự thật là bạn có thể sử dụng vòng lặp for truyền thống hoặc vòng lặp

let fruits = ['apples', 'oranges', 'bananas'];

fruits.forEach[function [item, index] {
  console.log[item, index]
}]

1. Nó không quan trọng

Tuy nhiên, việc sử dụng các vòng lặp

let fruits = ['apples', 'oranges', 'bananas'];

fruits.forEach[function [item, index] {
  console.log[item, index]
}]

1 dẫn đến mã có vẻ khai báo và dễ đọc hơn rất nhiều, đặc biệt nếu bạn đang xử lý các vòng lặp lồng nhau [điều mà tôi cố gắng tránh ngay từ đầu]

Khi nào chúng ta nên sử dụng forEach trong JavaScript?

Sử dụng forEach hay for trong JavaScript tốt hơn?

forEach có thể được sử dụng để làm gì?

Khi nào bạn có thể sử dụng vòng lặp forEach?