NỘI DUNG BÀI VIẾT
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()
![Cách dừng vòng lặp forEach trong JavaScript 2 Js Foreach Loop](https://i0.wp.com/2.bp.blogspot.com/-uTlyUrfd5dI/XCtowQ59i4I/AAAAAAAAALo/JBl9RN_HcPYrSbBYR0KUYm_Pmws4Ir12ACLcBGAs/s640/jslogo.png?w=750&ssl=1)
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()
![Cách dừng vòng lặp forEach trong JavaScript 3 Beginner Goodies: Is JavaScript Array.forEach Asynchronous? | by Leland Zach | Medium](https://i0.wp.com/miro.medium.com/max/1838/1*APUBEVlGiALCIPH414QugA.png?w=750&ssl=1)
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.