Trong hướng dẫn này, bạn sẽ học về JavaScript for… of loop với sự trợ giúp của các ví dụ.
Trong JavaScript, có ba cách chúng ta có thể sử dụng forvòng lặp.
- JavaScript cho vòng lặp
- JavaScript cho… trong vòng lặp
- JavaScript for… of loop
Các for… ofvòng lặp đã được giới thiệu trong các phiên bản sau này của JavaScript ES6 .
Các for… ofvòng lặp trong JavaScript cho phép bạn lặp qua các đối tượng iterable (mảng, bộ, bản đồ, dây vv).
JavaScript for… of loop
Cú pháp của for… ofvòng lặp là:
for (element of iterable) ( // body of for… of )
Đây,
- có thể lặp lại - một đối tượng có thể lặp lại (mảng, tập hợp, chuỗi, v.v.).
- phần tử - các mục trong có thể lặp lại
Bằng tiếng Anh đơn giản, bạn có thể đọc đoạn mã trên như: đối với mọi phần tử trong vòng lặp có thể lặp lại, hãy chạy phần nội dung của vòng lặp.
cho… trong số với Mảng
Các for… ofvòng lặp có thể được sử dụng để lặp qua một mảng. Ví dụ,
// array const students = ('John', 'Sara', 'Jack'); // using for… of for ( let element of students ) ( // display the values console.log(element); )
Đầu ra
John Sara Jack
Trong chương trình trên, for… ofvòng lặp được sử dụng để lặp qua đối tượng mảng sinh viên và hiển thị tất cả các giá trị của nó.
cho… của với Strings
Bạn có thể sử dụng for… ofvòng lặp để lặp qua các giá trị chuỗi. Ví dụ,
// string const string = 'code'; // using for… of loop for (let i of string) ( console.log(i); )
Đầu ra
mã
cho… trong số với Bộ
Bạn có thể lặp qua các phần tử Đặt bằng for… ofvòng lặp. Ví dụ,
// define Set const set = new Set((1, 2, 3)); // looping through Set for (let i of set) ( console.log(i); )
Đầu ra
1 2 3
cho… của với Maps
Bạn có thể lặp qua các phần tử Bản đồ bằng cách sử dụng for… ofvòng lặp. Ví dụ,
// define Map let map = new Map(); // inserting elements map.set('name', 'Jack'); map.set('age', '27'); // looping through Map for (let (key, value) of map) ( console.log(key + '- ' + value); )
Đầu ra
tên- Jack tuổi- 27
Trình lặp do người dùng xác định
Bạn có thể tạo một trình vòng lặp theo cách thủ công và sử dụng for… ofvòng lặp để lặp qua các trình vòng lặp. Ví dụ,
// creating iterable object const iterableObj = ( // iterator method (Symbol.iterator)() ( let step = 0; return ( next() ( step++; if (step === 1) ( return ( value: '1', done: false); ) else if (step === 2) ( return ( value: '2', done: false); ) else if (step === 3) ( return ( value: '3', done: false); ) return ( value: '', done: true ); ) ) ) ) // iterating using for… of for (const i of iterableObj) ( console.log(i); )
Đầu ra
1 2 3
cho… của với Máy phát điện
Vì trình tạo có thể lặp lại, bạn có thể triển khai trình lặp theo cách dễ dàng hơn. Sau đó, bạn có thể lặp lại qua các trình tạo bằng for… ofvòng lặp. Ví dụ,
// generator function function* generatorFunc() ( yield 10; yield 20; yield 30; ) const obj = generatorFunc(); // iteration through generator for (let value of obj) ( console.log(value); )
Đầu ra
10 20 30
for… of Vs for… in
| cho… trong số | tại |
|---|---|
Các for… ofvòng lặp được sử dụng để lặp qua các giá trị của một iterable. | Các for… invòng lặp được sử dụng để lặp qua các phím của một đối tượng. |
Các for… ofvòng lặp không thể được sử dụng để lặp qua một đối tượng. | Bạn có thể sử dụng for… inđể lặp lại các mảng và chuỗi có thể lặp lại như vậy nhưng bạn nên tránh sử dụng for… incho các chuỗi lặp. |
Các for… ofvòng lặp đã được giới thiệu trong ES6 . Một số trình duyệt có thể không hỗ trợ việc sử dụng nó. Để tìm hiểu thêm, hãy truy cập JavaScript for… of Support.
