forEach JavaScript: Một số thao tác cơ bản và ví dụ chi tiết

Có nhiều phương thức lặp trong JavaScript, bao gồm forEach() giúp thực hiện một số chức năng cơ bản. Để sử dụng phương thức này, bạn cần hiểu rõ từng thao tác và cách hoạt động của forEach JavaScript.

Đọc bài viết sau đây để được giải đáp chi tiết hơn về:

• Tổng quan về của forEach JavaScript như định nghĩa, cú pháp, điểm mạnh và điểm yếu
• Một số thao tác cơ bản của forEach
• So sánh sự khác nhau giữa forEach và For Loop

Tổng quan về forEach JavaScript

forEach() là một phương thức dùng để lặp qua các phần tử trong một mảng (array), thực hiện một hàm được cung cấp một lần cho mỗi phần tử mảng theo thứ tự chỉ mục tăng dần, được gọi là hàm callback. Cú pháp chuẩn để viết vòng lặp như sau:

array.forEach(callbackFunction);
array.forEach(callbackFunction, thisValue);

Trong đó, hàm callback có thể chấp nhận tối đa ba đối số khác nhau, mặc dù không phải tất cả đều bắt buộc.

array.forEach((currentElement) => { /* ... */ })
array.forEach(function(currentElement) { /* ... */ })

array.forEach((currentElement, index) => { /* ... */ })
array.forEach(function(currentElement, index) { /* ... */ })

array.forEach((currentElement, index, array) => { /* ... */ })
array.forEach(function(currentElement, index, array){ /* ... */ })

array.forEach((currentElement, index, array) => { /* ... */ }, thisValue)
array.forEach(function(currentElement, index, array) { /* ... */ }, thisValue)

Cú pháp trên chính là cú pháp chung để viết vòng lặp forEach tùy thuộc vào giá trị bạn muốn sử dụng. Cụ thể như:

• Hàm callback: Hàm chỉ được thực thi một lần cho mỗi phần tử và có thể chấp nhận các đối số. 
• currentElement: Phần tử trong mảng được xử lý tại thời điểm vòng lặp xảy ra, đây là đối số duy nhất cần thiết. 
• Index: Đối số tùy chọn mang chỉ mục của currentElement. 
• Array: Mảng là đối số tùy chọn trả về mảng đã được truyền cho phương thức forEach()
• thisValue: Tham số tùy chọn chỉ định giá trị được sử dụng trong hàm gọi lại.

Xem thêm: JavaScript là gì? Học JavaScript cơ bản với lộ trình dễ hiểu nhất

Điểm mạnh và điểm yếu của forEach JavaScript

Phương thức forEach() sở hữu một số điểm mạnh nổi bật như:

• Thúc đẩy phần khai báo dễ đọc hơn, thể hiện mục đích lặp lại các phần tử mà không cần bộ đếm vòng lặp rõ ràng. 
• Cú pháp được tối ưu ngắn gọn, giảm các mã mẫu liên quan đến vòng lặp for.
• Hàm callback cho phép bạn thực hiện các hành động trên từng phần tử một cách dễ dàng.

Mặc dù forEach có thể làm cho đoạn mã được tối ưu đơn giản và dễ đọc hơn nhưng nó có một hạn chế chính là không có cơ chế để dừng lặp dựa trên một điều kiện cụ thể. Điều này có nghĩa là forEach không phù hợp với các tình huống mà bạn cần chấm dứt quá trình lặp sớm.

Một số thao tác cơ bản với forEach JavaScript và ví dụ chi tiết

Cách sử dụng currentElement

Giả sử bạn có một mảng thông tin chi tiết về nhân sự bao gồm tên, tuổi, tiền lương,…

const staffsDetails = [
  { name: "Jam Josh", age: 44, salary: 4000, currency: "USD" },
  { name: "Justina Kap", age: 34, salary: 3000, currency: "USD" },
  { name: "Chris Colt", age: 37, salary: 3700, currency: "USD" },
  { name: "Jane Doe", age: 24, salary: 4200, currency: "USD" }
];

Bạn muốn hiển thị tất cả các tên riêng lẻ với một số từ xung quanh, bạn có thể sử dụng phương thức forEach() theo cách như sau:

staffsDetails.forEach((staffDetail) => {
  let sentence = `I am ${staffDetail.name} a staff of Royal Suites.`;
  console.log(sentence);
});

Kết quả hiển thị:

Ngoài ra, bạn cũng có thể phân tích cấu trúc giá trị của currentElement trong trường hợp trên là một đối tượng chứa các cặp khóa/giá trị:

staffsDetails.forEach(({ name }, index) => {
  let sentence = `I am ${name} a staff of Royal Suites.`;
  console.log(sentence);
});

