Vòng lặp forEach trong JavaScript

Trong JavaScript, để có thể duyệt mảng thì forEach là một hàm rất hay. Vậy hàm forEach trong JavaScript cụ thể là như thế nào và cách sử dụng nó ra sao? Chúng ta sẽ cùng tìm hiểu ngay sau đây.

1. Đặt vấn đề

Xét một ví dụ đơn giản : ” Tính tổng của mảng numbers = [1,2,3,4,5,6]” .

Thông thường, chúng ta sẽ làm như sau:

const numbers = [1, 2, 3, 4, 5, 6];
let sum = 0;
for(let i = 0; i < numbers.length; i++) {
  sum += numbers[i];
}
console.log(sum);
// => 21Code language: JavaScript (javascript)

Cách trên khá dễ hiểu và thường đọc xong người ta sẽ nghĩ đến dùng cách này luôn. Tuy nhiên, trong trường hợp nào đó, vô tình chúng ta bị nhầm lẫn biến i đó với một biến số nào trước đó thì thật tệ hại.

Ngoài cách dùng vòng for, chúng ta có thể dùng tới forEach, một hàm khá hay và ngắn gọn.

2. Sử dụng forEach thế nào ?

Bài toán trên có thể được sử dụng với forEach như sau:

const numbers = [1, 2, 3, 4, 5, 6];
let sum = 0;
forEach(numbers, function(element){
    sum += element;
});
console.log(sum);
// => 21Code language: JavaScript (javascript)

Cũng khá là dễ hiểu nhỉ vì nó khá giống với ngôn ngữ tự nhiên mà.

3. Giới thiệu về forEach

forEach là một phương thức có sẵn của array được JavaScript cung cấp.

Cú pháp của nó là:

arr.forEach(function callback(currentValue, index, array) {
    // your iterator
}[, thisArg]);Code language: PHP (php)

Giải thích:

callback: là hàm để thực hiện với mỗi phần tử của mảng, bao gồm 3 tham số:

currentValue: phần tử hiện tại đang được xử lý của array.

index: chỉ số của phần tử hiện tại đang được xử lý của array.

array: mảng hiện tại đang gọi hàm forEach.

thisArg: giá trị được sử dụng như là this, là tham chiếu tới đối tượng khi thực hiện hàm callback (Nếu thisArg không được nói tới thì mặc định là undefined).

Ví dụ in ra tổng của mảng:

function sumOfArray(numbers){
  numbers.forEach(function sumElement(element){
    console.log(element);
  });
}Code language: JavaScript (javascript)

Ví dụ có sử dụng thisArg:

function Counter() {
  this.sum = 0;
  this.count = 0;
}
Counter.prototype.add = function(array) {
 array.forEach(function(item) {
   this.sum += item;
   ++this.count;
 }, this);
};

const obj = new Counter();
obj.add([2, 5, 9]);
console.log(obj.count); // => 3 
console.log(obj.sum);   // => 16Code language: JavaScript (javascript)

Khá là dễ hiểu phải không ạ? Đoạn code khi sử dụng forEach khá là dễ hiểu và ngắn gọn, tuy nhiên thì code sẽ chạy chậm hơn so với việc sử dụng vòng lặp (tuy nhiên không đáng kể). Tùy vào từng trường hợp thì mình có thể sử dụng linh hoạt.

4. Một số hàm khác

Ngoài forEach, thì JavaScript còn cung cấp một số phương thức khác như : filter, reduce , map, every…. Trong project mình đang làm cũng liên quan khá nhiều tới xử lí các array, ơn giời là các phương thức này đã cứu cánh mình rất nhiều, nếu mình còn dùng for và for để xử lí thì… bao nhiêu dòng code cho đủ, và mỗi lần maintain lại thật là ác mộng! Sau đây là một số phương thức mình hay dùng:

Map

Cái đầu tiên phải kể đến đó chính là map, một hàm mình dùng khá là nhiều.

Xét một ví dụ:

let arrayName = dataResponse.map( item => {
    return item.Name
}Code language: JavaScript (javascript)

Nói một cách dễ hiểu, map trả về 1 mảng mới có độ dài bằng mảng ban đầu.

Filter

Nghe tới tên, là ta có thể hình dung luôn được nó sẽ làm gì rồi đúng không ạ? Đó chính là tìm kiếm. Filter trả về 1 mảng có độ dài <= với độ dài mảng ban đầu.

Xét ví dụ sau :

let companyObject = dataCompany.filter((company) => {
              return company["companyId"] === companyId;
            })Code language: JavaScript (javascript)

Reduce

Reduce thường được dùng nhiều cho việc tính toán, nó trả về một giá trị.

Xét ví dụ:

let total_weight = animals.reduce((weight, animal, index, animals) => {
    return weight += animal.weight
}, 0)Code language: JavaScript (javascript)

Ngoài ra, thì có rất nhiều hàm khác, mình có thể tìm hiểu thêm ở đây .

Với các ví dụ đơn giản kể trên, ta đã hiểu hơn về cách sử dụng các hàm map, filter và reduce. Các hàm này sẽ càng tối ưu hơn với các dữ liệu hay mã code nhiều, phức tạp, mình khuyên các bạn nên tìm hiểu về nó, vì nó khá hay và và đơn giản.

Trên đây là chia sẻ của mình về việc forEach và các hàm trong JavaScript. Cám ơn các bạn đã đọc, mong bài viết của mình phần nào có thể giúp ích cho các bạn trong việc xử lí với array!

Nguồn: https://developer.mozilla.org/vi/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.

---

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.