NỘI DUNG BÀI VIẾT
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.