Cấp bậc tác giả:

TRAINING

Một số điều cần biết khi sử dụng forEach

Được viết bởi webmaster ngày 02/11/2019 lúc 10:05 AM
Bài viết lần này mình sẽ giới thiệu về những điều có thể lập trình viên javascripts chưa biết về forEach
  • 0
  • 47

Một số điều cần biết khi sử dụng forEach

Loading...

Bài viết lần này mình sẽ giới thiệu về những điều có thể lập trình viên javascripts chưa biết về forEach

Return không dừng được vòng lặp
Code mẫu 

array = [1, 2, 3, 4];
array.forEach(function (element) {
  console.log(element);
  
  if (element === 2) 
    return;
  
});

Với đoạn code trên thì bạn sẽ nghĩ output sẽ là gì, liệu có phải là 1, 2 ?

Nếu nghĩ như vậy thì bạn hãy f12 ngay tại bài viết này và paste đoạn code trên vào phần Console để kiểm chứng kết quả.

Để lí giải cho việc này thì các bạn có thể hiểu là chúng ta đã truyền callback vào hàm forEach, chúng được coi như những hàm thông thường và được apply vào từng phẩn tử trong forEach, do đó khi return chúng chỉ return khỏi hàm callback chứ không phá toàn bộ hàm forEach.

Hãy thử viết lại đoạn code bên trên :

const array = [1, 2, 3, 4];
const callback = function(element) {
    console.log(element);
    
    if (element === 2) 
      return; // would this make a difference? no.
    console.log(element);
}
for (let i = 0; i < array.length; i++) {
    callback(array[i]);
}

Đoạn code bên trên sẽ trả về kết quả

1
1
2
3
3
4
4

Từ kết quả trên có thể thấy return đã phá hàm callback ở phần tử 2 tuy nhiên không thể phá toàn bộ vòng lặp ở bên ngoài.

Không thể ‘break’
Không return được thì có break được không ? Các bạn có thể thí nghiệm ngay bằng hàm sau

const array = [1, 2, 3, 4];
array.forEach(function(element) {
  console.log(element);
  
  if (element === 2) 
    break;
});

Thậm chí ở đây nó còn hiển thị đống lỗi đỏ lòm cơ Illegal break statement

Vậy với những trường hợp như vậy thì sẽ xử lý như thế nào ?

=> Quay lại với những gì sơ khai nhất thôi, một vòng for truyền thống có thể giải quyết vấn đề đó :

const array = [1, 2, 3, 4];
for (let i = 0; i < array.length; i++) {
  console.log(array[i]);
  
  if (array[i] === 2) 
    break;
}

Và tất nhiên cũng không thể ‘continue’
Đến cả break và return còn gãy thì hẳn continue cũng sẽ không thể có kết cục tốt đẹp hơn được. Nhưng chúng ta cũng thử chạy thử xem nó ra cái gì nhé :

const array = [1, 2, 3, 4];
array.forEach(function (element) {
  if (element === 2) 
    continue;
  
  console.log(element);
});

Kết quả là nó cũng báo lỗi y hệt như break: Illegal continue statement: no surrounding iteration statement

Vậy thì cách khắc phục cũng sẽ tương tự như break thôi, lại sử dụng vòng for truyền thống :

for (let i = 0; i < array.length; i++) {
  if (array[i] === 2) 
    continue;
  
  console.log(array[i]);
}

Nguồn bài viết: TechTalk

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

Loading...

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML