In deze tutorial leer je met behulp van voorbeelden over JavaScript for… of loop.
In JavaScript zijn er drie manieren waarop we een forlus kunnen gebruiken .
- JavaScript voor loop
- JavaScript voor … in loop
- JavaScript voor … of loop
De for… oflus is geïntroduceerd in de latere versies van JavaScript ES6 .
Met de for… oflus in JavaScript kunt u itereerbare objecten herhalen (arrays, sets, kaarten, strings enz.).
JavaScript voor … of loop
De syntaxis van de for… oflus is:
for (element of iterable) ( // body of for… of )
Hier,
- iterable - een itereerbaar object (array, set, strings, enz.).
- element - items in de iterabele
In gewoon Engels kun je de bovenstaande code lezen als: voer voor elk element in de iterabele de body van de lus uit.
voor … of met arrays
De for… oflus kan worden gebruikt om over een array te herhalen. Bijvoorbeeld,
// array const students = ('John', 'Sara', 'Jack'); // using for… of for ( let element of students ) ( // display the values console.log(element); )
Uitvoer
John Sara Jack
In het bovenstaande programma wordt de for… oflus gebruikt om het array-object van de student te herhalen en al zijn waarden weer te geven.
voor … of met strijkers
U kunt for… ofloop gebruiken om tekenreekswaarden te herhalen. Bijvoorbeeld,
// string const string = 'code'; // using for… of loop for (let i of string) ( console.log(i); )
Uitvoer
code
voor… of met sets
U kunt Set-elementen doorlopen met behulp van de for… oflus. Bijvoorbeeld,
// define Set const set = new Set((1, 2, 3)); // looping through Set for (let i of set) ( console.log(i); )
Uitvoer
1 2 3
voor… of met Kaarten
U kunt kaartelementen doorlopen met behulp van de for… oflus. Bijvoorbeeld,
// 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); )
Uitvoer
naam - Jack leeftijd - 27
Door de gebruiker gedefinieerde iteratoren
U kunt handmatig een iterator maken en de for… oflus gebruiken om door de iteratoren te lopen. Bijvoorbeeld,
// 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); )
Uitvoer
1 2 3
voor… of met generatoren
Aangezien generatoren iterables zijn, kunt u een iterator op een eenvoudigere manier implementeren. Vervolgens kunt u de generatoren doorlopen met behulp van de for… oflus. Bijvoorbeeld,
// generator function function* generatorFunc() ( yield 10; yield 20; yield 30; ) const obj = generatorFunc(); // iteration through generator for (let value of obj) ( console.log(value); )
Uitvoer
10 20 30
voor … van Vs voor … in
| voor … van | voor in |
|---|---|
De for… oflus wordt gebruikt om de waarden van een iterabele te doorlopen. | De for… inlus wordt gebruikt om de sleutels van een object te doorlopen. |
De for… oflus kan niet worden gebruikt om een object te herhalen. | U kunt gebruiken for… inom iteraties te herhalen, zoals arrays en strings, maar u moet het gebruik for… invoor iterables vermijden . |
De for… oflus is geïntroduceerd in ES6 . Sommige browsers ondersteunen het gebruik ervan mogelijk niet. Ga voor meer informatie naar JavaScript voor… of Support.
