Cũng như các ngôn ngữ lập trình khác, việc xử lý mảng trong JavaScript là công việc rất quan trọng. Trong bài viết này, chúng ta sẽ tìm hiểu về một hàm lạ nhưng cũng rất quen với mỗi lập trình viên, đó là forEach trong JavaScript.

1. forEach trong JavaScript là gì?

Như các ngôn ngữ lập trình khác, forEach trong JavaScript là một phương thức có sẵn trong mảng. Với nó ta có thể lặp qua từng phần tử có trong mảng và xử lý chúng theo thứ tự. Thông thường, chúng ta sẽ bắt gặp forEach trong trường hợp cần hiển thị dữ liệu lên giao diện người dùng.

Ta cùng nhau xem cú pháp cơ bản của forEach trong JavaScript:

array.forEach(function(item, index, array) {
    // Thực hiện hành động trên mỗi phần tử ở đây
});
  • item: Giá trị của phần tử hiện tại trong mảng.
  • index: Chỉ mục của phần tử hiện tại trong mảng.
  • array: Mảng gốc mà chúng ta đang lặp qua.

>>> Xem thêm bài viết về ngôn ngữ lập trình PHP:

2. Sử dụng forEach trong JavaScript

  • In ra các phần tử trong mảng với forEach trong JavaScript:
const fruits = ["apple", "banana", "cherry", "date"];

fruits.forEach(function(fruit, index) {
    console.log(`Fruit at index ${index}: ${fruit}`);
});

Ta cũng có thể sử dụng forEach với Arrow Function:

const fruits = ["apple", "banana", "cherry", "date"];

fruits.forEach((fruit, index) => console.log(`Fruit at index ${index}: ${fruit}`));

Cả 2 cách trên đều cho ta kết quả như sau:

Fruit at index 0: apple
Fruit at index 1: banana
Fruit at index 2: cherry
Fruit at index 3: date
  • Truy cập mảng gốc trong forEach

Như đã hướng dẫn trong cú pháp sử dụng forEach ta có thể truy cập mảng gốc trong forEach bằng tham số thứ 3 trong hàm forEach như sau:

const fruits = ["apple", "banana", "cherry", "date"];

fruits.forEach(function(fruit, index, arr) {
    console.log(arr);
});

["apple", "banana", "cherry", "date"]
["apple", "banana", "cherry", "date"]
["apple", "banana", "cherry", "date"]
["apple", "banana", "cherry", "date"]
  • Sử dụng this trong forEach

Trong forEach chưa chắc có giá trị this cụ thể. Mặc định, trong hàm callback của nó, giá trị của this là undefined trong chế độ "strict mode" (chế độ nghiêm ngặt), và nó sẽ tham chiếu đến đối tượng toàn cục (chẳng hạn window) nếu không ở trong chế độ strict.

Đồng thời, ta có thể truyền một giá trị this tùy ý cho forEach với thisArg, như sau:

const obj = {
    prop: 'Hello',
    logProp: function(item) {
        console.log(this.prop + ' ' + item);
    }
};

const fruits = ['apple', 'banana', 'cherry'];

fruits.forEach(obj.logProp, obj); // Sử dụng obj làm giá trị 'this'

Ví dụ thực tế:

const user = {
    name: 'John',
    friends: ['Alice', 'Bob', 'Charlie'],
    greetFriends: function() {
        this.friends.forEach(function(friend) {
            console.log(`${friend}, this is ${this.name}.`);
        }, this);
    }
};

user.greetFriends();

Trong ví dụ trên, this ở đây đề cập đến đối tượng user bằng cách truyền nó vào giá trị thứ hai, nó cho phép chúng ta truy cập thuộc tính name của đối tượng user.

Lưu ý: Ngoài sử dụng thisArg để điều khiển this một cách rõ ràng thì không có cách nào để tự động xác định giá trị this của hàm callback trong forEach.

3. Lưu ý khi sử dụng forEach trong JavaScript

  • forEach giữ nguyên dữ liệu trong mảng gốc. Nó chỉ thực hiện và xử lý các hành động được xác định trong hàm callback.
  • Hàm forEach không thể sử dụng kết hợp với break. Trong trường hợp cần dừng vòng lặp với điều kiện nào đó, ta cần sử dụng các vòng lặp khác như for hoặc while thay thế.
  • forEach có thể sử dụng với mảng rỗng hoặc một mảng không đầy đủ. Lúc này nếu mảng không có phần tử nào nó sẽ không thực hiện bất cứ hành động nào.

Tổng kết

Phương thức forEach trong JavaScript là một công cụ hữu ích để lặp qua mảng và thực hiện các hành động trên từng phần tử. Nó giúp bạn tạo mã ngắn gọn và dễ đọc hơn khi làm việc với mảng dữ liệu trong ứng dụng web của bạn. Hi vọng rằng bài viết này đã giúp bạn hiểu rõ hơn về cách sử dụng forEach và cách tích hợp nó vào mã JavaScript của bạn.

Stringee Communication APIs là giải pháp cung cấp các tính năng giao tiếp như gọi thoại, gọi video, tin nhắn chat, SMS hay tổng đài CSKH cho phép tích hợp trực tiếp vào ứng dụng/website của doanh nghiệp nhanh chóng. Nhờ đó giúp tiết kiệm đến 80% thời gian và chi phí cho doanh nghiệp bởi thông thường nếu tự phát triển các tính năng này có thể mất từ 1 - 3 năm.

Bộ API giao tiếp của Stringee hiện đang được tin dùng bởi các doanh nghiệp ở mọi quy mô, lĩnh vực ngành nghề như TPBank, VOVBacsi24, VNDirect, Shinhan Finance, Ahamove, Logivan, Homedy,  Adavigo, bTaskee…

Quý bạn đọc quan tâm xin mời đăng ký NHẬN TƯ VẤN TẠI ĐÂY: