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… of
Schleife durchlaufen werden .
Das Konzept des Protokolls kann unterteilt werden in:
- wiederholbar
- Iterator
Das iterable Protokoll erwähnt, dass ein iterable den Symbol.iterator
Schlü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… of
Schleife 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… of
Schleife, ü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: value
und done
.
- value
Dievalue
Eigenschaft kann von einem beliebigen Datentyp sein und repräsentiert den aktuellen Wert in der Sequenz. - done
Diedone
Eigenschaft ist ein boolescher Wert, der angibt, ob die Iteration abgeschlossen ist oder nicht. Wenn die Iteration unvollständig ist, wird diedone
Eigenschaft auf gesetztfalse
, andernfalls wird sie auf gesetzttrue
.
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 arrIterator
Objekt zu durchlaufen .
- Die
next()
Methode gibt ein Objekt mit zwei Eigenschaften zurück:value
unddone
. - Wenn die
next()
Methode das Ende der Sequenz erreicht, wird diedone
Eigenschaft auf gesetztfalse
.
Schauen wir uns an, wie for… of
loop 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… of
Schleife macht genau das gleiche wie das obige Programm.
Die for… of
Schleife ruft die next()
Methode weiterhin im Iterator auf. Sobald es erreicht ist done:true
, for… of
endet 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 value
und done
Eigenschaft 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
done
ist - Eigenschaft auftrue
, wobeivalue
alsundefined
.