Beispiele für ES6-Schleifen und iterierbare Objekte

Dieser Artikel untersucht die ES6-for...of-Schleife.

Alte Methode

In der Vergangenheit gab es zwei Möglichkeiten, JavaScript zu durchlaufen.

Als Erstes gibt es die klassische for i-Schleife, mit der Sie über ein Array oder ein beliebiges Objekt iterieren können, das indiziert werden kann und über eine Längeneigenschaft verfügt.

für(i=0;i<things.length;i++) {
 var Ding = Dinge[i]
 /* … */
}

Die zweite ist die for ... in-Schleife, die verwendet wird, um die Schlüssel/Wert-Paare eines Objekts zu durchlaufen.

für (Dinge eingeben) {
 wenn(!thing.hasOwnProperty(Schlüssel)) { weiter; }
 var thing = things[Schlüssel]
 /* … */
}

Die for ... in-Schleife wird oft als eine Abschweifung betrachtet, da sie alle aufzählbaren Eigenschaften eines Objekts durchläuft[1]. Hierzu zählen Eigenschaften übergeordneter Objekte in der Prototypenkette sowie alle Eigenschaften, die als Methoden zugewiesen sind. Mit anderen Worten, es werden Dinge erlebt, die die Leute vielleicht nicht erwarten. Die Verwendung von for ... in bedeutet normalerweise viele Schutzklauseln im Schleifenblock, um unerwünschte Eigenschaften zu vermeiden.

Frühes JavaScript löste dieses Problem durch Bibliotheken. Viele JavaScript-Bibliotheken (z. B. Prototype.js, jQuery, lodash usw.) verfügen über Hilfsmethoden oder Funktionen wie each oder foreach, mit denen Sie in Schleifen über Objekte und Arrays iterieren können, ohne for i oder for ... einzugeben.

Mit der for ... of-Schleife versucht ES6, einige dieser Probleme zu lösen, ohne dass Bibliotheken von Drittanbietern erforderlich sind.

für … von

für ... der Schleife

für(const Ding von Dingen) {
 /* … */
}

Es wird über ein iterierbares Objekt iteriert.

Ein Iterable ist ein Objekt, das eine @@Iteratormethode definiert, die ein Objekt zurückgibt, das das Iteratorprotokoll implementiert, oder das eine Generatorfunktion ist.

In diesem Satz gibt es viele Dinge, die Sie verstehen müssen:

• Iterierbare Objekte
• @@Iteratormethode (was bedeutet @@?)
• Iterator-Protokoll (Was bedeutet hier Protokoll?)
• Moment, iterierbar und Iterator sind nicht dasselbe?
• Und was zum Teufel sind Generatorfunktionen?
  

Lassen Sie uns diese Fragen nacheinander beantworten.

Eingebautes Iterable

Zunächst einmal sind einige integrierte Objekte in JavaScript von Natur aus iterierbar, wie beispielsweise das Array-Objekt. Sie können Arrays in einer for ... of-Schleife verwenden, wie im folgenden Code gezeigt:

const foo = [
„Äpfel“, „Orangen“, „Birnen“
]

für(const thing of foo) {
 console.log(Ding)
}

Die Ausgabe sind alle Elemente im Array.

Äpfel
Orangen
Birnen

Es gibt auch eine Einträge-Methode für Arrays, die ein iterierbares Objekt zurückgibt. Dieses Iterable gibt bei jedem Durchlauf der Schleife den Schlüssel und den Wert zurück. Beispielsweise der folgende Code:

const foo = [
„Äpfel“, „Orangen“, „Birnen“
]

für(const thing of foo.entries()) {
 console.log(Ding)
}

Gibt Folgendes aus

[ 0, 'Äpfel' ]
[ 1, 'Orangen' ]
[ 2, 'Birnen' ]

Die Methode „entrys“ ist nützlicher, wenn die folgende Syntax verwendet wird:

const foo = [
 „Äpfel“, „Orangen“, „Birnen“
]

für(const [Schlüssel, Wert] von foo.entries()) {
 console.log(Schlüssel,':',Wert)
}

In der For-Schleife werden zwei Variablen deklariert: eine für das erste Element im zurückgegebenen Array (der Schlüssel oder Index des Werts) und eine weitere für das zweite Element (der tatsächliche Wert, dem dieser Index entspricht).

Ein einfaches JavaScript-Objekt ist nicht iterierbar. Wenn Sie den folgenden Code ausführen:

// Kann nicht normal ausgeführt werden const foo = {
 'Äpfel':'Orangen',
 'Birnen':'Pflaumen'
}

für(const [Schlüssel, Wert] von foo) {
 console.log(Schlüssel,':',Wert)
}

Sie erhalten eine Fehlermeldung

