JavaScript-Iteratoren und Iterables

In diesem Tutorial lernen Sie anhand von Beispielen JavaScript-Iteratoren und Iterables kennen.

JavaScript Iterables und Iteratoren

JavaScript bietet ein Protokoll zum Durchlaufen von Datenstrukturen. Dieses Protokoll definiert, wie diese Datenstrukturen mithilfe der for… ofSchleife durchlaufen werden .

Das Konzept des Protokolls kann unterteilt werden in:

  • wiederholbar
  • Iterator

Das iterable Protokoll erwähnt, dass ein iterable den Symbol.iteratorSchlüssel haben sollte.

JavaScript Iterables

Die Datenstrukturen mit dieser Symbol.iterator()Methode werden als iterables bezeichnet. Zum Beispiel Arrays, Strings, Sets usw.

JavaScript-Iteratoren

Ein Iterator ist ein Objekt, das von der Symbol.iterator()Methode zurückgegeben wird.

Das Iteratorprotokoll bietet die next()Methode, um nacheinander auf jedes Element der iterierbaren (Datenstruktur) zuzugreifen.

Schauen wir uns ein Beispiel für iterables an 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);

Ausgabe

 Array Iterator () StringIterator ()

Hier gibt der Aufruf der Symbol.iterator()Methode sowohl des Arrays als auch des Strings ihre jeweiligen Iteratoren zurück.

Durch Iterate iterieren

Sie können die for… ofSchleife verwenden, um diese iterierbaren Objekte zu durchlaufen. Sie können die Symbol.iterator()Methode folgendermaßen durchlaufen :

 const number = ( 1, 2, 3); for (let n of number(Symbol.iterator)()) ( console.log(n); )

Ausgabe

 1 2 3

Oder Sie können das Array einfach wie folgt durchlaufen:

 const number = ( 1, 2, 3); for (let n of number) ( console.log(n); )

Hier ermöglicht der Iterator der for… ofSchleife, über ein Array zu iterieren und jeden Wert zurückzugeben.

JavaScript next () Methode

Das Iteratorobjekt verfügt über eine next()Methode, die das nächste Element in der Sequenz zurückgibt.

Die next()Methode enthält zwei Eigenschaften: valueund done.

  • value
    Die valueEigenschaft kann von einem beliebigen Datentyp sein und repräsentiert den aktuellen Wert in der Sequenz.
  • done
    Die doneEigenschaft ist ein boolescher Wert, der angibt, ob die Iteration abgeschlossen ist oder nicht. Wenn die Iteration unvollständig ist, wird die doneEigenschaft auf gesetzt false, andernfalls wird sie auf gesetzt true.

Schauen wir uns ein Beispiel für Array-Iterables an:

 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)

Sie können next()wiederholt aufrufen , um ein arrIteratorObjekt zu durchlaufen .

  • Die next()Methode gibt ein Objekt mit zwei Eigenschaften zurück: valueund done.
  • Wenn die next()Methode das Ende der Sequenz erreicht, wird die doneEigenschaft auf gesetzt false.

Schauen wir uns an, wie for… ofloop das obige Programm ausführt. Beispielsweise,

 const arr = ('h', 'e', 'l', 'l', 'o'); for (let i of arr) ( console.log(i); )

Ausgabe

 Hallo

Die for… ofSchleife macht genau das gleiche wie das obige Programm.

Die for… ofSchleife ruft die next()Methode weiterhin im Iterator auf. Sobald es erreicht ist done:true, for… ofendet die Schleife.

Benutzerdefinierter Iterator

Sie können auch einen eigenen Iterator erstellen und aufrufen, next()um auf das nächste Element zuzugreifen. Beispielsweise,

 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());

Ausgabe

 (Wert: "h", erledigt: falsch) (Wert: "e", erledigt: falsch) (Wert: "l", erledigt: falsch) (Wert: "l", erledigt: falsch) (Wert: "o" , erledigt: falsch) (Wert: undefiniert, erledigt: wahr)

Im obigen Programm haben wir unseren eigenen Iterator erstellt. Die displayElements()Funktion gibt valueund doneEigenschaft zurück.

  • Bei jedem next()Aufruf der Methode wird die Funktion einmal ausgeführt und zeigt den Wert eines Arrays an.
  • Schließlich , wenn alle Elemente eines Arrays aufgebraucht sind, die doneist - Eigenschaft auf true, wobei valueals undefined.

Interessante Beiträge...