Iteratori e iterabili JavaScript

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… ofciclo.

Il concetto del protocollo può essere suddiviso in:

  • iterabile
  • iteratore

Il protocollo iterabile afferma che un iterabile dovrebbe avere la Symbol.iteratorchiave.

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… ofciclo 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… ofciclo 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à: valuee done.

  • valore
    La valueproprietà può essere di qualsiasi tipo di dati e rappresenta il valore corrente nella sequenza.
  • done
    La doneproprietà è un valore booleano che indica se l'iterazione è completa o meno. Se l'iterazione è incompleta, la doneproprietà è impostata su false, altrimenti è impostata su true.

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 arrIteratoroggetto.

  • Il next()metodo restituisce un oggetto con due proprietà: valuee done.
  • Quando il next()metodo raggiunge la fine della sequenza, la doneproprietà viene impostata su false.

Diamo un'occhiata a come il for… ofciclo 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… ofciclo fa esattamente lo stesso del programma sopra.

Il for… ofciclo continua a chiamare il next()metodo sull'iteratore. Una volta raggiunto done:true, il for… ofciclo 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 valuee doneproprietà.

  • 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 doneproprietà viene impostata su true, con valueas undefined.

Articoli interessanti...