chào mọi người, ở bài trước mình đã có chia sẻ về cú pháp Spread syntax trong Javascript ES6, thì hôm nay mình sẽ tiếp tục nói một bài nữa về ES6 đó là for-of trong ES6. mở bài ngắn gọn, đơn giản, xúc tích. 😀

Từ trước giờ dùng for thì cú pháp nó sẽ như này:

let arr = [1, 2, 3, 4, 5, 6],    
    length = arr.length,    
    i;
for (i = 0; i < length; i++) { 
    console.log(arr[i])
}
// output: 1 2 3 4 5 6

cách dùng for loop này thì không có gì là sai cả, nhưng nhìn vào cái đống ở trên thì feel like ohhh, so much code for today. :)))

hoặc là dùng for-in:

let arr = [1, 2, 3, 4, 5, 6],
    i;
for (i in arr) {
    console.log(arr[i])
}
// output: 1 2 3 4 5 6

for-in loop thì cho cảm giác code nhìn rất là ngắn luôn, nhưng for-in lại có một nhược điểm là có thể đọc luôn các cái thuộc tính trong mảng đó (ví dụ như length), những phiên bản cũ của IE mới làm điều này. nói chung thì người ta không khuyên dùng cái for-in này.
thêm một cách nữa là forEach:

let arr = [1, 2, 3, 4, 5, 6]

arr.forEach((value, index)=> {
    console.log(value)
});
// output: 1 2 3 4 5 6

forEach loop sẽ sử dụng callback function để in value và index ra, nhưng vì dùng callback nên forEach có một nhược điểm là không thể dùng break để thoát khỏi loop được vì break chỉ dùng trong loop thôi, nên khi gọi break trong callback thì sẽ bị syntax error ngay.

Và bây giờ đến nhân vật chính của bài blog này làfor-of:

let arr = [1, 2, 3, 4, 5, 6]

for (let value of arr) {
    console.log(value)
}
// output: 1 2 3 4 5 6

for-of loop cú pháp sẽ tương tự như for-in nhưng for-in sẽ đọc các key của array và for-of sẽ đọc các value của array đó. Chúng ta có thể dùng continue, break, trong for-of tương tự với for. Giờ thì rất dễ để lấy các giá trị của một array ra rồi nhé, không cần phải let i = 0; i++ cái gì nữa :))

Đấy, chỉ giới thiệu mỗi cái for-of mà mình cũng viết ra được một mớ chữ rồi, các bác đọc bài có chỗ nào khó hiểu hay muốn góp ý phần nào đó thì cứ comment thẳng tay ở dưới giúp mình nhé. 😀 cám ơn các bác…

Advertisements