Trong hướng dẫn này, mình sẽ giới thiệu cho bạn về câu lệnh for … of trong js cho phép bạn tạo một vòng lặp lặp qua một đối tượng có thể lặp lại
ES6 đã giới thiệu một cấu trúc mới for … of tạo ra một vòng lặp lại trên đối tượng có thể lắp lại như Array, Map, Set hoặc bất kỳ đối tượng nào có thể lặp.
Dưới đây là ví dụ cho for … of
1 2 3 4 | for (variable of iterable) { // statements } |
Các bạn cùng xem một số ví dụ về việc sử dụng for … of
Array
Ví dụ sau cho bạn thấy cách sử dụng for … of để lặp qua các phần tử của một mảng
1 2 3 4 5 6 7 8 9 | let scores = [10, 20, 30]; for (let score of scores) { score = score + 5; console.log(score); } // 15 // 25 // 35 |
Nếu bạn không thay đổi biến bên trong vòng lặp, bạn nên sử dụng const thay vì let như sau:
1 2 3 4 5 6 7 | for (const score of scores) { console.log(score); } // 10 // 20 // 30 |
String
Ví dụ sau cho bạn thấy cách sử dụng for … of để lặp qua các phần tử của một chuỗi
1 2 3 4 5 6 7 8 | let str = 'abc'; for (let c of str) { console.log(c); } // a // b // c |
Map
Ví dụ sau cho bạn thấy cách sử dụng for … of để lặp qua các phần tử của một map
1 2 3 4 5 6 7 8 9 10 11 12 13 | var colors = new Map(); colors.set('red', '#ff0000'); colors.set('green', '#00ff00'); colors.set('blue', '#0000ff'); for (let color of colors) { console.log(color); } // ["red", "#ff0000"] // ["green", "#00ff00"] // ["blue", "#0000ff"] |
Set
Ví dụ sau cho bạn thấy cách sử dụng for … of để lặp qua các phần tử của một set
1 2 3 4 5 6 7 8 9 | let nums = new Set([1, 2, 3]); for (let num of nums) { console.log(num); // } // 1 // 2 // 3 |
for…of vs. for…in
Vòng lặp for … in lặp qua tất cả các thuộc tính có thể liệt kê của một đối tượng. Nó không lặp lại qua một tập hợp như Array, Map, Set
Không giống như vòng lặp for … in, vòng lặp for … of lặp lại một tập hợp, thay vì một đối tượng. Trên thực tế, for … of lặp qua các phần tử của bất kỳ tập hợp nào có thuộc tính [Symbol.iterator].
Ví dụ sau minh họa sự khác biệt giữa for … of và for … in
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | let numbers = [6, 7, 8]; numbers.foo = "foo"; for (let i in numbers) { console.log(i); } // 0 // 1 // 2 // foo for (let i of numbers) { console.log(i); } // 6 // 7 // 8 |
Trong bài viết này, mình đã cách sử dụng for … of trong js để lặp qua một collection
Hẹn các bạn ở bài viết tiếp theo