В этом руководстве вы узнаете о JavaScript for… of цикла с помощью примеров.
В JavaScript есть три способа использования forцикла.
- JavaScript для цикла
- JavaScript для… в цикле
- JavaScript для… цикла
for… ofПетля была введена в более поздних версиях JavaScript ES6 .
for… ofЦикл в JavaScript позволяет перебирать итерацию объектов (массивы, наборы, карты, строки и т.д.).
JavaScript для… цикла
Синтаксис for… ofцикла:
for (element of iterable) ( // body of for… of )
Вот,
- iterable - итеративный объект (массив, набор, строки и т. д.).
- element - элементы в итерируемом
На простом английском языке вы можете прочитать приведенный выше код как: для каждого элемента в итерации запустить тело цикла.
for… of with Arrays
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 со строками
Вы можете использовать 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
на… из с Картами
Вы можете перебирать элементы карты с помощью 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 для… поддержки.