Cách sử dụng đối số index trong forEach

Bạn có thể lấy chỉ mục của từng mảng bằng cách sử dụng đối số chỉ mục chưa xây dựng theo cách này.

staffsDetails.forEach((staffDetail, index) => {
  let sentence = `index ${index} : I am ${staffDetail.name} a staff of Royal Suites.`;
  console.log(sentence);
});

Kết quả hiển thị:

Cách sử dụng mảng (Array)

Đối số mảng là đối số thứ ba chứa mảng gốc đang được lặp lại. Vì vậy, bạn có thể thử hiển thị giá trị trong bảng theo cách:

staffsDetails.forEach((staffDetail, index, array) => {
  console.log(array);
});

Lúc này, kết quả sẽ hiển thị toàn bộ 4 mảng vì bạn thực hiện lệnh 4 mục và vòng lặp chạy 4 lần. Tiếp theo, thêm một số giá trị để có kết quả hiển thị đầu ra như:

let scores = [12, 55, 70];

scores.forEach((score, index, array) => {
  console.log(array);
});

Kết quả hiển thị:

Cách thêm các giá trị số (number) với forEach

Giả sử bạn có một mảng điểm số. Bạn có thể sử dụng phương thức mảng forEach() để lặp lại và cộng các số này. 

const scores = [12, 55, 70, 47];

let total = 0;
scores.forEach((score) => {
  total += score;
});

console.log(total);

Tiếp theo, bạn tiến hành cộng thử tất cả mức lương của nhân viên lại với nhau để xem chúng hoạt động như thế nào:

let totalSalary = 0;
staffsDetails.forEach(({salary}) => {
  totalSalary += salary;
});

console.log(totalSalary + " USD"); // "14900 USD"

Cách sử dụng callback trong forEach()

Khi lặp qua các mảng, bạn có thể kiểm tra các điều kiện cụ thể và thường được thực hiện với phương thức vòng lặp for. Bạn có thể truyền các điều kiện này vào hàm callback hoặc các thao tác khác mà bạn muốn chạy trên mỗi mảng. 

Ví dụ, nếu bạn chỉ muốn hiển thị tên những nhân viên có mức lương lớn hơn hoặc bằng 4000 từ mảng thông tin chi tiết về nhân sự đã khai báo trước đó. Bạn có thể làm như sau:

staffsDetails.forEach(({name, salary}) => {
  if(salary >= 4000){
    console.log(name);
  }
});

Khi trả kết quả, trình duyệt sẽ hiển thị tên của những nhân viên có mức lương lớn hơn 4000.

Câu hỏi thường gặp forEach JavaScript

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

Một số trường hợp bạn có thể sử dụng forEach JavaScript như:

• Nếu bạn chỉ muốn thực hiện một hành động trên từng phần tử mà không cần tạo ra một mảng mới, forEach sẽ là lựa chọn tốt nhất.
• Hoặc khi bạn không cần trả về một giá trị mới trong mảng. Do bản chất của forEach là thực hiện một hành động nào đó trên mỗi phần tử mà không có ý định trả về giá trị.

Sự khác nhau giữa forEach và JavaScript for loop

Một số sự khác nhau giữa forEach và for Loop như sau:

forEach và Map khác nhau như thế nào?

Trong quá trình lập trình, nếu bạn muốn tạo ra một mảng mới với các giá trị đã được chuyển đổi từ mảng gốc thì hãy lựa chọn map(). Nếu bạn chỉ muốn lặp qua mảng và thực hiện các thao tác phụ (như in ra console hoặc thay đổi giá trị của từng phần tử mà không cần tạo mảng mới), forEach() có thể là lựa chọn tốt hơn.

Một số điểm khác biệt giữa hai phương thức này như sau:

Tổng kết về forEach JavaScript

Như vậy, bài viết đã giới thiệu về phương thức của Mảng (Array) forEach(), cho phép bạn có thể lặp qua một mảng của bất kỳ mục nào. forEach JavaScript cũng cho phép bạn viết mã một cách dễ dàng hơn, cấu trúc dễ đọc và đơn giản so với vòng lặp for.

Để nắm vững hơn nền tảng kiến thức về JavaScript, hãy thử áp dụng chúng vào những dự án thực tế cũng như có cơ hội tìm hiểu nhiều hơn về khái niệm nâng cao. Bằng cách này, bạn sẽ đạt được nhiều cơ hội cũng như thành tích nổi bật trong công việc, trở thành Javascript Developer chuyên nghiệp.

Xem thêm: JavaScript Developer là gì? Các hướng phát triển của JavaScript Developer