Video học lập trình mỗi ngày

Nói đến for loop hay array.forEach thì hầu như trong developers javascript nào cũng biết và đã sủ dụng biết bao nhiêu vô kể trong code của mình. Nhưng có một ngày nào bạn nhìn lại và suy nghĩ nó khác gì, và tại sao có for rồi tại sao sinh ra array.forEach không? Trong bài này chúng tôi sẽ cùng các devjs tìm hiểu thêm về chủ đề này.

Tham gia cùng chúng tôi:

Facebook: Cộng đồng lập trình javascript

Facebook Thảo luận về Javascript, ReactJS, VueJS, AngularJS Việt Nam

Đầu tiên nói về cú pháp: 

1 - cú pháp for và forEach

for (var i = 0; i < array.length; i++){ /* ... */ }
và
array.forEach(function(item, index){ /* ... */ });

Vậy for và forEach trong javascript khác nhau những gì? 

2 - Sự khác nhau giữa for và forEach.

- với for 

    + bạn có thể sử dụng break để thoát ra khỏi vòng for 

    + Có thể dùng lệnh continue để đi tới vòng kế tiếp 

+ performance đương nhiên là nhanh hơn forEach 

+ scope của index luôn luôn ở trong vòng for. 

- với forEach 

+ continue không có trong forEach, nhưng chúng ta có thể sự dụng return trong forEach để thay thế chúng.

ví dụ:

      var myArr = [1,2,3,4];
//return in forEach
myArr.forEach(function(elem){
if (elem === 3) {
return;
}

console.log(elem); //1,2,4
});
//continue in for
for(var i = 0; i < myArr.length; i++){
if (myArr[i] === 3) {
continue;
}

console.log(myArr[i]); //1,2,4
}

+ continue có thể thay thế nhưng break thì không. Bạn không có cách nào để dùng break trong forEach. 

+ scope index trong internal function. 

+ forEach nhìn code đẹp hơn kakaka, ai cũng đồng ý điều này.

 - Về performance thì chúng ta không cần bàn vì ai cũng biết forEach không có tuổi so với for. 

- Còn về scope thì chúng tôi sẽ nói rõ hơn về vấn đề này, vì điều này rất quan trọng, để dễ hình dung hơn chúng tôi sẽ lấy một ví dụ để các bạn hiểu hơn.

    var elements = ["element1", "element2", "element3"];
//và đây cũng chính là vì sao forEach lại ra đời.

elements.forEach(function(element) {
// The asynchronous action simulator
setTimeout(function() {
console.log(element);
}, 100);
});
//result: 
(index):39 element1
(index):39 element2
(index):39 element3

//và khi sử dụng for nguyên thủy =]

for (var i = 0; i < elements.length; i++) {
setTimeout(function() {
console.log(elements[i]);
}, 100);
}
//result: 
(index):39 undefined
(index):39 undefined
(index):39 undefined

Tại sao lại như vậy thì đó là do phạm vi của index hay nói chuyên nghiệp hơn là scope index. Thực chất khi dùng for thì index i vẫn không sai cho đến khi nhận ra giá trị i =3 cho nên mới print ra undefined.  Bạn nào chưa hiểu thì có thể đặt câu hỏi comment trong bài viết này nhé. 

Nhưng từ khi có sự khai báo với biến let thì chuyện này không còn phức tạp nữa. 

//và khi sử dụng for nguyên thủy với scope i đươc khai báo với let =]]

    for (let i = 0; i < elements.length; i++) {
setTimeout(function() {
console.log(elements[i]);
}, 100);
}
//result: 
(index):39 element1
(index):39 element2
(index):39 element3

Check code:

Tham gia cùng chúng tôi:

Facebook: Cộng đồng lập trình javascript

Facebook Thảo luận về Javascript, ReactJS, VueJS, AngularJS Việt Nam

Các bạn có thể run code ở đây để tìm hiểu thêm.https://jsfiddle.net/ze9oLpar/1/

Tham khảo thêm : 

https://medium.com/@abustamam/for-loops-vs-foreach-in-javascript-7a977278a39e

http://researchhubs.com/post/computing/javascript/for-loop-vs-foreach-in-javascript.html

https://stackoverflow.com/questions/31399411/go-to-next-iteration-in-javascript-foreach-loop