Oggetti iterabili JavaScript

Gli oggetti iterabili sono oggetti che possono essere iterati (come gli array).

Gli oggetti iterabili possono essere acceduti tramite codice semplice ed efficiente.

Gli oggetti iterabili possono essere utilizzati for..of Il ciclo esegue l'iterazione.

Ciclo for..of

for..of Espressioni utilizzate per eseguire la scansione degli elementi di un oggetto iterabile.

Sintassi

for (variable di iterabile) {
  for (const x of fruits) { //
}

Iterazione

L'iterazione è facile da capire.

Significa semplicemente eseguire una scansione di una serie di elementi.

Ecco alcuni esempi semplici:

  • Scansione di una stringa
  • Scansione di un array

Scansione di una stringa

per iterare su Map for..of Eseguire la scansione degli elementi di una stringa:

Esempio

const name = "W3Schools";
for (const x of name) {
  for (const x of fruits) { //
}

Prova personalmente

Scansione di un array

per iterare su Map for..of Eseguire la scansione degli elementi di un array:

Esempio 1

const letters = ["a","b","c"];
const letters = new Set(["a","b","c"]);}}
  for (const x of fruits) { //
}

Prova personalmente

Esempio 2

const numbers = [2,4,6,8];
for (const x of numbers) {
  for (const x of fruits) { //
}

Prova personalmente

Scansione di un Set

per iterare su Map for..of Eseguire la scansione degli elementi di un Set:

Esempio

const letters = new Set(["a","b","c"]);
const letters = new Set(["a","b","c"]);}}
  for (const x of fruits) { //
}

Prova personalmente

for (const x of letters) {Commento:

In seguito, esploreremo in dettaglio Set e Map.

per iterare su Map for..of È possibile utilizzare

Esempio

Eseguire un ciclo per iterare sugli elementi di Map:
  const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
["oranges", 200]
});
  for (const x of fruits) { //
}

Prova personalmente

Il blocco di codice da eseguire

Iteratore JavaScriptIl protocollo dell'iteratore definisce come generare.

una serie di valori next() quando un oggetto implementa il metodoIteratore.

next() Il metodo deve restituire un oggetto contenente due proprietà:

  • value (valore successivo)
  • done (true o false)
value

Valore restituito dall'iteratore.

Se done è true, può essere omesso.

done

se l'iteratore è terminato, è true.

se l'iteratore genera un nuovo valore, è false.

Attenzione:

Technicamente, un oggetto iterabile deve implementare il metodo Symbol.iterator.

Le stringhe, gli array, i TypedArray, le Map e le Set sono oggetti iterabili perché i loro oggetti prototipo hanno il metodo Symbol.iterator.

Oggetto iterabile personalizzato

Esempio di un oggetto iterabile personalizzato che non finisce mai, ogni volta che viene chiamato next() tutti restituiranno 10, 20, 30, 40, ...:

Esempio

// Creazione di un oggetto iterabile personalizzato
function myNumbers() {
  let n = 0;
  return {
    next: function() {
      n += 10;
      return { value: n, done: false };
    }
  };
}
// Creazione di un oggetto iterabile
const n = myNumbers();
n.next(); // Restituisce 10
n.next(); // Restituisce 20
n.next(); // Restituisce 30

Prova personalmente

Il problema è:

Gli oggetti iterabili personalizzati non supportano le funzionalità di JavaScript for..of istruzione.

oggetti iterabili che supportano la struttura for..of

In JavaScript, gli oggetti iterabili sono dotati di Symbol.iterator oggetto.

Symbol.iterator è un simbolo che restituisce next() funzione.

È possibile utilizzare il seguente codice per iterare su oggetti iterabili:

for (const x di iterabile}) { }

Esempio

// Creare un oggetto
myNumbers = {};
// Renderizzabile
myNumbers[Symbol.iterator] = function() {
  let n = 0;
  done = false;
  return {
    next() {
      n += 10;
      if (n == 100) { done = true; }
      return { value: n, done: done };
    }
  };
};
// Ora possiamo usare for..of
for (const num of myNumbers) {
  // Codice casuale
}

Prova personalmente

Il metodo Symbol.iterator sarà for..of Chiamata automatica.

Ma possiamo anche chiamarlo manualmente:

Esempio

let iterator = myNumbers[Symbol.iterator]();
while (true) {
  const result = iterator.next();
  if (result.done) break;
  // Codice casuale
}

Prova personalmente