CodeGym /Corsi /Frontend SELF IT /Iterables e Iterators

Iterables e Iterators

Frontend SELF IT
Livello 45, Lezione 0
Disponibile

1.1 Concetti di base

Gli iterators e gli iterables in JavaScript sono concetti fondamentali che permettono agli oggetti di essere percorribili. Questi concetti sono ampiamente utilizzati nel moderno JavaScript, specialmente in costruzioni come i cicli for...of, l'operatore di spread, la destrutturazione e molti altri. In questa lezione vedremo cosa sono gli iterables e gli iterators, come funzionano e come crearli e usarli.

Iterables (Oggetti iterabili)

Gli oggetti iterabili sono oggetti che implementano il protocollo di iterazione. Devono avere un metodo speciale con la chiave [Symbol.iterator], che restituisce un oggetto iteratore.

Iterators (Iteratori)

Un iteratore è un oggetto con il metodo next(), che restituisce un oggetto con due proprietà:

  • value — il valore del prossimo elemento della sequenza
  • done — un valore booleano che indica se la sequenza è terminata (true) o meno (false)

Vediamo alcuni esempi di utilizzo.

Oggetti iterabili incorporati

JavaScript ha diversi oggetti iterabili incorporati, inclusi array, stringhe, oggetti Set e Map.

Esempio 1: Iterazione di un array

JavaScript
    
      const array = [1, 2, 3, 4, 5];

      for (const item of array) {
        console.log(item);
      }

      // Stampa: 1 2 3 4 5
    
  

Esempio 2: Iterazione di una stringa

JavaScript
    
      const string = 'hello';

      for (const char of string) {
        console.log(char);
      }

      // Stampa: h e l l o
    
  

1.2 Creazione dei propri iteratori

Puoi creare il tuo iteratore implementando il protocollo di iterazione — creando il metodo next().

Esempio 1: Creazione di un iteratore

JavaScript
    
      function createIterator(array) {
        let index = 0;

        return {
          next: function() {
            if (index < array.length) {
              return { value: array[index++], done: false };
            } else {
              return { done: true };
            }
          }
        };
      }

      const myIterator = createIterator([1, 2, 3]);

      console.log(myIterator.next()); // { value: 1, done: false }
      console.log(myIterator.next()); // { value: 2, done: false }
      console.log(myIterator.next()); // { value: 3, done: false }
      console.log(myIterator.next()); // { done: true }
    
  

Creazione di oggetti iterabili

Per rendere un oggetto iterabile, deve implementare il metodo [Symbol.iterator]. Sì, ha proprio questo nome buffo. Ecco come crearlo.

Esempio 2: Creazione di un oggetto iterabile

JavaScript
    
      const myIterable = {
        *[Symbol.iterator]() {
          yield 1;
          yield 2;
          yield 3;
        }
      };

      for (const value of myIterable) {
        console.log(value);
      }

      // Stampa: 1 2 3
    
  

1.3 Metodi incorporati

Vediamo i metodi e gli operatori incorporati per lavorare con gli oggetti iterabili.

Esempio 1: Operatore spread

L'operatore spread (...) può essere utilizzato per copiare o unire oggetti iterabili.

JavaScript
    
      const array = [1, 2, 3];
      const newArray = [...array, 4, 5, 6];

      console.log(newArray); // Stampa: [1, 2, 3, 4, 5, 6]
    
  

Esempio 2: Destrutturazione

La destrutturazione permette di estrarre valori dagli oggetti iterabili.

JavaScript
    
      const [first, second, third] = [1, 2, 3];

      console.log(first);  // Stampa: 1
      console.log(second); // Stampa: 2
      console.log(third);  // Stampa: 3
    
  

Esempio 3: Metodi Array.from e Array.of

Il metodo Array.from() permette di creare un array da un oggetto iterabile.

JavaScript
    
      const set = new Set([1, 2, 3, 4, 5]);
      const array = Array.from(set);

      console.log(array); // Stampa: [1, 2, 3, 4, 5]
    
  
1
Compito
Frontend SELF IT, livello 45, lezione 0
Bloccato
Iteratore di numeri
Iteratore di numeri
1
Compito
Frontend SELF IT, livello 45, lezione 0
Bloccato
Iteratore di Fibonacci
Iteratore di Fibonacci
Commenti
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION