У цьому посібнику ви дізнаєтесь про JavaScript для… циклу за допомогою прикладів.
У JavaScript існує три способи використання forциклу.
- JavaScript для циклу
- JavaScript для… у циклі
- JavaScript для… циклу
for… ofПетля була введена в більш пізніх версіях JavaScript ES6 .
for… ofЦикл в JavaScript дозволяє перебирати ітерацію об'єктів (масиви, набори, карти, рядки і т.д.).
JavaScript для… циклу
Синтаксис for… ofциклу:
for (element of iterable) ( // body of for… of )
Ось,
- iterable - ітерабельний об'єкт (масив, набір, рядки тощо).
- елемент - елементи в ітерабельному
На простому англійській мові ви можете прочитати наведений вище код так: для кожного елемента в ітерації запустіть тіло циклу.
за… з із масивами
for… ofЦикл може бути використаний для перебору масиву. Наприклад,
// array const students = ('John', 'Sara', 'Jack'); // using for… of for ( let element of students ) ( // display the values console.log(element); )
Вихідні дані
Джон Сара Джек
У наведеній вище програмі for… ofцикл використовується для перегляду об'єкта масиву студентів та відображення всіх його значень.
для… з за допомогою рядків
Ви можете використовувати for… ofцикл для перебору рядкових значень. Наприклад,
// string const string = 'code'; // using for… of loop for (let i of string) ( console.log(i); )
Вихідні дані
код
за… з наборами
Ви можете перебирати елементи Set за допомогою for… ofциклу. Наприклад,
// define Set const set = new Set((1, 2, 3)); // looping through Set for (let i of set) ( console.log(i); )
Вихідні дані
1 2 3
на… з Картами
Ви можете перебирати елементи Map за допомогою for… ofциклу. Наприклад,
// 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); )
Вихідні дані
ім'я- Джек вік- 27
Визначені користувачем ітератори
Ви можете створити ітератор вручну і використовувати for… ofцикл для ітерації по ітераторам. Наприклад,
// 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); )
Вихідні дані
1 2 3
за… з генераторами
Оскільки генератори є ітерабельними, ви можете реалізувати ітератор простіше. Потім ви можете перебирати генератори за допомогою for… ofциклу. Наприклад,
// generator function function* generatorFunc() ( yield 10; yield 20; yield 30; ) const obj = generatorFunc(); // iteration through generator for (let value of obj) ( console.log(value); )
Вихідні дані
10 20 30
за… проти V… за
| протягом… з | для … в |
|---|---|
for… ofЦикл використовується для перебору значень ітератора. | for… inЦикл використовується для перебору ключів об'єкта. |
for… ofЦикл не може бути використаний для перебору об'єкта. | Ви можете використовувати for… inдля ітерації над ітерабельними такі масиви та рядки, але вам слід уникати використання for… inдля ітерацій. |
for… ofЦикл був введений в ES6 . Деякі браузери можуть не підтримувати його використання. Щоб дізнатись більше, відвідайте JavaScript для… підтримки.
