Ausführliche Erklärung der Iteratoren in ECMAScript

Vorwort

Wenn viele Junior-Frontend-Entwickler auf mittlerem Niveau arbeiten, werden sie in Vorstellungsgesprächen häufig nach Iteratoren und Generatoren gefragt. Tatsächlich haben sie diese bei der Entwicklung verwendet, wissen aber nicht, was sie sind, oder sie haben zwar ein gewisses Verständnis davon, aber nicht in der Tiefe. Dieser Artikel wird diesen Entwicklern hilfreich sein und den Iterator deutlich erklären.

Frühere Iterationen

Sie müssen über Iteration Bescheid wissen. Sie kann einfach als Schleife verstanden werden. In JavaScript ist eine gezählte Schleife die einfachste. Beispiel:

für(lass i = 0; i < 9; ++i){
	konsole.log("[ i ]", i);
}

Grundlage der Iteration ist die Schleife, die mehrere notwendige Bedingungen enthält:

• Die Anzahl der Iterationen kann angegeben werden
• Sie können den Vorgang angeben, der bei jeder Iteration ausgeführt werden soll
• Jede Iteration wird abgeschlossen, bevor die nächste Iteration beginnt
• Die Reihenfolge ist vorgegeben.

Wenn Sie ein Array durchlaufen müssen, wird die Iteration für eine geordnete Sammlung ausgeführt. „Geordnet“ bedeutet, dass alle Elemente im Array der Reihe nach vom ersten bis zum letzten Element durchlaufen werden können. Da das Array eine feste Länge hat und jedes Element über den Indexindex abgerufen werden kann, kann das gesamte Array über den Index durchlaufen werden. Beispiel:

const arr = ["a", "b", "c"];

für(lass i = 0; i < arr.length; ++i){
	Konsole.log(arr[i]);
}

Dieser Modus erfordert jedoch, dass man im Voraus weiß, welche Datenstruktur verwendet wird, z. B. ein Array. Wenn es durch einen anderen Datentyp oder eine Datenstruktur mit impliziter Reihenfolge ersetzt wird, kann die Reihenfolge der Durchquerung nicht bestimmt werden.

Daher wurde in ES5 die Methode forEach() hinzugefügt. Beispiel:

const arr = ["a", "b", "c"];

arr.fürJeden(item=>{
	konsole.log(Element);
});

Diese Methode muss nicht denselben Array-Index verwenden, um den Wert eines einzelnen Elements zu durchlaufen und abzurufen, kann jedoch nicht markieren, wann die Iteration endet, sodass sie nur auf die Array-Durchquerung anwendbar ist. Um diese Probleme zu lösen, unterstützt JavaScript nach ES6 den Iteratormodus.

Iterator-Muster

Das Iteratormuster ist ein sehr abstrakter Begriff. Man kann darunter Objekte wie Arrays oder Sammlungen verstehen, deren Elemente begrenzt, unabhängig und eindeutig sind. Um die Erklärung aus dem Kleinen Roten Buch zu zitieren:

Das Iterator-Muster (insbesondere im Kontext von ECMAScript) beschreibt ein Schema, bei dem einige Strukturen als „iterabel“ bezeichnet werden können, da sie die formale Iterable-Schnittstelle implementieren und von einem Iterator verwendet werden können.

Iterator-Factory-Funktionen

Die Iterator-Factory-Funktion Symbol.iterator() ist die Standardeigenschaft der meisten integrierten Typen. Sie stellt die Iterable-Schnittstelle (Iterable-Protokoll) bereit. Das bedeutet, dass ein Datentyp, der Iteration unterstützt, das Iterable-Protokoll unterstützen muss.

ECMAScript gibt an, dass der angezeigte Standarditerator „Symbol.iterator“ als Schlüssel verwenden und einen neuen Iterator zurückgeben muss. Die Methode zum Überprüfen, ob eine Standarditeratoreigenschaft vorhanden ist, ist ebenfalls einfach. Beispiel:

const obj = {};
const arr = ["a", "b", "c"];

console.log(obj[Symbol.iterator]); // unterdefiniert
console.log(arr[Symbol.iterator]); // f Werte() { [nativer Code] }

console.log(arr[Symbol.iterator]()); // ArrayIterator {}

Natürlich müssen wir die Iterator-Factory-Funktion in der eigentlichen Entwicklung nicht explizit aufrufen. Datentypen, die das iterierbare Protokoll unterstützen, sind automatisch mit allen Sprachfunktionen kompatibel, die iterierbare Objekte akzeptieren. Wenn wir beispielsweise Schleifen, For-of-, Dekonstruktions- und Erweiterungsoperatoren verwenden, wird die Iterator-Factory-Funktion des bereitgestellten iterierbaren Objekts automatisch im Hintergrund aufgerufen, um einen Iterator zu erstellen.

Iterator-Protokoll

Das Iteratorprotokoll legt fest, dass ein Iterator ein einmaliges Objekt ist. Wenn die Iterator-Factory-Funktion aufgerufen wird, wird eine next()-Methode zurückgegeben. Diese Methode wird für jede erfolgreiche Iteration aufgerufen, um den Wert der nächsten Iteration abzurufen. Wenn sie nicht aufgerufen wird, ist die aktuelle Position der Iteration ungewiss.

Die Methode next() gibt ein Objekt mit den folgenden Attributen zurück: done und value. done gibt an, ob die Methode next() aufgerufen werden kann, um den nächsten Wert abzurufen, d. h. ob sie „erschöpft“ ist. Sie gibt einen Booleschen Wert zurück. value gibt den nächsten Wert des iterierbaren Objekts an. Wenn „done“ wahr ist, ist der Wert unterdefiniert. Wenn „Done“ falsch ist, wird die nächste Iteration aufgerufen. Beispiel:

// Iterierbares Objekt let arr = ['foo', 'bar']; // Iterator-Factory-Funktion console.log(arr[Symbol.iterator]); // f values() { [nativer Code] }

// Iterator let iter = arr[Symbol.iterator]();
console.log(iter); // ArrayIterator{}

// Iteration ausführen console.log(iter.next()); // { done: false, value: 'foo' }
console.log(iter.next()); // { fertig: false, Wert: 'bar' }
console.log(iter.next()); // { erledigt: true, Wert: nicht definiert }

Abschließende Gedanken

Mit dem Iteratorprotokoll können Sie einen benutzerdefinierten Iterator implementieren, beispielsweise indem Sie angeben, wie oft der Iterator iteriert werden kann, oder indem Sie die Iteration vorzeitig beenden.

Dies ist das Ende dieses Artikels über Iteratoren in ECMAScript. Weitere relevante Inhalte zu ECMAScript-Iteratoren finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!