forEach () vs for-of vs for-in-Schleifen

Hier finden Sie eine kurze Zusammenfassung der Unterschiede zwischen forEach (), for-in und for-of-Schleifen.

für jeden()

Die in ES5 eingeführte Methode forEach () prototype * führt eine bereitgestellte Rückruffunktion (eine Funktion, die als Argument an eine andere Funktion übergeben wird) einmal für jeden Wert in Array, Map (bestehend aus Schlüssel-Wert-Paaren), Set, NodeList ( Ein Array-ähnliches Objekt, das häufig von Document.querySelectorAll ()) oder HTMLCollection (ein Array-ähnliches Objekt, das häufig von Document.getElementsByClassName ()) zurückgegeben wird, in aufsteigender Reihenfolge.

myArray.forEach (Funktion (Wert) {
    // Sachen machen
});

Als Parameter wird ein Funktionsrückruf verwendet, dessen Argument der aktuelle Wert ist, der im Array verarbeitet wird. (Es gibt auch drei optionale Argumente: den aktuellen Indexwert, das Array, auf das forEach () angewendet wird, und einen Wert, der als dieses [das Referenzobjekt] verwendet werden soll.)

Es ist etwas prägnanter als die klassische for-Schleife (die es schon viel länger gibt). Sie können die Anweisung break jedoch nicht verwenden, um die Schleife zu verlassen, eine Iteration weiter zu überspringen oder zurückzukehren, um einen Wert zurückzugeben (und die Schleife zu verlassen). Es wird undefiniert zurückgegeben.

Wenn Sie mit forEach () eine Schleife über ein NodeList- oder HTMLCollection-Objekt ausführen möchten, müssen Sie es zunächst mit Array.from () in ein Array-Objekt konvertieren.

* Ein Prototyp ist etwas, von dem alle JavaScript-Objekte Eigenschaften (Variablen in einem Objekt) und Methoden (Funktionen in einem Objekt) erben. Beispielsweise erben Array-Objekte von Array.prototype.

Weiterlesen
Array.prototype.forEach ()
Set.prototype.forEach ()
Map.prototype.forEach ()
NodeList.prototype.forEach ()

für in

Eine for-in-Anweisung erstellt eine Schleife, die alle nicht-symbolischen, aufzählbaren Eigenschaften eines Objekts durchläuft, manchmal in einer beliebigen Reihenfolge.

für (Variable im Objekt) {
  // Sachen machen
}

Was sind aufzählbare Eigenschaften?
Objekte sind Auflistungen von Eigenschaften, und jede Eigenschaft verfügt über einen eigenen Satz interner Eigenschaften, auf die der Benutzer keinen Zugriff hat, die jedoch von der JavaScript-Engine verwendet werden. Sie sind mit doppelten eckigen Klammern gekennzeichnet: [[Property]].

Jedes Objekt verfügt über ein Eigenschaftsattribut [[Enumerable]], das den booleschen Wert true oder false enthält, den Sie mit der propertyIsEnumerable () -Methode ermitteln können. Wenn der Wert true ist, ist das Objekt nummerierbar und wird daher (sofern es sich nicht um ein Symbol handelt) in einer for-in-Schleife durchlaufen.

Zusätzlich zu aufzählbaren Eigenschaften mit dem Wert [[Enumerable]] false haben schattierte Eigenschaften keinen Vorrang. Dies bedeutet, dass Eigenschaften, die durch gleichnamige Eigenschaften von untergeordneten Objekten überschrieben werden (Eigenschaften, die näher am Objekt in der Prototypenkette liegen, haben Vorrang vor den Eigenschaften der Prototypen) iterierte über.

Anwendungsfälle umfassen ...

  • String-Objekteigenschaften. Dafür wurde es entwickelt.
  • Array-Objekte, aber das ist wahrscheinlich keine gute Idee: Zum einen kann es manchmal in einer beliebigen Reihenfolge wiederholt werden. Zweitens ist der einem Index zugewiesene Wert eine Zeichenfolge. Wenn Sie arithmetisch arbeiten möchten, führen Sie eine String-Arithmetik durch (z. B. 5 + "5" = "55").
  • String * Objekte. Jedes Zeichen in einer Zeichenfolge verfügt über einen Index, bei dem es sich um eine aufzählbare Eigenschaft in Form einer Ganzzahl handelt.

* JavaScript konvertiert automatisch zwischen String-Objekten und String-Primitiven. Auf diese Weise können Sie eine beliebige Hilfsmethode des String-Objekts für ein String-Grundelement aufrufen.

Weiterlesen
für in
Object.prototype.propertyIsEnumerable ()

for-of

In ES6 eingeführt, erstellt eine for-of-Anweisung eine Schleife, die iterative Objekte (zur Verdeutlichung siehe unten) in iterativer Reihenfolge durchläuft. Eine häufige Verwendung ist das Durchlaufen von Werten in einem Array, es funktioniert jedoch auch bei den meisten Array-ähnlichen Objekten.

für (Variable von iterable) {
  // Sachen machen
}

Es hat erhebliche Vorteile gegenüber for-in und forEach ():

  • Im Gegensatz zu forEach () können Sie break, continue und return verwenden
  • Zwei Hauptvorteile gegenüber for-in: Erstens werden Indizes eines Arrays in numerischer (aufsteigender) Reihenfolge aufgerufen, und zweitens werden Indizes von Arrays nicht in Zeichenfolgen konvertiert, sodass Sie arithmetisch arbeiten können

Wenn Sie die Eigenschaften eines Objekts durchlaufen möchten, verwenden Sie entweder for-in (dies ist der Zweck des Objekts) oder alternativ die Methode Object.keys ().

Was ist ein Iterierbares Objekt?

Nicht sicher, was ein "iterierbares Objekt" ist? Nun, ES6 hat zwei Protokolle hinzugefügt: das iterable- und das iterator-Protokoll. Diese Protokolle sind der Schlüssel, um dies zu verstehen.

Iterierbares Protokoll
Mit dem iterierbaren Protokoll können JavaScript-Objekte ihr Iterationsverhalten definieren oder anpassen.

Um als iterierbar zu gelten, muss ein Objekt die Methode @@ iterator implementieren: Entweder es oder eines der Objekte in seiner Prototypkette muss eine Eigenschaft mit einem @@ iterator-Schlüssel enthalten, der über die Konstante Symbol.iterator verfügbar ist.

Zu Beginn der Ausführung einer for-of-Schleife wird die @@ Iterator-Methode eines Objekts mit Nullargumenten aufgerufen und gibt ein Iterator-Objekt zurück, mit dem die Werte abgerufen werden, über die iteriert werden soll.

Iterator-Protokoll
Das Iterator-Protokoll definiert eine Standardmethode zum Erzeugen einer Folge von Werten (entweder endlich oder unendlich).

Ein Iterator ist ein Objekt, das dem Iterator-Protokoll entspricht. Dies wird erreicht, indem eine next () -Methode bereitgestellt wird, die keine Argumente enthält und ein Objekt mit zwei Eigenschaften zurückgibt:

  1. value: Die Daten, die den nächsten Wert in der Wertereihenfolge innerhalb des Objekts darstellen
  2. done: Ein Boolescher Wert, der angibt, ob der Iterator die Wertereihenfolge durchlaufen hat

Iterierbare Objekte

  • Integrierte Iterables: String-, Array-, TypedArray-, Map- und Set-Objekte (diese sind integriert, da jedes ihrer Prototyp-Objekte eine @@ Iterator-Methode implementiert)
  • NodeList-Objekte
  • Generatorobjekte (alle von Generatoren erstellten Iteratoren sind auch iterabel, da Generatoren standardmäßig die Symbol.iterator-Eigenschaft zuweisen)
  • Array-ähnliche Argumente
  • Benutzerdefinierte Iterables (diese können erstellt werden, indem eine Methode mit einem Schlüssel von Symbol.iterator definiert wird, um dem Iterable-Protokoll zu entsprechen, und um auch dem Iterator-Protokoll zu entsprechen, indem ein Objekt mit einer Methode namens next () mit zurückgegeben wird zwei Eigenschaften (value und done)

Weiterlesen
für… von
Symbol.iterator
Iterationsprotokolle