I den här handledningen lär du dig JavaScript för … av loop med hjälp av exempel.
I JavaScript finns det tre sätt att använda en forloop.
- JavaScript för loop
- JavaScript för … i loop
- JavaScript för … of loop
Den for… ofslinga infördes i senare versioner av JavaScript ES6 .
Den for… ofslinga i JavaScript kan du iterera över iterable objekt (arrayer, uppsättningar, kartor, strängar etc).
JavaScript för … of loop
Slingans syntax for… ofär:
for (element of iterable) ( // body of for… of )
Här,
- iterable - ett iterabelt objekt (array, set, strings, etc).
- element - objekt i iterabeln
På vanlig engelska kan du läsa koden ovan som: för varje element i den iterabla, kör slingan.
för … av med Arrays
Den for… ofslinga kan användas för att iterera över en array. Till exempel,
// array const students = ('John', 'Sara', 'Jack'); // using for… of for ( let element of students ) ( // display the values console.log(element); )
Produktion
John Sara Jack
I ovanstående program används for… ofslingan för att itera över studentens arrayobjekt och visa alla dess värden.
för … av med strängar
Du kan använda for… ofloop för att iterera över strängvärden. Till exempel,
// string const string = 'code'; // using for… of loop for (let i of string) ( console.log(i); )
Produktion
koda
för … av med uppsättningar
Du kan iterera genom Set-element med hjälp av for… ofloop. Till exempel,
// define Set const set = new Set((1, 2, 3)); // looping through Set for (let i of set) ( console.log(i); )
Produktion
1 2 3
för … av med Maps
Du kan iterera genom kartelement med hjälp av for… ofslingan. Till exempel,
// 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); )
Produktion
namn- Jack ålder- 27
Användardefinierade Iteratorer
Du kan skapa en iterator manuellt och använda for… ofslingan för att iterera genom iteratorerna. Till exempel,
// 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); )
Produktion
1 2 3
för … av med generatorer
Eftersom generatorer är iterabla kan du implementera en iterator på ett enklare sätt. Då kan du iterera genom generatorerna med for… ofslingan. Till exempel,
// generator function function* generatorFunc() ( yield 10; yield 20; yield 30; ) const obj = generatorFunc(); // iteration through generator for (let value of obj) ( console.log(value); )
Produktion
10 20 30
för … av Vs för … i
| för av | för … in |
|---|---|
Den for… ofloop används för att iterera genom värden som en iterable. | Den for… inloop används för att iterera genom tangenterna hos ett objekt. |
Den for… ofslinga inte kan användas för att iterera över ett objekt. | Du kan använda för for… inatt iterera över en iterabel sådan matriser och strängar men du bör undvika att använda for… inför iterables. |
Den for… ofslingan introducerades i ES6 . Vissa webbläsare stöder kanske inte dess användning. Om du vill veta mer besöker du JavaScript för … av support.
