In questo tutorial imparerai a conoscere JavaScript per … of loop con l'aiuto di esempi.
In JavaScript, ci sono tre modi in cui possiamo usare un forciclo.
- JavaScript per loop
- JavaScript per … in loop
- JavaScript per … of loop
Il for… ofciclo è stato introdotto nelle versioni successive di JavaScript ES6 .
Il for… ofciclo in JavaScript ti consente di iterare su oggetti iterabili (array, set, mappe, stringhe ecc.).
JavaScript per … of loop
La sintassi del for… ofciclo è:
for (element of iterable) ( // body of for… of )
Qui,
- iterabile - un oggetto iterabile (array, set, stringhe, ecc.).
- elemento : elementi nell'iterabile
In inglese semplice, puoi leggere il codice sopra come: per ogni elemento nell'iterabile, esegui il corpo del ciclo.
per … o con gli array
Il for… ofciclo può essere utilizzato per iterare su un array. Per esempio,
// array const students = ('John', 'Sara', 'Jack'); // using for… of for ( let element of students ) ( // display the values console.log(element); )
Produzione
John Sara Jack
Nel programma precedente, il for… ofciclo viene utilizzato per iterare sull'oggetto array degli studenti e visualizzare tutti i suoi valori.
per … of with Strings
È possibile utilizzare il for… ofciclo per iterare sui valori di stringa. Per esempio,
// string const string = 'code'; // using for… of loop for (let i of string) ( console.log(i); )
Produzione
codice
per … di con i set
Puoi scorrere gli elementi Set utilizzando il for… ofciclo. Per esempio,
// define Set const set = new Set((1, 2, 3)); // looping through Set for (let i of set) ( console.log(i); )
Produzione
1 2 3
per … o con Maps
È possibile scorrere gli elementi della mappa utilizzando il for… ofciclo. Per esempio,
// 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); )
Produzione
nome- Jack età- 27 anni
Iteratori definiti dall'utente
Puoi creare un iteratore manualmente e utilizzare il for… ofciclo per scorrere gli iteratori. Per esempio,
// 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); )
Produzione
1 2 3
per … o con i generatori
Poiché i generatori sono iterabili, è possibile implementare un iteratore in un modo più semplice. Quindi puoi scorrere i generatori usando il for… ofciclo. Per esempio,
// generator function function* generatorFunc() ( yield 10; yield 20; yield 30; ) const obj = generatorFunc(); // iteration through generator for (let value of obj) ( console.log(value); )
Produzione
10 20 30
per … di Vs per … in
| per … di | per … in |
|---|---|
Il for… ofciclo viene utilizzato per scorrere i valori di un iterabile. | Il for… inciclo viene utilizzato per scorrere le chiavi di un oggetto. |
Il for… ofciclo non può essere utilizzato per iterare su un oggetto. | Puoi usarlo for… inper iterare su un tipo iterabile di array e stringhe, ma dovresti evitare di usare for… inper iterabili. |
Il for… ofciclo è stato introdotto in ES6 . Alcuni browser potrebbero non supportarne l'utilizzo. Per saperne di più, visita JavaScript per … of Support.
