
Note :Bức ảnh bên trên thể hiện rất rõ ràng về chủ đề JavaScript forEach là cái quái gì? – Complete JavaScript, nội dung bài viết vẫn đang tiếp tục được các phóng viên cập nhật . Hãy quay lại trang web hàng ngày để đón đọc nhé !!!
Trong JavaScript, để duyệt array thì forEach là một hàm rất hay. Vậy hàm forEach trong JavaScript cụ thể là như thế nào? Cách sử dụng forEach JavaScript ra sao? Mình hãy cùng tìm hiểu để làm chủ forEach js nhé!
Cho một mảng numbers= [1, 2, 3, 4, 5, 6,7, 8, 9, 10]. Hãy tính tổng các số trong mảng và hiển thị ra console.
Khi mới học JavaScript, mình giải bài toán này như sau:
Cách giải trên khá dễ hiểu. Mình duyệt tất cả các phần tử mảng bằng vòng lặp for với chỉ số. Tại mỗi lượt lặp, mình lấy phần tử đang duyệt cộng dồn với biến sum.
Có một vấn đề với cách này, đó là việc sử dụng chỉ số i có thể khiến bạn bị nhầm với một biến trước đó. Dẫn đến những lỗi sai không đoán trước được.
Lúc này, forEach JavaScript xuất hiện giúp bạn giải quyết vấn đề trên.
Một cách đơn giản để triển khai hàm forEach như sau:
Hàm forEach trên nhận đầu vào là một mảng array và một hàm action – thực hiện hành động với mỗi phần tử của mảng array[i].
Mình có thể diễn giải thuật toán trên bằng lới như sau: Với mỗi phần tử trong mảng numbers, mình lấy nó ra và cộng dồn với biến sum. Kết quả thu được, sẽ ghi ra console.
Nếu so sánh với cách làm trước thì cách này rõ ràng là dài hơn. Tuy nhiên, đây chỉ là một ví dụ cơ bản, nên mình sẽ không bàn về độ dài, ngắn của code.
Vấn đề nên quan tâm trước tiên đó là: code-đọc-dễ-hiểu.
Theo quan điểm cá nhân mình, việc sử dụng hàm forEach giúp code gần giống với ngôn ngữ tự nhiên hơn. Quan điểm của bạn về vấn đề này thế nào?
Hàm forEach là gì? Hay vòng lặp forEach trong JavaScript là gì?
Trả lời: forEach là một phương thức có sẵn của array, để duyệt qua mỗi phần tử của mảng và thực hiện một hành động nào đó.
Chú ý:
Kết quả:
Bất cứ thứ gì cũng có hai mặt, forEach JavaScript cũng không ngoại lệ. Sau đây là một số ưu, nhược điểm của phương thức forEach:
Trên đây là một số ưu, nhược điểm của việc sử dụng forEach. Mình không khuyên bạn nên hay không nên sử dụng phương thức này.
Đây chỉ đơn giản là một cách thức để duyệt mảng, bạn có thể sử dụng nó hoặc bạn chỉ cần sử dụng vòng lặp.
It’s the choice.
Khi so sánh với các vòng lặp khác, ngôn ngữ lập trình khác, bạn sẽ thấy một số từ khóa hay sử dụng trong vòng lặp như: return, break và continue.
Câu hỏi đặt ra là liệu những từ khóa này có sử dụng được trong vòng lặp forEach JavaScript hay không? Cách sử dụng của chúng có giống hay không?
Sau đây là câu trả lời.
Từ khóa return dùng để dừng lại một hàm và trả về giá trị từ hàm đó.
Giả sử, bạn cần viết một hàm tìm vị trí của số chẵn đầu tiên trong một mảng. Nếu không tìm thấy thì trả về giá trị -1.
Sau đây là code sử dụng vòng lặp for thông thường:
Chuyển đoạn code trên sang forEach như sau:
Tại sao kết quả lại là -1?
Tại vì từ khóa return trong forEach chỉ có tác dụng để thoát khỏi hàm callback bên trong forEach mà thôi. Do đó, kết quả của hàm trên là giá trị của câu lệnh return -1 cuối cùng.
Dể giải quyết bài toán này, mình khuyên bạn không nên dùng forEach. Thay vào đó bạn có thể dùng vòng lặp for thông thường như trên, hoặc sử dụng vòng lặp for…in như sau:
Chú ý: vòng lặp for…in chỉ nên dùng với array, không nên sử dụng với đối tượng array-like.
Từ khóa break thường dùng để thoát khỏi câu lệnh switch hoặc thoát khỏi vòng lặp (for, while, do…while, for…in).
Ví dụ đoạn code sau dùng để thoát khỏi vòng lặp for khi i bằng 3:
Nếu sử dụng từ khóa break với forEach thì sao?
Đúng vậy, bạn sẽ bị lỗi cú pháp Illegal break statement vì từ khóa break là không hợp lệ với forEach JS.
Nghĩa là bạn không thể sử dụng từ khóa break với forEach. Thay vào đó bạn có thể sử dụng vòng lặp for như trên hoặc dùng phương thức arr.some() để thay thế:
Từ khóa continue thường dùng để bỏ qua một lượt lặp trong vòng lặp.
Ví dụ đoạn code sau dùng để bỏ qua lượt lặp khi i bằng 3:
Nếu chuyển sang dùng với forEach:
Bạn sẽ bị lỗi Illegal continue statement: no surrounding iteration statement. Vì từ khóa continue không hợp lệ với forEach JavaScript.
Nghĩa là bạn cũng không thể dùng continue bên trong forEach được. Thay vào đó, bạn có thể dùng vòng lặp for như trên hoặc sử dụng từ khóa return như sau:
Ngoài forEach, JavaScript còn cung cấp một số phương thức khác, tương tự dành cho array. Đó là: entries, every, filter, find, findIndex, keys, map, reduce, reduceRight, some, values.
Trả về một mảng đối tượng mới, chứa key/value cho mỗi phần tử trong array.
Để duyệt mảng đối tượng mới này, mình sử dụng vòng lặp for…of:
Trả về true nếu như tất cả các phần tử trong mảng thoả mãn 1 hàm kiểm tra, ngược lại trả về false.
Tham số truyền vào giống với hàm forEach.
Ví dụ sau trả về true nếu tất cả các phần tử trong mảng thoả mãn đều lớn hơn hoặc bằng 10:
Giống như cái tên của nó, phương thức này dùng để lọc ra các phần tử trong mảng thoả mãn một điều kiện cho trước và trả về một mảng mới chứa những phần tử đó.
Tham số truyền vào giống với hàm forEach.
Ví dụ sau lọc ra những phần tử trong mảng có giá trị lớn hơn hoặc bằng 10:
Trả về giá trị của phần tử đầu tiên trong mảng thoả mãn điều kiện cho trước, nếu không tìm thấy thì trả về undefined.
Tham số truyền vào cũng giống như hàm forEach.
Ví dụ sau tìm ra một object với name thoả mãn điều kiện cho trước:
Trả về chỉ số đầu tiên của phần tử thoả mãn điều kiện cho trước, ngược lại trả về -1.
Tham số truyền vào cũng giống như hàm forEach.
Ví dụ sau tìm ra chỉ số object với name thoả mãn điều kiện cho trước:
Trả về mảng mới với mỗi phần tử là kết quả của việc gọi hàm callback với mỗi phần tử của mảng ban đầu.
Tham số truyền vào cũng giống như hàm forEach JavaScript.
Ví dụ sau trả về mảng mới, mà mỗi phần tử của mảng mới là căn bậc hai của phần tử tương ứng trong mảng ban đầu:
Những phương thức còn lại bạn có thể tham khảo thêm tại bài viết: Các phương thức của mảng trong JavaScript.
Cho một mảng hai chiều, hãy chuyển mảng đó thành mảng một chiều, ví dụ:
► Sử dụng phương thức arr.reduce() và arr.concat().
Xem đáp án
► Sử dụng vòng lặp for, while thông thường.
Xem đáp án
Hãy viết hàm every() và some() thoả mãn:
Xem đáp án:
Trên đây là một số kiến thức cơ bản về forEach trong JavaScript.
Hy vọng qua bài viết này bạn hiểu được forEach JavaScript là gì? Cách sử dụng forEach và khi nào nên sử dụng forEach JS.
Tham khảo: Higher-Order Functions
★ Nếu bạn thấy bài viết này hay thì hãy theo dõi mình trên Facebook để nhận được thông báo khi có bài viết mới nhất nhé:
Complete JavaScript là trang blog về lập trình – chuyên chia sẻ kiến thức về lập trình JavaScript, một số thư viện/framework Javascript (React.js, Gatsby.js,…) và những kiến thức khác liên quan đến lập trình web (HTML, CSS,…).
Tiếp đó, để mọi nguời hiểu sâu hơn về JavaScript forEach là cái quái gì? – Complete JavaScript, mình còn viết thêm một bài viết liên quan tới bài viết này nhằm tổng hợp các kiến thức về giải thích foreach . Mời các bạn cùng thưởng thức !
Lời kết :Trong JavaScript, để duyệt array thì forEach là một hàm rất hay. Vậy hàm forEach trong JavaScript là như thế nào và cách sử dụng forEach JavaScript ra sao?