Sự khác biệt giữa forEach và vòng lặp trong javascript

Question

Tôi tự hỏi: Có sự khác biệt đáng kể nào giữa vòng lặp forEach và for trong JavaScript hay không.

Hãy xem xét ví dụ sau:

var myArray = [1,2,3,4]; 

myArray.forEach(function(value) { 
    console.log(value); 
}); 

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

Dưới đây là một phần của nghiên cứu của tôi:

1. Performance: Theo JsPerf: forEach rất ít chậm hơn so với vòng lặp for.
2. Tính khả dụng: Không có cách nào chúng tôi có thể ngắt/trả lại từ cuộc gọi lại trong trường hợp vòng lặp forEach.

Ví dụ: Bạn muốn tìm hiểu xem một số có phải là số nguyên tố hay không. Tôi nghĩ rằng việc sử dụng cho vòng lặp là dễ dàng hơn nhiều so với sử dụng vòng lặp forEach để làm điều này.

3. Dễ đọc: Sử dụng cho vòng lặp giúp mã dễ đọc hơn so với việc có trong mã.
4. Khả năng tương thích của trình duyệt: forEach không được hỗ trợ trong IE < 9 Vì vậy, giới thiệu một số shim trong mã của chúng tôi.

Câu hỏi của tôi là:

1. những ưu điểm của foreach là gì so với cho vòng lặp?
2. Trong trường hợp nào, forEach thích hợp hơn.
3. Tại sao thậm chí nó lại được đưa vào JavaScript? Tại sao nó lại cần thiết?

Answer 1

forEach là phương pháp trên nguyên mẫu Array. Nó lặp qua từng phần tử của một mảng và chuyển nó tới hàm gọi lại.

Vì vậy, về cơ bản, forEach là một phương pháp viết tắt cho việc sử dụng hợp cụ thể "vượt qua mỗi phần tử của một array đến một function". Dưới đây là một ví dụ phổ biến mà tôi nghĩ Array.forEach là khá hữu ích, so với một vòng lặp for:

// shortcut for document.querySelectorAll 
function $$(expr, con) { 
    return Array.prototype.slice.call((con || document).querySelectorAll(expr)); 
} 

// hide an element 
function hide(el) { 
    el.style.display = 'none'; 
} 

// hide all divs via forEach 
$$('div').forEach(hide); 

// hide all divs via for 
for (var divs = $$('div'), i = 0; i < divs.length; i++) { 
    hide(divs[i]) 
} 

Như bạn có thể thấy, khả năng đọc bản tuyên bố foreach được cải thiện so với một vòng lặp for.

Mặt khác, câu lệnh for linh hoạt hơn: nó không nhất thiết liên quan đến mảng. Hiệu suất của một vòng lặp bình thường for là tốt hơn một chút, bởi vì không có cuộc gọi hàm cho mỗi phần tử liên quan. Mặc dù vậy, bạn nên tránh các vòng for khi nó có thể được viết dưới dạng tuyên bố forEach.

Answer 2

Trong vòng lặp forEach bạn không kiểm soát cách bạn lặp qua mảng. Vòng lặp for cổ điển cho phép bạn chọn thuật toán lặp như bạn muốn (i++; i--; i+=2*i, v.v ...).

Tuy nhiên, một vòng lặp forEach là dễ dàng hơn để sử dụng - bạn không cần phải gây rối với tất cả các đếm i, việc tìm kiếm các đối tượng array[i] - JS nào đó cho bạn.

Answer 3

>> sparseArray = [1, 2, , 4]; 

>> sparseArray.forEach(console.log, console); 
1 0 [1, 2, 3: 4] 
2 1 [1, 2, 3: 4] 
4 3 [1, 2, 3: 4] 

>> for(var i = 0; i < sparseArray.length; ++i) { console.log(sparseArray[i]) }; 
1 
2 
undefined 
4 

forEach là sự bổ sung gần đây để tạo phong cách hiểu danh sách biểu cảm trong javascript. Ở đây bạn có thể thấy rằng forEachbỏ qua các yếu tố chưa bao giờ được đặt, nhưng tốt nhất bạn có thể làm với vòng lặp for là kiểm tra undefined hoặc null, cả hai yếu tố này có thể được đặt làm giá trị và được chọn bởi forEach. Trừ khi bạn mong đợi các giá trị bị thiếu, forEach tương đương với for vòng, nhưng lưu ý rằng bạn không thể dừng sớm, mà bạn cần every.