$ Knoten test.js
/Pfad/zu/test.js:6
für(const [Schlüssel, Wert] von foo) {
TypeError: foo ist nicht iterierbar

Die Methode „Statische Einträge“ des globalen Object-Objekts akzeptiert jedoch ein einfaches Objekt als Argument und gibt ein iterierbares Objekt zurück. Ein Programm wie dieses:

const foo = {
 'Äpfel':'Orangen',
 'Birnen':'Pflaumen'
}

für(const [Schlüssel, Wert] von Object.entries(foo)) {
 console.log(Schlüssel,':',Wert)
}

Sie können die erwartete Ausgabe erhalten:

$ Knoten test.js
Äpfel: Orangen
Birnen: Pflaumen

Erstellen Sie Ihr eigenes Iterable

Wenn Sie eigene iterierbare Objekte erstellen möchten, dauert es etwas länger. Sie werden sich erinnern, dass ich vorhin gesagt habe:

Ein Iterable ist ein Objekt, das eine @@Iteratormethode definiert, die ein Objekt zurückgibt, das das Iteratorprotokoll implementiert, oder das eine Generatorfunktion ist.

Am einfachsten lässt sich dies verstehen, wenn man iterierbare Objekte Schritt für Schritt erstellt. Zuerst benötigen wir ein Objekt, das die @@Iterator-Methode implementiert. Die @@-Notation ist etwas irreführend. Was wir tatsächlich tun, ist, eine Methode mit dem vordefinierten Symbol Symbol.iterator zu definieren.

Wenn Sie ein Objekt mit einer Iteratormethode definieren und versuchen, darüber zu iterieren:

const foo = {
 [Symbol.Iterator]: Funktion() {
 }
}

für(const [Schlüssel, Wert] von foo) {
 console.log(Schlüssel, Wert)
}

Ich habe einen neuen Fehler:

für(const [Schlüssel, Wert] von foo) {
^
TypeError: Das Ergebnis der Methode Symbol.iterator ist kein Objekt

Dies ist JavaScript, das uns mitteilt, dass es versucht, die Methode Symbol.iterator aufzurufen, aber das Ergebnis des Aufrufs ist kein Objekt.

Um diesen Fehler zu beheben, müssen Sie die Iteratormethode verwenden, um ein Objekt zurückzugeben, das das Iteratorprotokoll implementiert. Dies bedeutet, dass die Iteratormethode ein Objekt mit einem nächsten Schlüssel zurückgeben muss, bei dem es sich um eine Funktion handelt.

const foo = {
 [Symbol.Iterator]: Funktion() {
 zurückkehren {
 weiter: Funktion() {
 }
 }
 }
}

für(const [Schlüssel, Wert] von foo) {
 console.log(Schlüssel, Wert)
}

Wenn Sie den obigen Code ausführen, erhalten Sie einen neuen Fehler.

für(const [Schlüssel, Wert] von foo) {
^
TypeError: Das undefinierte Iteratorergebnis ist kein Objekt

Dieses Mal teilt uns JavaScript mit, dass es versucht hat, die Methode Symbol.iterator aufzurufen, und dass das Objekt tatsächlich ein Objekt ist und die Methode next implementiert, der Rückgabewert von next jedoch nicht das von JavaScript erwartete Objekt ist.

Die nächste Funktion muss ein Objekt in einem bestimmten Format zurückgeben – mit zwei Schlüsseln: Wert und Fertig.

weiter: Funktion() {
 //...
 zurückkehren {
 erledigt: falsch,
 Wert: „nächster Wert“
 }
}

Der Fertig-Schlüssel ist optional. Wenn der Wert „true“ ist (was bedeutet, dass der Iterator die Iteration abgeschlossen hat), ist die Iteration beendet.

Wenn „done“ falsch ist oder nicht vorhanden ist, ist der Wertschlüssel erforderlich. Der Wertschlüssel ist der Wert, der durch Durchlaufen einer Schleife zurückgegeben werden soll.

Fügen Sie also ein weiteres Programm mit einem einfachen Iterator in Ihren Code ein, das die ersten zehn geraden Zahlen zurückgibt.

Klasse First20Evens {
 Konstruktor() {
 dieser.aktuellerWert = 0
 }

 [Symbol.iterator]("Symbol.iterator") {
 zurückkehren {
 weiter: (Funktion() {
 dieser.aktuellerWert+=2
 wenn(dieser.aktuellerWert > 20) {
  Rückgabewert {done:true}
 }
 zurückkehren {
  Wert:dieser.aktuellerWert
 }
 }).binden(dies)
 }
 }
}

const foo = neues First20Evens;
für (konstanter Wert von foo) {
 console.log(Wert)
}

Generator

Das manuelle Erstellen von Objekten, die das Iteratorprotokoll implementieren, ist nicht die einzige Option. Generatorobjekte (die von Generatorfunktionen zurückgegeben werden) implementieren auch das Iteratorprotokoll. Das obige Beispiel würde folgendermaßen aussehen, wenn es mit einem Generator erstellt würde:

Klasse First20Evens {
 Konstruktor() {
 dieser.aktuellerWert = 0
 }

 [Symbol.iterator]("Symbol.iterator") {
 Rückgabefunktion*() {
 für(lass i=1;i<=10;i++) {
 wenn(i % 2 === 0) {
  Ertrag ich
 }
 }
 }()
 }
}

const foo = neues First20Evens;
für(const item of foo) {
 console.log(Element)
}

In diesem Artikel wird nicht im Detail auf Generatoren eingegangen. Wenn Sie jedoch eine Einführung benötigen, können Sie diesen Artikel lesen. Die wichtige Erkenntnis für heute ist, dass wir unsere Methode Symbol.iterator dazu bringen können, ein Generatorobjekt zurückzugeben, und dass dieses Generatorobjekt in einer for ... of-Schleife „einfach funktioniert“. „Funktioniert ordnungsgemäß“ bedeutet, dass die Schleife den Generator so lange weiter aufruft, bis der Generator keine Werte mehr liefert.

$ node beispielprogramm.js
2
4
6
8
10

Verweise

Jede aufzählbare Eigenschaft des Objekts: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in

Zusammenfassen

Dies ist das Ende dieses Artikels über ES6-Schleifen und iterierbare Objekte. Weitere Informationen zu ES6-Schleifen und iterierbaren Objekten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!