In questo tutorial imparerai a conoscere gli iteratori e gli iterabili JavaScript con l'aiuto di esempi.
Iterabili e iteratori JavaScript
JavaScript fornisce un protocollo per iterare su strutture di dati. Questo protocollo definisce il modo in cui queste strutture di dati vengono iterate utilizzando il for… of
ciclo.
Il concetto del protocollo può essere suddiviso in:
- iterabile
- iteratore
Il protocollo iterabile afferma che un iterabile dovrebbe avere la Symbol.iterator
chiave.
Iterable JavaScript
Le strutture dati che hanno il Symbol.iterator()
metodo sono chiamate iterabili. Ad esempio, array, stringhe, set, ecc.
Iteratori JavaScript
Un iteratore è un oggetto restituito dal Symbol.iterator()
metodo.
Il protocollo iteratore fornisce il next()
metodo per accedere a ogni elemento dell'iterabile (struttura dati) uno alla volta.
Diamo un'occhiata a un esempio di iterabili con estensione Symbol.Iterator()
const arr = (1, 2 ,3); // calling the Symbol.iterator() method const arrIterator = arr(Symbol.iterator)(); // gives Array Iterator console.log(arrIterator); const str = 'hello'; // calling the Symbol.iterator() method const strIterator = str(Symbol.iterator)(); // gives String Iterator console.log(strIterator);
Produzione
Array Iterator () StringIterator ()
In questo caso, la chiamata al Symbol.iterator()
metodo dell'array e della stringa restituisce i rispettivi iteratori.
Iterate Through Iterables
È possibile utilizzare il for… of
ciclo per scorrere questi oggetti iterabili. Puoi iterare attraverso il Symbol.iterator()
metodo in questo modo:
const number = ( 1, 2, 3); for (let n of number(Symbol.iterator)()) ( console.log(n); )
Produzione
1 2 3
Oppure puoi semplicemente scorrere l'array in questo modo:
const number = ( 1, 2, 3); for (let n of number) ( console.log(n); )
Qui, l'iteratore consente al for… of
ciclo di iterare su un array e restituire ogni valore.
Metodo JavaScript next ()
L'oggetto iteratore ha un next()
metodo che restituisce l'elemento successivo nella sequenza.
Il next()
metodo contiene due proprietà: value
e done
.
- valore
Lavalue
proprietà può essere di qualsiasi tipo di dati e rappresenta il valore corrente nella sequenza. - done
Ladone
proprietà è un valore booleano che indica se l'iterazione è completa o meno. Se l'iterazione è incompleta, ladone
proprietà è impostata sufalse
, altrimenti è impostata sutrue
.
Diamo un'occhiata a un esempio di iterabili di array:
const arr = ('h', 'e', 'l', 'l', 'o'); let arrIterator = arr(Symbol.iterator)(); console.log(arrIterator.next()); // (value: "h", done: false) console.log(arrIterator.next()); // (value: "e", done: false) console.log(arrIterator.next()); // (value: "l", done: false) console.log(arrIterator.next()); // (value: "l", done: false) console.log(arrIterator.next()); // (value: "o", done: false) console.log(arrIterator.next()); // (value: undefined, done: true)
Puoi chiamare next()
ripetutamente per iterare su un arrIterator
oggetto.
- Il
next()
metodo restituisce un oggetto con due proprietà:value
edone
. - Quando il
next()
metodo raggiunge la fine della sequenza, ladone
proprietà viene impostata sufalse
.
Diamo un'occhiata a come il for… of
ciclo esegue il programma sopra. Per esempio,
const arr = ('h', 'e', 'l', 'l', 'o'); for (let i of arr) ( console.log(i); )
Produzione
Ciao
Il for… of
ciclo fa esattamente lo stesso del programma sopra.
Il for… of
ciclo continua a chiamare il next()
metodo sull'iteratore. Una volta raggiunto done:true
, il for… of
ciclo termina.
Iteratore definito dall'utente
Puoi anche creare il tuo iteratore e chiamare next()
per accedere all'elemento successivo. Per esempio,
function displayElements(arr) ( // to update the iteration let n = 0; return ( // implementing the next() function next() ( if(n < arr.length) ( return ( value: arr(n++), done: false ) ) return ( value: undefined, done: true ) ) ) ) const arr = ('h', 'e', 'l', 'l', 'o'); const arrIterator = displayElements(arr); console.log(arrIterator.next()); console.log(arrIterator.next()); console.log(arrIterator.next()); console.log(arrIterator.next()); console.log(arrIterator.next()); console.log(arrIterator.next());
Produzione
(valore: "h", done: false) (value: "e", done: false) (value: "l", done: false) (value: "l", done: false) (value: "o" , done: false) (value: undefined, done: true)
Nel programma sopra, abbiamo creato il nostro iteratore. La displayElements()
funzione restituisce value
e done
proprietà.
- Ogni volta
next()
che viene chiamato il metodo, la funzione viene eseguita una volta e visualizza il valore di un array. - Infine, quando tutti gli elementi di un array sono esauriti, la
done
proprietà viene impostata sutrue
, convalue
asundefined
.