Foreach trong JavaScript

Phương thức forEach trong JavaScript là một công cụ mạnh mẽ giúp lập trình viên dễ dàng thao tác và xử lý các phần tử trong mảng. Được giới thiệu từ phiên bản ES5, forEach mang lại cách tiếp cận hiện đại và tiện lợi hơn so với các vòng lặp truyền thống như for và while. Hiểu và sử dụng forEach hiệu quả sẽ giúp mã nguồn của bạn trở nên ngắn gọn, dễ đọc và bảo trì hơn.

Cú pháp và cách sử dụng cơ bản

Cú pháp của phương thức forEach rất đơn giản và dễ hiểu:

array.forEach(callback(currentValue, index, array), thisArg);

Trong đó:

• callback: Là hàm được gọi cho mỗi phần tử của mảng.
• currentValue: Giá trị của phần tử hiện tại đang được xử lý trong mảng.
• index: Chỉ số của phần tử hiện tại đang được xử lý.
• array: Mảng đang được gọi forEach.
• thisArg: Giá trị được sử dụng làm this khi thực thi callback.

Ví dụ cơ bản:

let numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
  console.log(number);
});

Kết quả sẽ là:

1
2
3
4
5

Trong ví dụ này, forEach lặp qua từng phần tử trong mảng numbers và in ra giá trị của chúng.

Tham số của phương thức forEach

Callback

Hàm callback được gọi cho mỗi phần tử của mảng. Nó có thể nhận ba tham số:

• currentValue: Giá trị hiện tại của phần tử đang được xử lý.
• index: Chỉ số của phần tử hiện tại.
• array: Mảng đang được gọi forEach.

Ví dụ:

numbers.forEach(function(number, index, array) {
  console.log('Index:', index, 'Value:', number);
});

Kết quả sẽ là:

Index: 0 Value: 1
Index: 1 Value: 2
Index: 2 Value: 3
Index: 3 Value: 4
Index: 4 Value: 5

thisArg

thisArg là giá trị được sử dụng làm this khi thực thi hàm callback. Điều này rất hữu ích khi bạn cần sử dụng một ngữ cảnh this cụ thể trong hàm callback.

Ví dụ:

let context = { multiplier: 2 };
numbers.forEach(function(number) {
  console.log(number * this.multiplier);
}, context);

Kết quả sẽ là:

2
4
6
8
10

Các trường hợp sử dụng phổ biến

In ra các phần tử của mảng

let fruits = ['apple', 'banana', 'cherry'];
fruits.forEach(function(fruit) {
  console.log(fruit);
});

Kết quả sẽ là:

apple
banana
cherry

Tính tổng các phần tử của mảng

let sum = 0;
numbers.forEach(function(number) {
  sum += number;
});
console.log('Sum:', sum);

Kết quả sẽ là:

Sum: 15

Thay đổi giá trị của các phần tử trong mảng

let doubled = [];
numbers.forEach(function(number) {
  doubled.push(number * 2);
});
console.log('Doubled:', doubled);

Kết quả sẽ là:

Doubled: [2, 4, 6, 8, 10]

So sánh forEach với các phương pháp lặp khác

forEach vs. for loop

Vòng lặp for cổ điển yêu cầu bạn tự quản lý biến chỉ số và điều kiện dừng.

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

forEach giúp mã nguồn ngắn gọn và dễ đọc hơn.

forEach vs. map

map tạo ra một mảng mới bằng cách áp dụng hàm callback cho mỗi phần tử của mảng.

let doubled = numbers.map(function(number) {
  return number * 2;
});
console.log('Doubled with map:', doubled);

forEach chỉ thực hiện lặp mà không tạo ra mảng mới.

forEach vs. for…of

for...of cung cấp một cách lặp qua các phần tử của mảng một cách dễ đọc.

for (let number of numbers) {
  console.log(number);
}

Lưu ý và thực hành tốt khi sử dụng forEach

Không thay đổi mảng gốc

Tránh thay đổi mảng gốc trực tiếp trong hàm callback của forEach.

Không hỗ trợ break/continue

forEach không hỗ trợ các câu lệnh break và continue. Nếu cần dừng vòng lặp sớm, hãy sử dụng for hoặc for...of.

Ví dụ:

numbers.forEach(function(number) {
  if (number === 3) {
    // break; // Lỗi: `forEach` không hỗ trợ `break`
  }
  console.log(number);
});

Các lỗi thường gặp và cách khắc phục

Gọi forEach trên giá trị không phải mảng

let notAnArray = {};
// notAnArray.forEach(function() {}); // Lỗi: notAnArray.forEach is not a function

Đảm bảo rằng biến gọi forEach là một mảng.

Callback không được gọi

numbers.forEach(); // Không làm gì vì không có callback

Luôn truyền một hàm callback vào forEach.

Kết luận

Phương thức forEach trong JavaScript là một công cụ mạnh mẽ giúp bạn dễ dàng thao tác với các phần tử của mảng. Hiểu và áp dụng đúng forEach sẽ giúp bạn tối ưu hóa mã nguồn và làm cho các dự án của bạn trở nên hiệu quả hơn. Hãy thực hành và áp dụng forEach trong các dự án của bạn để tận dụng tối đa lợi ích mà nó mang lại.

Tài liệu tham khảo

• Mozilla Developer Network (MDN): Array.prototype.forEach()
• W3Schools: JavaScript Array forEach()
• JavaScript.info: Array