Cách dừng vòng lặp forEach trong JavaScript

Chắc hẳn các bạn cũng nghe tới vòng lặp forEach rồi đúng không? Có bao giờ bạn tự hỏi làm sao để dừng không cho forEach nữa không? Nếu chưa thì cùng mình tìm hiểu những cách dừng vòng lặp forEach trong JavaScript nhé!

Vòng lặp forEach

Với các bạn lập trình JavaScript thì chắc hẳn không còn xa lạ gì với  forEach . Ngoài các vòng lặp thông thường như  for ,  while  thì  forEach  là một 1 vòng lặp khá hay để rút gọn thời gian viết code.

Các bạn hãy xem ví dụ sau nhé.

Ví dụ khi sử dụng vòng lặp  for

const fruits = ['Apple', 'Banana', 'Orange', 'Watermelon'];

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

Code language:JavaScript(javascript)

Hoặc với vòng lặp  while

const fruits = ['Apple', 'Banana', 'Orange', 'Watermelon'];

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

Code language:JavaScript(javascript)

Kết quả sẽ là

Apple
Banana
Orange
Watermelon

Đấy như các bạn đã thấy ở trên là 2 ví dụ về  for  và  while . Khi làm việc với  for  và  while  chúng ta luôn phải để ý đến biến index của mảng để có thể lấy được phần tử trong mảng, và nếu như không cẩn thận chúng ta có thể làm sai lệch kết quả mong muốn.

Vậy còn với  forEach  thì sao. Chúng ta hãy xem ví dụ sau:

const fruits = ['Apple', 'Banana', 'Orange', 'Watermelon'];
fruits.forEach(fruit => console.log(fruit));

Code language:JavaScript(javascript)

Chỉ với 1 dòng lệnh đơn giản không cần phải đặt thêm biến mới rồi tăng index các kiểu.

Dừng vòng lặp forEach

Với  for  và  while  thì đơn giản, chỉ cần chúng ta dùng lệnh  break  là được. Ví dụ:

const fruits = ['Apple', 'Banana', 'Orange', 'Watermelon'];

for(let i = 0; i <= fruits.length; i++) {
    if (fruts[i] === 'Orange') break;
    console.log(fruits[i]);
const fruits = ['Apple', 'Banana', 'Orange', 'Watermelon'];

for(let i = 0; i <= fruits.length; i++) {
    if (fruits[i] === 'Orange') break;
    console.log(fruits[i]);
}

let i = 0;
while(i < fruits.length) {
    if (fruits[i] === 'Orange') break;
    console.log(fruits[i]);
    i++;
}

Code language:JavaScript(javascript)

Kết quả của 2 vòng lặp trên sẽ là:

Apple
Banana
Apple
Banana

Nhưng còn với forEach thì sao? Tất nhiên là không thể dùng break như với  for  hay  while  rồi.

Nếu chưa biết thì mình sẽ hướng dẫn các bạn một số cách có thể dừng được nó nhé!

1. Sử dụng if

const fruits = ['Apple', 'Banana', 'Orange', 'Watermelon'];
fruits.forEach(fruit => {
    if (fruit === 'Orange') return;
    console.log(fruit);
});

Code language:JavaScript(javascript)

Kết quả:

Apple
Banana
Watermelon

Thực ra cách này nó không thực sự dừng vòng lặp forEach mà nó chỉ bỏ qua và không thực hiện đoạn code phía trong, tuy nhiên nó kết quả cuối cùng vẫn đúng như chúng ta mong muốn.

Đối với những mảng có dữ liệu lớn thì cách này không thực sự hiệu quả. Và đây có thể xem là cách kém hiệu quả nhất để dừng  forEach .

2. Sử dụng throw, try … catch

const fruits = ['Apple', 'Banana', 'Orange', 'Watermelon'];
try {
    fruits.forEach(fruit => {
        if (fruit === 'Orange') throw 'break-loop';
        console.log(fruit);
    });
} catch (error) {
    console.log(error);
}

Code language:JavaScript(javascript)

Kết quả:

Apple
Banana
break-loop
Code language:JavaScript(javascript)

Không giống như cách trên là chỉ bỏ qua code chứ không dừng vòng lặp forEach thì cách này hoàn toàn dừng được vòng lặp và kết quả vẫn đúng như thường.

Nhưng cách này là một cách gây khá nhiều tranh cãi vì không ai lại muốn văng ra lỗi ở vòng lặp cả và nó có khá nhiều rủi ro.

3. Không sử dụng forEach nữa

Nghe khá là buồn cười đúng không. Cách để dừng  forEach  chính là không sử dụng nó nữa. Vậy nếu không dùng  forEach  nữa thì dùng gì bây giờ?

Các bạn hãy bình tĩnh vẫn còn có cách nhé. Thay vì sử dụng  forEach  thì chúng ta có thể sử dụng  every  hoặc  some . Các bạn hãy xem ví dụ sau nhé:

const fruits = ['Apple', 'Banana', 'Orange', 'Watermelon'];
fruits.every(fruit => {
    if (fruit === 'Orange') return false;
    console.log(fruit);
    return true;
});

// Hoặc
fruits.some(fruit => {
    if (fruit === 'Orange') return true;
    console.log(fruit);
    return false;
});

Code language:JavaScript(javascript)

Kết quả:

Apple
Banana
Apple
Banana

Kết luận

Trên đây mình đã giới thiệu cho các bạn cách dùng vòng lặp forEach trong JavaScript cũng như cách để dừng các vòng lặp đó. Và cũng tùy vào từng trường hợp mà bạn nên chọn  for ,  while  hay dùng  forEach  để sử dụng cho thích hợp nhé.

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.