JavaScript forEach() – Mảng JS cho mỗi ví dụ về vòng lặp

Khi làm việc với mảng, sẽ có lúc bạn cần lặp hoặc lặp qua các giá trị của mảng để xuất hoặc thao tác với chúng.

Các mảng này có thể chứa bất kỳ kiểu dữ liệu nào, bao gồm các đối tượng, số, chuỗi và nhiều loại khác.

Trong bài viết này, chúng ta sẽ xem xét cách bạn có thể sử dụng JavaScript forEach() phương thức mảng để lặp qua tất cả các loại mảng, cũng như cách nó khác với phương thức vòng lặp for.

Có nhiều phương thức lặp trong JavaScript, bao gồm cả forEach() và hầu hết chúng đều thực hiện cùng một chức năng với những khác biệt nhỏ. Việc sử dụng một phương pháp vòng lặp cụ thể hay không là hoàn toàn tùy thuộc vào bạn, nhưng điều quan trọng là chúng ta phải hiểu từng phương pháp và cách chúng hoạt động.

JavaScript forEach()

Các forEach() phương thức mảng lặp qua bất kỳ mảng nào, thực thi hàm được cung cấp một lần cho từng phần tử mảng theo thứ tự chỉ số tăng dần. Chức năng này được gọi là chức năng gọi lại.

Ghi chú: Mảng là tập hợp các phần tử có thể thuộc bất kỳ kiểu dữ liệu nào.

Cú pháp và tham số của vòng lặp forEach()

Dưới đây là các cách tiêu chuẩn để viết vòng lặp forEach:

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

Hàm gọi lại 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ả chúng đều được yêu cầu. Dưới đây là một số ví dụ về forEach() vòng lặp sử dụng cả hàm bình thường và phương thức ES6 để khai báo hàm gọi lại:

// Using only Current Element
array.forEach((currentElement) => { /* ... */ })
array.forEach(function(currentElement) { /* ... */ })

// Using only Current Element and Index
array.forEach((currentElement, index) => { /* ... */ })
array.forEach(function(currentElement, index) { /* ... */ })

// Using only Current Element, Index and array
array.forEach((currentElement, index, array) => { /* ... */ })
array.forEach(function(currentElement, index, array){ /* ... */ })

// Using all parameters with thisValue (value of this in the callback) 
array.forEach((currentElement, index, array) => { /* ... */ }, thisValue)
array.forEach(function(currentElement, index, array) { /* ... */ }, thisValue)

Cú pháp trên có vẻ khó hiểu, nhưng đó 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. Hãy xem qua tất cả các tham số mà chúng tôi đã sử dụng:

• callbackFunction: Hàm gọi lại là một 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ố sau được sử dụng trong hàm gọi lại:

1. currentElement: Phần tử hiện tại, như tên của nó, là phần tử trong mảng đang được xử lý tại thời điểm xảy ra vòng lặp. Đó là đối số cần thiết duy nhất.
2. index: chỉ mục là một đối số tùy chọn mang chỉ mục của currentElement.
3. array: Mảng là một đối số tùy chọn trả về mảng đã được truyền cho forEach() phương pháp.

• thisValue: Đây là tham số tùy chọn chỉ định giá trị sẽ được sử dụng trong hàm gọi lại.

Tóm lại, các forEach() phương thức lặp mảng chấp nhận một hàm gọi lại chứa các đối số có thể được sử dụng trong hàm gọi lại cho từng mục mảng, chẳng hạn như mục mảng, index của mục và toàn bộ mảng.

forEach() Các ví dụ trong JavaScript

Trước khi xem xét các ví dụ khả thi khác, hãy xem xét tất cả các đối số mà chúng ta đã chuyển vào hàm gọi lại và chúng có thể được sử dụng để làm gì.

Làm thế nào để sử dụng currentElement Tranh luận

Giả sử chúng ta có một mảng thông tin chi tiết về nhân viên bao gồm tên, tuổi, số tiền lương và đơn vị tiền tệ của họ:

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" }
];

Nếu chúng tôi muốn hiển thị tất cả các tên riêng lẻ với một số từ xung quanh chúng, chúng tôi có thể sử dụng forEach() phương pháp như sau:

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

Đầu ra:

"I am Jam Josh a staff of Royal Suites."
"I am Justina Kap a staff of Royal Suites."
"I am Chris Colt a staff of Royal Suites."
"I am Jane Doe a staff of Royal Suites."

Ghi chú: Chúng ta cũng có thể phá hủy currentElement value trong trường hợp đó là một đối tượng chứa các cặp khóa/giá trị theo cách này:

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

Làm thế nào để sử dụng index Tranh luận

Chúng tôi cũng có thể nhận được index của từng mục mảng bằng cách sử dụng đối số chỉ mục chưa được tạo 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);
});

Đầu ra:

"index 0 : I am Jam Josh a staff of Royal Suites."
"index 1 : I am Justina Kap a staff of Royal Suites."
"index 2 : I am Chris Colt a staff of Royal Suites."
"index 3 : I am Jane Doe a staff of Royal Suites."

Làm thế nào để sử dụng array Tranh luận

Các array đối số là đối số thứ ba chứa mảng ban đầu đang được lặp lại. Ví dụ: chúng tôi có thể thử hiển thị giá trị trong bảng điều khiển của mình theo cách này:

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

Điều này sẽ xuất toàn bộ mảng 4 lần vì chúng ta có 4 mục và phép lặp chạy 4 lần. Hãy làm điều đó cho một mảng với một vài giá trị để tôi có thể thêm đầu ra ở đây:

let scores = [12, 55, 70];

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

Đầu ra:

[12,55,70]
[12,55,70]
[12,55,70]

Cho đến giờ, chúng ta đã sử dụng mọi đối số của hàm gọi lại. Hãy xem xét một số ví dụ khác để hiểu đầy đủ cách thức hoạt động của nó trước khi so sánh nhanh với phương thức vòng lặp for.

Cách cộng tất cả các giá trị trong một dãy số với forEach()

Giả sử chúng ta có một mảng scores. Chúng ta có thể sử dụng forEach() phương thức mảng để lặp qua và giúp cộng các số này:

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

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

console.log(total);

Nhớ lại rằng trước đó, chúng tôi đã sử dụng một loạt các thông tin chi tiết về nhân viên. Bây giờ, hãy thử cộng tất cả tiền lương của nhân viên lại với nhau để xem nó hoạt động như thế nào với các đối tượng:

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

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

Ghi chú: Chúng tôi đã phá hủy currentElementĐối tượng của.

Cách sử dụng câu điều kiện trong câu forEach() Chức năng gọi lại

Khi lặp qua các mảng, chúng ta có thể muốn kiểm tra các điều kiện cụ thể, như thường được thực hiện với phương thức vòng lặp for. Chúng ta có thể chuyển các điều kiện này vào hàm gọi lại hoặc bất kỳ thao tác nào khác mà chúng ta muốn chạy trên từng mục mảng.

Ví dụ: nếu chúng tôi chỉ muốn hiển thị tên của những người có mức lương lớn hơn hoặc bằng 4000 từ mảng chi tiết nhân viên mà chúng ta đã khai báo trước đó, chúng ta có thể làm như sau:

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

Đầu ra:

"Jam Josh"
"Jane Doe"

So sánh forEach() với Vòng lặp for

Vòng lặp for rất giống với phương thức forEach, nhưng mỗi phương thức có một số tính năng riêng như:

Thoát ra và tiếp tục trong một Vòng lặp

Khi lặp qua một mảng, chúng ta có thể muốn thoát ra hoặc tiếp tục vòng lặp khi một điều kiện nhất định được đáp ứng (nghĩa là chúng ta bỏ qua). Điều này là có thể với break và continue hướng dẫn, nhưng nó không hoạt động với forEach() phương pháp, như hình dưới đây:

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

scores.forEach((score) => {
  console.log(score);

  if (score === 70) 
    break;
});

Điều này sẽ đưa ra một lỗi cú pháp của Illegal break statement. Điều này cũng áp dụng cho lệnh continue cũng sẽ tạo ra một Illegal continue statement: no surrounding iteration statement.

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

scores.forEach((score) => {
  if (score === 70) 
    continue;
  
  console.log(score);
});

Nhưng may mắn thay, điều này hoạt động hoàn hảo với phương thức vòng lặp for:

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

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

  if (scores[i] === 70) 
    break;
}

Đầu ra:

12
55
70

Và tương tự với continue hướng dẫn:

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

for (i = 0; i < scores.length; i++) {
  if (scores[i] === 70) 
    continue;
  
  console.log(scores[i]);
}

Đầu ra:

12
55
47

Mảng thiếu phần tử

Một phép so sánh quan trọng khác cần thực hiện là trong một tình huống mà mảng mà chúng ta đang lặp lại có một số giá trị/mảng bị thiếu như bên dưới:

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

Điều này có thể là do lỗi của nhà phát triển hoặc nguyên nhân nào khác, nhưng hai phương thức này có hai cách tiếp cận khác nhau để lặp qua các loại mảng này. Vòng lặp for trả về giá trị không xác định khi thiếu giá trị, trong khi vòng lặp for forEach() phương pháp bỏ qua chúng.

cho vòng lặp

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

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

Đầu ra:

70
undefined
12
55
undefined
70
47

cho mỗi()

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

studentsScores.forEach((stundentScore) => {
  console.log(stundentScore);
});

Đầu ra:

70
12
55
70
47

Ghi chú: Async/Await không hoạt động với forEach() phương thức mảng nhưng hoạt động với phương thức vòng lặp for.

Phần kết luận

Trong bài viết này, chúng ta đã học cách sử dụng forEach() phương thức mảng, cho phép chúng ta lặp qua một mảng của bất kỳ loại mục nào. Nó cũng cho phép chúng ta viết mã rõ ràng hơn, dễ đọc hơn so với vòng lặp for.