В този урок ще научите за JavaScript за … на цикъл с помощта на примери.
В JavaScript има три начина, по които можем да използваме forцикъл.
- JavaScript за цикъл
- JavaScript за … в цикъл
- JavaScript за … на цикъл
На for… ofлиния е въведена в по-късните версии на JavaScript ES6 .
На for… ofлиния в JavaScript ви позволява да обхождане iterable обекти (масиви, комплекти, карти, струни и т.н.).
JavaScript за … на цикъл
Синтаксисът на for… ofцикъла е:
for (element of iterable) ( // body of for… of )
Тук,
- iterable - обект, който може да се итерира (масив, набор, низове и т.н.).
- елемент - елементи в итерируемия
На обикновен английски можете да прочетете горния код като: за всеки елемент в итерируемия стартирайте тялото на цикъла.
за … на с 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цикъл, за да прегледате низовите стойности. Например,
// 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
за … от Vs за … в
| за … от | за … в |
|---|---|
В for… ofлиния се използва за обхождане чрез стойностите на един iterable. | В for… inлиния се използва за обхождане чрез клавишите на даден обект. |
В for… ofлиния не може да се използва за обхождане обект. | Можете да използвате for… inза итерация върху итерабилни такива масиви и низове, но трябва да избягвате използването for… inза итерации. |
В for… ofбримката е въведена в ES6 . Някои браузъри може да не поддържат използването му. За да научите повече, посетете JavaScript за … за поддръжка.
