Foreach js für Arrays und Sammlungen. So erstellen Sie ein assoziatives Array in JavaScript. Explizite Verwendung des Iterators

Definition und Anwendung

JavaScript-Methode für jede() ermöglicht es Ihnen, die übergebene Funktion einmal für jedes Element im Array in aufsteigender Indexreihenfolge auszuführen.

Bitte beachten Sie, dass die Callback-Funktion als Methodenparameter übergeben wird für jede() wird nicht für gelöschte oder fehlende Array-Elemente aufgerufen.

Bereich der mit der Methode verarbeiteten Elemente für jede() vorne eingebaut Erste Aufruf der Callback-Funktion. Wenn dem Array nach seinem Aufruf Elemente hinzugefügt wurden, wird die Funktion für diese Elemente nicht aufgerufen.

Wenn sich die Werte vorhandener Array-Elemente zum Zeitpunkt der Ausführung ändern, ist der an die Funktion übergebene Wert der Wert zum Zeitpunkt der Ausführung der Methode für jede() besucht sie. Wenn Elemente vor dem Besuch gelöscht werden, werden diese Elemente nicht besucht. Wenn beim Durchlaufen des Arrays bereits besuchte Elemente entfernt werden, werden spätere Elemente übersprungen.

Browserunterstützung

JavaScript-Syntax:

JavaScript-Version

Parameterwerte

Anwendungsbeispiel

Im folgenden Beispiel schauen wir uns an, wie wir mithilfe von die Summe aller Elemente eines Arrays ermitteln JavaScript Methode für jede():

Im folgenden Beispiel schauen wir uns die Verwendung an zweite Methodenargument für jede(), was auf ein Objekt verweist, mit dem wir referenzieren können Stichwort Dies innerhalb der Callback-Funktion:

• I. Iterieren über reale Arrays
  1. forEach-Methode und verwandte Methoden
  2. for-Schleife
  3. Richtige Verwendung der for...in-Schleife
  4. for...of-Schleife (implizite Verwendung des Iterators)
  5. Explizite Verwendung des Iterators
• II. Iterieren über Array-ähnliche Objekte
  1. Verwenden von Methoden zum Durchlaufen realer Arrays
  2. In ein echtes Array konvertieren
  3. Ein Hinweis zu Laufzeitobjekten

I. Iterieren über reale Arrays

An dieser Moment Es gibt drei Möglichkeiten, die Elemente eines realen Arrays zu durchlaufen:

1. Methode Array.prototype.forEach ;
2. klassische for-Schleife
3. eine „richtig“ konstruierte for...in-Schleife.

Darüber hinaus werden mit der Einführung des neuen Standards ECMAScript 6 (ES 6) bald zwei weitere Methoden erwartet:

1. for...of-Schleife (implizite Verwendung des Iterators);
2. explizite Verwendung von Iteratoren.

1. Die forEach-Methode und verwandte Methoden

Wenn Ihr Projekt die Funktionen des ECMAScript 5 (ES5)-Standards unterstützen soll, können Sie eine seiner Innovationen verwenden – die forEach-Methode.

Anwendungsbeispiel:

Var a = ["a", "b", "c"]; a.forEach(function(entry) ( console.log(entry); ));

Im Allgemeinen erfordert die Verwendung von forEach eine Verbindung mit der Emulationsbibliothek es5-shim für Browser, die diese Methode nicht nativ unterstützen. Dazu gehören IE 8 und höher frühe Versionen, die hier und da noch im Einsatz sind.

Der Vorteil von forEach besteht darin, dass keine lokalen Variablen zum Speichern des Index und des Werts des aktuellen Array-Elements deklariert werden müssen, da diese automatisch als Argumente an die Rückruffunktion übergeben werden.

Wenn Sie sich Sorgen über die möglichen Kosten für einen Rückruf für jedes Element machen, machen Sie sich keine Sorgen und lesen Sie dies.

forEach ist darauf ausgelegt, alle Elemente eines Arrays zu durchlaufen, aber darüber hinaus bietet ES5 mehrere weitere nützliche Methoden zum Durchlaufen aller oder einiger Elemente sowie zum Ausführen einiger Aktionen an ihnen:

• every – gibt true zurück, wenn der Callback für jedes Element des Arrays einen Wert zurückgibt, der in true konvertiert werden kann.
• some – gibt „true“ zurück, wenn der Rückruf für mindestens ein Element des Arrays einen Wert zurückgibt, der in „true“ konvertiert werden kann.
• filter – erstellt ein neues Array, das die Elemente des ursprünglichen Arrays enthält, für die der Rückruf true zurückgibt.
• Karte – erstellt ein neues Array bestehend aus den vom Rückruf zurückgegebenen Werten.
• Reduzieren – Reduziert ein Array auf einen einzelnen Wert und wendet nacheinander einen Rückruf auf jedes Element des Arrays an, beginnend mit dem ersten (kann nützlich sein, um die Summe von Array-Elementen und anderen Zusammenfassungsfunktionen zu berechnen).
• ReduceRight – funktioniert ähnlich wie Reduce, durchläuft die Elemente jedoch in umgekehrter Reihenfolge.

2. For-Schleife

Gute alte Regeln:

Var a = ["a", "b", "c"]; Var-Index; für (Index = 0; Index< a.length; ++index) { console.log(a); }

Wenn die Länge des Arrays während der gesamten Schleife konstant ist und die Schleife selbst zu einem leistungskritischen Codeabschnitt gehört (was unwahrscheinlich ist), können Sie eine „optimalere“ Version von for verwenden, die die Länge des Arrays speichert :

Var a = ["a", "b", "c"]; var index, len; for (index = 0, len = a.length; index< len; ++index) { console.log(a); }

Theoretisch sollte dieser Code etwas schneller laufen als der vorherige.

Wenn die Reihenfolge der Elemente nicht wichtig ist, können Sie im Hinblick auf die Optimierung sogar noch weiter gehen und die Variable zum Speichern der Länge des Arrays entfernen und die Reihenfolge der Suche in das Gegenteil ändern:

Var a = ["a", "b", "c"]; Var-Index; for (index = a.length - 1; index >= 0; --index) ( console.log(a); )

In modernen JavaScript-Engines bedeuten solche Optimierungsspiele jedoch meist nichts.

3. Korrekte Verwendung der for...in-Schleife

Wenn Ihnen die Verwendung einer for...in-Schleife empfohlen wird, denken Sie daran, dass die Iteration über Arrays nicht der Zweck ist, für den sie gedacht ist. Entgegen einem weit verbreiteten Missverständnis iteriert die for...in-Schleife nicht über Array-Indizes, sondern durch aufzählbare Eigenschaften eines Objekts.

In manchen Fällen, beispielsweise bei der Iteration über Arrays mit geringer Dichte, kann for...in jedoch nützlich sein, sofern Sie Vorsichtsmaßnahmen treffen, wie im folgenden Beispiel gezeigt:

// a - Sparse-Array var a = ; a = „a“; a = „b“; a = „c“; for (var key in a) ( if (a.hasOwnProperty(key) && /^0$|^d*$/.test(key) && key<= 4294967294) { console.log(a); } }

In diesem Beispiel werden bei jeder Iteration der Schleife zwei Prüfungen durchgeführt:

1. dass das Array eine eigene Eigenschaft namens Schlüssel hat (nicht von seinem Prototyp geerbt).
2. Dieser Schlüssel ist eine Zeichenfolge, die die Dezimaldarstellung einer Ganzzahl enthält, deren Wert kleiner als 4294967294 ist. Woher kommt die letzte Zahl? Aus der Definition eines Array-Index in ES5, die zeigt, dass der höchste Index, den ein Element in einem Array haben kann, ist: (2^32 - 2) = 4294967294 .

Natürlich nehmen solche Prüfungen beim Ausführen der Schleife unnötig Zeit in Anspruch. Im Fall eines Sparse-Arrays ist diese Methode jedoch effizienter als eine for-Schleife, da in diesem Fall nur diejenigen Elemente iteriert werden, die explizit im Array definiert sind. Im obigen Beispiel werden also nur 3 Iterationen durchgeführt (für die Indizes 0, 10 und 10000) – im Vergleich zu 10001 in der for-Schleife.

Um nicht jedes Mal, wenn Sie ein Array durchlaufen müssen, einen so umständlichen Prüfcode zu schreiben, können Sie ihn als separate Funktion schreiben:

Funktion arrayHasOwnIndex(array, key) ( return array.hasOwnProperty(key) && /^0$|^d*$/.test(key) && key<= 4294967294; }

Dann wird der Schleifenkörper aus dem Beispiel deutlich reduziert:

For (key in a) ( if (arrayHasOwnIndex(a, key)) ( console.log(a); ) )

Der oben besprochene Prüfcode ist universell und für alle Fälle geeignet. Stattdessen können Sie aber auch eine kürzere Version verwenden, die zwar formal nicht ganz korrekt, aber dennoch für die meisten Fälle geeignet ist:

For (key in a) ( if (a.hasOwnProperty(key) && String(parseInt(key, 10)) === key) ( console.log(a); ) )

4. For...of-Schleife (implizite Verwendung des Iterators)

ES6, noch im Entwurfsstatus, sollte Iteratoren in JavaScript einführen.

Iterator ist ein von einem Objekt implementiertes Protokoll, das eine Standardmethode zum Erhalten einer Folge von Werten (endlich oder unendlich) definiert.
Ein Objekt verfügt über einen Iterator, wenn es eine next()-Methode definiert, eine Funktion ohne Argumente, die ein Objekt mit zwei Eigenschaften zurückgibt:

1. done (boolean) – wahr, wenn der Iterator das Ende der iterierbaren Sequenz erreicht hat. Andernfalls ist der Wert false .
2. Wert – definiert den vom Iterator zurückgegebenen Wert. Kann undefiniert (fehlend) sein, wenn die done-Eigenschaft true ist.

Viele eingebaute Objekte, inkl. Echte Arrays verfügen standardmäßig über Iteratoren. Der einfachste Weg, einen Iterator für echte Arrays zu verwenden, ist die Verwendung des neuen for...of-Konstrukts.

Beispiel für die Verwendung von for...of:

Varval; var a = ["a", "b", "c"]; for (Wert von a) ( console.log(val); )

Im obigen Beispiel ruft die for...of-Schleife implizit den Iterator des Array-Objekts auf, um jeden Wert des Arrays abzurufen.

5. Explizite Verwendung von Iteratoren

Iteratoren können auch explizit verwendet werden, allerdings wird der Code in diesem Fall im Vergleich zur for...of-Schleife deutlich komplizierter. Es sieht ungefähr so ​​aus:

Var a = ["a", "b", "c"]; Var-Eintrag; while (!(entry = a.next()).done) ( console.log(entry.value); )

II. Iterieren über Array-ähnliche Objekte

Neben echten Arrays gibt es in JavaScript auch solche arrayartige Objekte . Was sie mit echten Arrays gemeinsam haben, ist, dass sie über eine Längeneigenschaft und Eigenschaften verfügen, die als Zahlen benannt sind und den Elementen des Arrays entsprechen. Beispiele hierfür sind das DOM der NodeList-Sammlung und das Argument-Pseudo-Array, das in jeder Funktion/Methode verfügbar ist.

1. Verwenden von Methoden zum Durchlaufen realer Arrays

Zumindest können die meisten, wenn nicht alle Methoden zur Iteration über reale Arrays verwendet werden, um über arrayähnliche Objekte zu iterieren.

Die for- und for...in-Konstrukte können auf arrayähnliche Objekte genauso angewendet werden wie auf echte Arrays.

forEach und andere Array.prototype-Methoden gelten auch für Array-ähnliche Objekte. Dazu müssen Sie Function.call oder Function.apply verwenden.

Wenn Sie beispielsweise forEach auf die childNodes-Eigenschaft eines Node-Objekts anwenden möchten, gehen Sie folgendermaßen vor:

Array.prototype.forEach.call(node.childNodes, function(child) ( // etwas mit dem untergeordneten Objekt machen));

Um die Wiederverwendung dieses Tricks zu vereinfachen, können Sie einen Verweis auf die Methode Array.prototype.forEach in einer separaten Variablen deklarieren und diese als Verknüpfung verwenden:

// (Angenommen, der gesamte Code unten befindet sich im selben Bereich) var forEach = Array.prototype.forEach; // ... forEach.call(node.childNodes, function(child) ( // etwas mit dem untergeordneten Objekt machen));

Wenn ein Array-ähnliches Objekt über einen Iterator verfügt, kann dieser explizit oder implizit verwendet werden, um auf die gleiche Weise wie bei echten Arrays über das Objekt zu iterieren.

2. Konvertieren Sie in ein echtes Array

Es gibt auch eine andere, sehr einfache Möglichkeit, über ein Array-ähnliches Objekt zu iterieren: Konvertieren Sie es in ein echtes Array und verwenden Sie eine der oben beschriebenen Methoden zum Iterieren über reale Arrays. Für die Konvertierung können Sie die generische Methode Array.prototype.slice verwenden, die auf jedes Array-ähnliche Objekt angewendet werden kann. Das geht ganz einfach, wie im folgenden Beispiel gezeigt:

Var trueArray = Array.prototype.slice.call(arrayLikeObject, 0);

Wenn Sie beispielsweise eine NodeList-Sammlung in ein tatsächliches Array konvertieren möchten, benötigen Sie Code in etwa wie diesen:

Var divs = Array.prototype.slice.call(document.querySelectorAll("div"), 0);

3. Ein Hinweis zu Laufzeitobjekten

Wenn Sie Array.prototype-Methoden auf Laufzeitobjekte (z. B. DOM-Sammlungen) anwenden, sollten Sie sich darüber im Klaren sein, dass nicht garantiert werden kann, dass diese Methoden in allen Laufzeitumgebungen (einschließlich Browsern) ordnungsgemäß funktionieren. Dies hängt vom Verhalten eines bestimmten Objekts in einer bestimmten Ausführungsumgebung ab, oder genauer gesagt, davon, wie die abstrakte Operation HasProperty in diesem Objekt implementiert wird. Das Problem besteht darin, dass der ES5-Standard selbst die Möglichkeit zulässt, dass sich ein Objekt in Bezug auf diesen Vorgang falsch verhält (siehe §8.6.2).

Daher ist es wichtig, die Funktionsweise der Array.prototype-Methoden in jeder Laufzeitumgebung (Browser) zu testen, in der Sie Ihre Anwendung verwenden möchten.

• I. Iterieren über reale Arrays
  1. forEach-Methode und verwandte Methoden
  2. for-Schleife
  3. Richtige Verwendung der for...in-Schleife
  4. for...of-Schleife (implizite Verwendung des Iterators)
  5. Explizite Verwendung des Iterators
• 1. Verwenden von Methoden zum Durchlaufen realer Arrays
  2. In ein echtes Array konvertieren
  3. Ein Hinweis zu Laufzeitobjekten

I. Iterieren über reale Arrays

1. Methode Array.prototype.forEach ;
2. klassische for-Schleife
3. eine „richtig“ konstruierte for...in-Schleife.

1. for...of-Schleife (implizite Verwendung des Iterators);
2. explizite Verwendung von Iteratoren.

1. Die forEach-Methode und verwandte Methoden

Anwendungsbeispiel:
var a = ["a", "b", "c"]; a.forEach(function(entry) ( console.log(entry); ));
Im Allgemeinen erfordert die Verwendung von forEach eine Verbindung mit der Emulationsbibliothek es5-shim für Browser, die diese Methode nicht nativ unterstützen. Dazu gehören IE 8 und früher, die mancherorts noch im Einsatz sind.

Der Vorteil von forEach besteht darin, dass keine lokalen Variablen zum Speichern des Index und des Werts des aktuellen Array-Elements deklariert werden müssen, da diese automatisch als Argumente an die Rückruffunktion übergeben werden.

Wenn Sie sich Sorgen über die möglichen Kosten für einen Rückruf für jedes Element machen, machen Sie sich keine Sorgen und lesen Sie dies.

ForEach ist so konzipiert, dass es alle Elemente eines Arrays durchläuft. Darüber hinaus bietet ES5 jedoch mehrere weitere nützliche Methoden zum Durchlaufen aller oder einiger Elemente sowie zum Durchführen einiger Aktionen an ihnen:

• every – gibt true zurück, wenn der Callback für jedes Element des Arrays einen Wert zurückgibt, der in true konvertiert werden kann.
• some – gibt „true“ zurück, wenn der Rückruf für mindestens ein Element des Arrays einen Wert zurückgibt, der in „true“ konvertiert werden kann.
• filter – erstellt ein neues Array, das die Elemente des ursprünglichen Arrays enthält, für die der Rückruf true zurückgibt.
• Karte – erstellt ein neues Array bestehend aus den vom Rückruf zurückgegebenen Werten.
• Reduzieren – Reduziert ein Array auf einen einzelnen Wert und wendet nacheinander einen Rückruf auf jedes Element des Arrays an, beginnend mit dem ersten (kann nützlich sein, um die Summe von Array-Elementen und anderen Zusammenfassungsfunktionen zu berechnen).
• ReduceRight – funktioniert ähnlich wie Reduce, durchläuft die Elemente jedoch in umgekehrter Reihenfolge.

2. For-Schleife

Var a = ["a", "b", "c"]; Var-Index; für (Index = 0; Index< a.length; ++index) { console.log(a); }
Wenn die Länge des Arrays während der gesamten Schleife konstant ist und die Schleife selbst zu einem leistungskritischen Codeabschnitt gehört (was unwahrscheinlich ist), können Sie eine „optimalere“ Version von for verwenden, die die Länge des Arrays speichert :

Var a = ["a", "b", "c"]; var index, len; for (index = 0, len = a.length; index< len; ++index) { console.log(a); }
Theoretisch sollte dieser Code etwas schneller laufen als der vorherige.

Wenn die Reihenfolge der Elemente nicht wichtig ist, können Sie im Hinblick auf die Optimierung sogar noch weiter gehen und die Variable zum Speichern der Länge des Arrays entfernen und die Reihenfolge der Suche in das Gegenteil ändern:

Var a = ["a", "b", "c"]; Var-Index; for (index = a.length - 1; index >= 0; --index) ( console.log(a); )
In modernen JavaScript-Engines bedeuten solche Optimierungsspiele jedoch meist nichts.

3. Korrekte Verwendung der for...in-Schleife

In manchen Fällen, beispielsweise bei der Iteration über Arrays mit geringer Dichte, kann for...in jedoch nützlich sein, sofern Sie Vorsichtsmaßnahmen treffen, wie im folgenden Beispiel gezeigt:

// a - Sparse-Array var a = ; a = „a“; a = „b“; a = „c“; for (var key in a) ( if (a.hasOwnProperty(key) && /^0$|^\d*$/.test(key) && key<= 4294967294) { console.log(a); } }
In diesem Beispiel werden bei jeder Iteration der Schleife zwei Prüfungen durchgeführt:

1. dass das Array eine eigene Eigenschaft namens Schlüssel hat (nicht von seinem Prototyp geerbt).
2. Dieser Schlüssel ist eine Zeichenfolge, die die Dezimaldarstellung einer Ganzzahl enthält, deren Wert kleiner als 4294967294 ist. Woher kommt die letzte Zahl? Aus der Definition eines Array-Index in ES5, die zeigt, dass der höchste Index, den ein Element in einem Array haben kann, ist: (2^32 - 2) = 4294967294 .

Um nicht jedes Mal, wenn Sie ein Array durchlaufen müssen, einen so umständlichen Prüfcode zu schreiben, können Sie ihn als separate Funktion schreiben:

Funktion arrayHasOwnIndex(array, key) ( return array.hasOwnProperty(key) && /^0$|^\d*$/.test(key) && key<= 4294967294; }
Dann wird der Schleifenkörper aus dem Beispiel deutlich reduziert:

For (key in a) ( if (arrayHasOwnIndex(a, key)) ( console.log(a); ) )
Der oben besprochene Prüfcode ist universell und für alle Fälle geeignet. Stattdessen können Sie aber auch eine kürzere Version verwenden, die zwar formal nicht ganz korrekt, aber dennoch für die meisten Fälle geeignet ist:

For (key in a) ( if (a.hasOwnProperty(key) && String(parseInt(key, 10)) === key) ( console.log(a); ) )

4. For...of-Schleife (implizite Verwendung des Iterators)

Iterator ist ein von einem Objekt implementiertes Protokoll, das eine Standardmethode zum Erhalten einer Folge von Werten (endlich oder unendlich) definiert.
Ein Iterator ist ein Objekt, das eine next()-Methode definiert – eine Funktion ohne Argumente, die ein Objekt mit zwei Eigenschaften zurückgibt:

1. done (boolean) – wahr, wenn der Iterator das Ende der iterierbaren Sequenz erreicht hat. Andernfalls ist der Wert false .
2. Wert – definiert den vom Iterator zurückgegebenen Wert. Kann undefiniert (fehlend) sein, wenn die done-Eigenschaft true ist.

Beispiel für die Verwendung von for...of:

Varval; var a = ["a", "b", "c"]; for (Wert von a) ( console.log(val); )
Im obigen Beispiel ruft die for...of-Schleife implizit den Iterator des Array-Objekts auf, um jeden Wert des Arrays abzurufen.

5. Explizite Verwendung von Iteratoren

Var a = ["a", "b", "c"]; var it = a.entries(); Var-Eintrag; while (!(entry = it.next()).done) ( console.log(entry.value); )
In diesem Beispiel gibt die Methode Array.prototype.entries einen Iterator zurück, der zum Anzeigen der Werte des Arrays verwendet wird. Bei jeder Iteration enthält „entry.value“ ein Array der Form [key, value] .

II. Iterieren über Array-ähnliche Objekte

1. Verwenden von Methoden zum Durchlaufen realer Arrays

Die for- und for...in-Konstrukte können auf arrayähnliche Objekte genauso angewendet werden wie auf echte Arrays.

ForEach und andere Array.prototype-Methoden gelten auch für Array-ähnliche Objekte. Dazu müssen Sie Function.call oder Function.apply verwenden.

Wenn Sie beispielsweise forEach auf die childNodes-Eigenschaft eines Node-Objekts anwenden möchten, gehen Sie folgendermaßen vor:

Array.prototype.forEach.call(node.childNodes, function(child) ( // etwas mit dem untergeordneten Objekt machen));
Um die Wiederverwendung dieses Tricks zu vereinfachen, können Sie einen Verweis auf die Methode Array.prototype.forEach in einer separaten Variablen deklarieren und diese als Verknüpfung verwenden:

// (Angenommen, der gesamte Code unten befindet sich im selben Bereich) var forEach = Array.prototype.forEach; // ... forEach.call(node.childNodes, function(child) ( // etwas mit dem untergeordneten Objekt machen));
Wenn ein Array-ähnliches Objekt über einen Iterator verfügt, kann dieser explizit oder implizit verwendet werden, um auf die gleiche Weise wie bei echten Arrays über das Objekt zu iterieren.

2. Konvertieren Sie in ein echtes Array

Var trueArray = Array.prototype.slice.call(arrayLikeObject, 0);
Wenn Sie beispielsweise eine NodeList-Sammlung in ein tatsächliches Array konvertieren möchten, benötigen Sie Code in etwa wie diesen:

Var divs = Array.prototype.slice.call(document.querySelectorAll("div"), 0);
Aktualisieren: Wie in den Kommentaren von Rock und Torbasow erwähnt, können Sie in ES6 die visuellere Array.from-Methode anstelle von Array.prototype.slice verwenden.

3. Ein Hinweis zu Laufzeitobjekten

Daher ist es wichtig, die Funktionsweise der Array.prototype-Methoden in jeder Laufzeitumgebung (Browser) zu testen, in der Sie Ihre Anwendung verwenden möchten.

Der für jede() Die Methode führt eine bereitgestellte Funktion einmal für jedes Array-Element aus.

Die Quelle für dieses interaktive Beispiel ist in einem GitHub-Repository gespeichert. Wenn Sie zum interaktiven Beispielprojekt beitragen möchten, klonen Sie bitte https://github.com/mdn/interactive-examples und senden Sie uns eine Pull-Anfrage.

Syntax

Parameter

Rückgabewert

Beschreibung

forEach() ruft eine bereitgestellte Rückruffunktion einmal für jedes Element in einem Array in aufsteigender Reihenfolge auf. Es wird nicht für Indexeigenschaften aufgerufen, die gelöscht oder nicht initialisiert wurden. (Für spärliche Arrays, .)

Callback wird mit drei Argumenten aufgerufen:

1. der Wert des Elements
2. der Index des Elements
3. das Array-Objekt, das durchlaufen wird

Wenn forEach() ein thisArg-Parameter bereitgestellt wird, wird dieser als Callback-This-Wert verwendet. Der thisArg-Wert, der letztendlich durch den Callback beobachtbar ist, wird gemäß den üblichen Regeln zur Bestimmung des This-Werts bestimmt, der von einer Funktion gesehen wird.

Der Bereich der von forEach() verarbeiteten Elemente wird vor dem ersten Aufruf von callback festgelegt. Elemente, die nach Beginn des Aufrufs von forEach() an das Array angehängt werden, werden von callback nicht besucht. Wenn vorhandene Elemente des Arrays geändert oder gelöscht werden, ist ihr an Callback übergebener Wert der Wert zu dem Zeitpunkt, an dem forEach() sie besucht. Elemente, die vor dem Besuch gelöscht werden, werden nicht besucht. Wenn während der Iteration bereits besuchte Elemente entfernt werden (z. B. mit Shift()), werden spätere Elemente übersprungen. (Siehe dieses Beispiel unten.)

forEach() führt die Callback-Funktion einmal für jedes Array-Element aus; Im Gegensatz zu Map() oder Reduce() gibt es immer den Wert undefiniert zurück und ist nicht verkettbar. Der typische Anwendungsfall besteht darin, Nebenwirkungen am Ende einer Kette auszuführen.

forEach() verändert nicht das Array, für das es aufgerufen wird. (Ein Rückruf kann dies jedoch tun)

Es gibt keine andere Möglichkeit, eine forEach()-Schleife zu stoppen oder zu unterbrechen, als eine Ausnahme auszulösen. Wenn Sie ein solches Verhalten benötigen, ist die Methode forEach() das falsche Werkzeug.

Eine vorzeitige Kündigung kann erfolgen durch:

Array-Methoden: every() , some() , find() und findIndex() testen die Array-Elemente mit einem Prädikat, das einen wahrheitsgetreuen Wert zurückgibt, um festzustellen, ob eine weitere Iteration erforderlich ist.

Beispiele

Keine Operation für nicht initialisierte Werte (sparse Arrays)

Konvertieren einer for-Schleife in forEach

Drucken des Inhalts eines Arrays

Notiz: Um den Inhalt eines Arrays in der Konsole anzuzeigen, können Sie console.table() verwenden, das eine formatierte Version des Arrays druckt.

Das folgende Beispiel veranschaulicht einen alternativen Ansatz unter Verwendung von forEach() .

Der folgende Code protokolliert eine Zeile für jedes Element in einem Array:

Funktion logArrayElements(element, index, array) ( console.log("a[" + index + "] = " + element) ) // Beachten Sie, dass Index 2 übersprungen wird, da sich an // dieser Position im kein Element befindet Array... .forEach(logArrayElements) // Protokolle: // a = 2 // a = 5 // a = 9

Mit thisArg

Das folgende (erfundene) Beispiel aktualisiert die Eigenschaften eines Objekts von jedem Eintrag im Array:

Funktion Counter() ( this.sum = 0 this.count = 0 ) Counter.prototype.add = function(array) ( array.forEach(function(entry) ( this.sum += Eintrag ++this.count ), this ) // ^---- Hinweis ) const obj = new Counter() obj.add() obj.count // 3 obj.sum // 16

Da der Parameter thisArg (this) für forEach() bereitgestellt wird, wird er bei jedem Aufruf an Callback übergeben. Der Callback verwendet ihn als seinen This-Wert.

Eine Funktion zum Kopieren von Objekten

Der folgende Code erstellt eine Kopie eines bestimmten Objekts.

Es gibt verschiedene Möglichkeiten, eine Kopie eines Objekts zu erstellen. Das Folgende ist nur eine Möglichkeit und wird vorgestellt, um zu erklären, wie Array.prototype.forEach() mithilfe von ECMAScript 5 Object.*-Metaeigenschaftsfunktionen funktioniert.

Funktion copy(obj) ( const copy = Object.create(Object.getPrototypeOf(obj)) const propNames = Object.getOwnPropertyNames(obj) propNames.forEach(function(name) ( const desc = Object.getOwnPropertyDescriptor(obj, name) Objekt .defineProperty(copy, name, desc) )) return copy ) const obj1 = ( a: 1, b: 2 ) const obj2 = copy(obj1) // obj2 sieht jetzt aus wie obj1

Wenn das Array während der Iteration geändert wird, werden möglicherweise andere Elemente übersprungen.

Das folgende Beispiel protokolliert „one“, „two“, „four“.

Wenn der Eintrag den Wert „two" is reached, the first entry of the whole array is shifted off-resulting in all remaining entries moving up one position. Because element "four" is now at an earlier position in the array, "three" will be skipped.!}

forEach() erstellt vor der Iteration keine Kopie des Arrays.

Lassen Sie Wörter = ["eins", "zwei", "drei", "vier"] Wörter.forEach(Funktion(Wort) ( Console.log(Wort) if (Wort === "Zwei") ( Wörter.shift( ) ) )) // eins // zwei // vier

Reduzieren Sie ein Array

Das folgende Beispiel dient nur zu Lernzwecken. Wenn Sie ein Array mithilfe integrierter Methoden reduzieren möchten, können Sie Array.prototype.flat() verwenden (das voraussichtlich Teil von ES2019 sein wird und in einigen Browsern bereits implementiert ist).

/** * Reduziert übergebenes Array in eindimensionales Array * * @params (array) arr * @returns (array) */ function flatten(arr) ( const result = arr.forEach((i) => ( if (Array. isArray(i)) ( result.push(...flatten(i)) ) else ( result.push(i) )) return result ) // Verwendung const problem = , 8, 9]] flatten(problem) / /

Hinweis zur Verwendung von Promises oder asynchronen Funktionen

Spezifikationen

Browser-Kompatibilität

Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, schauen Sie sich bitte https://github.com/mdn/browser-compat-data an und senden Sie uns eine Pull-Anfrage.

Kompatibilitätsdaten auf GitHub aktualisieren

Letzte Aktualisierung: 26.03.2018

Das Array-Objekt stellt ein Array dar und stellt eine Reihe von Eigenschaften und Methoden bereit, mit denen wir das Array manipulieren können.

Initialisieren eines Arrays

Sie können ein leeres Array mit eckigen Klammern oder dem Array-Konstruktor erstellen:

Var-Benutzer = new Array(); var people = ; console.log(Benutzer); // Array console.log(people); // Array

Sie können ein Array sofort mit einer bestimmten Anzahl von Elementen initialisieren:

Varuser = new Array("Tom", "Bill", "Alice"); var people = ["Sam", "John", "Kate"]; console.log(Benutzer); // ["Tom", "Bill", "Alice"] console.log(people); // [„Sam“, „John“, „Kate“]

Sie können ein Array definieren und ihm nach und nach neue Elemente hinzufügen:

Var-Benutzer = new Array(); Benutzer = "Tom"; Benutzer = „Kate“; console.log(Benutzer); // „Tom“ console.log(users); // nicht definiert

Es spielt keine Rolle, dass das Array standardmäßig mit der Länge Null erstellt wird. Mithilfe von Indizes können wir das eine oder andere Element in einem Array an einem bestimmten Index ersetzen.

Länge

Um die Länge eines Arrays herauszufinden, verwenden Sie die Längeneigenschaft:

Var Fruit = new Array(); Frucht = „Äpfel“; Frucht = „Birnen“; Frucht = „Pflaumen“; document.write("Im Array Fruit " + Fruit.length + " Element:
"); for(var i=0; i< fruit.length; i++) document.write(fruit[i] + "
");

Tatsächlich entspricht die Länge des Arrays dem Index des letzten Elements plus eins. Zum Beispiel:

Var-Benutzer = new Array(); // es gibt 0 Elemente im Array users = "Tom"; Benutzer = „Kate“; Benutzer = "Sam"; for(var i=0; i

Browserausgabe:

Tom Kate undefiniert undefiniert Sam

Obwohl wir keine Elemente für die Indizes 2 und 3 hinzugefügt haben, beträgt die Länge des Arrays in diesem Fall die Zahl 5. Elemente mit den Indizes 2 und 3 haben lediglich den Wert undefiniert .

Kopieren eines Arrays. Scheibe()

Das Kopieren eines Arrays kann flach oder flach (flache Kopie) und tief (tiefe Kopie) sein.

Für flaches Kopieren reicht es aus, einer Variablen den Wert einer anderen Variablen zuzuweisen, die ein Array speichert:

Varuser = ["Tom", "Sam", "Bill"]; console.log(Benutzer); // ["Tom", "Sam", "Bill"] var people = Benutzer; // oberflächliches Kopieren von people = "Mike"; // das zweite Element ändern console.log(users); // [„Tom“, „Mike“, „Bill“]

In diesem Fall zeigt die Variable „people“ nach dem Kopieren auf dasselbe Array wie die Variable „users“. Wenn Sie also die Elemente in „people“ ändern, ändern sich auch die Elemente in „users“, da es sich tatsächlich um dasselbe Array handelt.

Dieses Verhalten ist nicht immer wünschenswert. Beispielsweise möchten wir, dass die Variablen nach dem Kopieren auf separate Arrays verweisen. Und in diesem Fall können Sie Deep Copy mit der Methode „slice()“ verwenden:

Varuser = ["Tom", "Sam", "Bill"]; console.log(Benutzer); // ["Tom", "Sam", "Bill"] var people = users.slice(); // Deep Copy people = "Mike"; // das zweite Element ändern console.log(users); // ["Tom", "Sam", "Bill"] console.log(people); // [„Tom“, „Mike“, „Bill“]

In diesem Fall verweisen die Variablen nach dem Kopieren auf verschiedene Arrays und wir können sie getrennt voneinander ändern.

Mit der Methode „slice()“ können Sie auch einen Teil eines Arrays kopieren:

Varuser = ["Tom", "Sam", "Bill", "Alice", "Kate"]; var people = users.slice(1, 4); console.log(people); // [„Sam“, „Bill“, „Alice“]

Der Methode „slice()“ werden die Start- und Endindizes übergeben, die zum Abrufen von Werten aus dem Array verwendet werden. Das heißt, in diesem Fall erfolgt die Auswahl im neuen Array von Index 1 bis Index 4, nicht eingeschlossen. Und da die Array-Indizierung bei Null beginnt, enthält das neue Array das zweite, dritte und vierte Element.

drücken()

Die Methode push() fügt am Ende des Arrays ein Element hinzu:

Var-Frucht = ; Fruit.push("Äpfel"); Fruit.push("Birnen"); Fruit.push("Pflaumen"); Fruit.push("Cherry","Apricot
"); document.write(fruit); // Äpfel, Birnen, Pflaumen, Kirschen, Aprikosen

Pop()

Die Methode pop() entfernt das letzte Element aus dem Array:

Var Fruit = [„Äpfel“, „Birnen“, „Pflaumen“]; var lastFruit = Fruit.pop(); // Extrahiere das letzte Element aus dem Array document.write(lastFruit + "
"); document.write("Im Array Fruit " + Fruit.length + " Element:
"); for(var i=0; i ");

Browserausgabe:

Pflaumen Die Obstsorte besteht aus 2 Elementen: Äpfel, Birnen

Schicht()

Die Methode „shift()“ ruft das erste Element aus dem Array ab und entfernt es:

Var Fruit = [„Äpfel“, „Birnen“, „Pflaumen“]; var firstFruit = Fruit.shift(); document.write(firstFruit + "
"); document.write("Im Array Fruit " + Fruit.length + " Element:
"); for(var i=0; i ");

Browserausgabe:

Äpfel Die Fruchtreihe besteht aus 2 Elementen: Birnen, Pflaumen

unshift()

Die Methode unshift() fügt am Anfang des Arrays ein neues Element hinzu:

Var Fruit = [„Äpfel“, „Birnen“, „Pflaumen“]; Fruit.unshift("Aprikosen"); document.write(fruit);

Browserausgabe:

Aprikosen, Äpfel, Birnen, Pflaumen

Entfernen eines Elements nach Index. spleißen()

Die splice()-Methode entfernt Elemente an einem bestimmten Index. Zum Beispiel Elemente aus dem dritten Index entfernen:

Varuser = ["Tom", "Sam", "Bill", "Alice", "Kate"]; var gelöscht = users.splice(3); console.log(gelöscht); // [ „Alice“, „Kate“ ] console.log(users); // [ „Tom“, „Sam“, „Bill“ ]

Die Slice-Methode gibt die entfernten Elemente zurück.

In diesem Fall erfolgt die Löschung am Anfang des Arrays. Wenn Sie einen negativen Index übergeben, erfolgt der Löschvorgang am Ende des Arrays. Entfernen wir zum Beispiel das letzte Element:

Varuser = ["Tom", "Sam", "Bill", "Alice", "Kate"]; var gelöscht = users.splice(-1); console.log(gelöscht); // [ „Kate“ ] console.log(users); // [ „Tom“, „Sam“, „Bill“, „Alice“ ]

Eine zusätzliche Version der Methode ermöglicht es Ihnen, den Endindex zum Löschen anzugeben. Löschen wir zum Beispiel den ersten bis dritten Index:

Varuser = ["Tom", "Sam", "Bill", "Alice", "Kate"]; var gelöscht = users.splice(1,3); console.log(gelöscht); // [ „Sam“, „Bill“, „Alice“ ] console.log(users); // [ „Tom“, „Kate“ ]

Eine andere Version der Splice-Methode ermöglicht es Ihnen, neue Elemente anstelle gelöschter Elemente einzufügen:

Varuser = ["Tom", "Sam", "Bill", "Alice", "Kate"]; var gelöscht = users.splice(1,3, „Ann“, „Bob“); console.log(gelöscht); // [ „Sam“, „Bill“, „Alice“ ] console.log(users); // [ „Tom“, „Ann“, „Bob“, „Kate“ ]

In diesem Fall löschen wir drei Elemente aus dem 1. bis 3. Index und fügen stattdessen zwei Elemente ein.

concat()

Die Methode concat() wird zum Kombinieren von Arrays verwendet:

Var Fruit = [„Äpfel“, „Birnen“, „Pflaumen“]; var Gemüse = ["Tomaten", "Gurken", "Kartoffeln"]; var products = Fruit.concat(vegetables); for(var i=0; i< products.length; i++) document.write(products[i] + "
");

In diesem Fall ist es nicht notwendig, nur Arrays desselben Typs zu kombinieren. Verschiedene Typen sind möglich:

Var Fruit = [„Äpfel“, „Birnen“, „Pflaumen“]; var Preise = ; var products = Fruit.concat(prices);

verbinden()

Die Methode join() fügt alle Elemente eines Arrays zu einem String zusammen:

Var Fruit = [„Äpfel“, „Birnen“, „Pflaumen“, „Aprikosen“, „Pfirsiche“]; var FruitString = Fruit.join(", "); document.write(fruitString);

Der Methode join() wird das Trennzeichen zwischen Array-Elementen übergeben. Als Trennzeichen werden in diesem Fall ein Komma und ein Leerzeichen („,“) verwendet.

Sortieren()

Die Methode sort() sortiert das Array in aufsteigender Reihenfolge:

Var Fruit = [„Äpfel“, „Birnen“, „Pflaumen“, „Aprikosen“, „Pfirsiche“]; obst.sort(); for(var i=0; i< fruit.length; i++) document.write(fruit[i] + "
");

Browserausgabe:

Aprikosen, Birnen, Pfirsiche, Pflaumen, Äpfel

umkehren()

Die Methode reverse() kehrt das Array rückwärts um:

Var Fruit = [„Äpfel“, „Birnen“, „Pflaumen“, „Aprikosen“, „Pfirsiche“]; Fruit.reverse(); for(var i=0; i< fruit.length; i++) document.write(fruit[i] + "
");

Browserausgabe:

Pfirsiche, Aprikosen, Pflaumen, Birnen, Äpfel

In Kombination mit der Methode sort() können Sie das Array in absteigender Reihenfolge sortieren:

Var Fruit = [„Äpfel“, „Birnen“, „Pflaumen“, „Aprikosen“, „Pfirsiche“]; Fruit.sort().reverse(); for(var i=0; i< fruit.length; i++) document.write(fruit[i] + "
");

Browserausgabe:

Äpfel, Pflaumen, Pfirsiche, Birnen, Aprikosen

Den Index eines Elements finden

Die Methoden indexOf() und lastIndexOf() geben den Index der ersten und letzten Aufnahme eines Elements in das Array zurück. Zum Beispiel:

Var Fruit = [„Äpfel“, „Birnen“, „Pflaumen“, „Äpfel“, „Birnen“]; var firstIndex = Fruit.indexOf("apples"); var lastIndex = obst.lastIndexOf("äpfel"); var otherIndex = Fruit.indexOf("cherries"); document.write(firstIndex); // 0 document.write(lastIndex); // 3 document.write(otherIndex); // -1

firstIndex hat den Wert 0, da die erste Aufnahme der Zeile „apples“ im Array bei Index 0 und die letzte bei Index 3 liegt.

Befindet sich das Element nicht im Array, geben in diesem Fall die Methoden indexOf() und lastIndexOf() den Wert -1 zurück.

jeden()

Die Methode every() prüft, ob alle Elemente eine bestimmte Bedingung erfüllen:

Var-Zahlen = [ 1, -12, 8, -4, 25, 42 ]; Funktionsbedingung(Wert, Index, Array) ( var result = false; if (value > 0) ( result = true; ) return result; ); var übergeben = zahlen.every(condition); document.write(bestanden); // FALSCH

Der Methode every() wird eine Funktion übergeben, die die Bedingung als Parameter darstellt. Diese Funktion benötigt drei Parameter:

Funktionsbedingung (Wert, Index, Array) ( )

Der Wertparameter stellt das aktuelle Array-Element dar, das iteriert wird, der Indexparameter stellt den Index dieses Elements dar und der Array-Parameter übergibt einen Verweis auf das Array.

In dieser Funktion können wir den übergebenen Elementwert auf Übereinstimmung mit einer Bedingung überprüfen. In diesem Beispiel überprüfen wir beispielsweise jedes Element des Arrays, um festzustellen, ob es größer als Null ist. Ist er größer, geben wir den Wert true zurück, d. h. das Element erfüllt die Bedingung. Wenn weniger, dann wird false zurückgegeben – das Element erfüllt die Bedingung nicht.

Wenn die Methode „numbers.every(condition)“ aufgerufen wird, durchläuft sie daher alle Elemente des Arrays „Zahlen“ und übergibt sie nacheinander an die Funktion „Bedingung“. Wenn diese Funktion für alle Elemente „true“ zurückgibt, gibt die Methode every() „true“ zurück. Wenn mindestens ein Element nicht mit der Bedingung übereinstimmt, gibt die Methode every() false zurück.

manche()

Die Methode some() ähnelt der Methode every(), prüft jedoch, ob mindestens ein Element einer Bedingung entspricht. Und in diesem Fall gibt die Methode some() true zurück. Wenn im Array keine Elemente vorhanden sind, die der Bedingung entsprechen, wird false zurückgegeben:

Var-Zahlen = [ 1, -12, 8, -4, 25, 42 ]; Funktionsbedingung(Wert, Index, Array) ( var result = false; if (value === 8) ( result = true; ) return result; ); var übergeben = zahlen.einige(Bedingung); // WAHR

Filter()

Die Methode filter() akzeptiert wie some() und every() eine Bedingungsfunktion. Aber gleichzeitig wird ein Array der Elemente zurückgegeben, die diese Bedingung erfüllen:

Var-Zahlen = [ 1, -12, 8, -4, 25, 42 ]; Funktionsbedingung(Wert, Index, Array) ( var result = false; if (value > 0) ( result = true; ) return result; ); var filteredNumbers = zahlen.filter(bedingung); for(var i=0; i< filteredNumbers.length; i++) document.write(filteredNumbers[i] + "
");

Browserausgabe:

1 8 25 42

forEach() und map()

Die Methoden forEach() und map() iterieren über Elemente und führen bestimmte Operationen an ihnen aus. Um beispielsweise die Quadrate von Zahlen in einem Array zu berechnen, können Sie den folgenden Code verwenden:

Var-Zahlen = [1, 2, 3, 4, 5, 6]; for(var i = 0; i "); }

Aber mit der Methode forEach() können Sie diese Konstruktion vereinfachen:

Var-Zahlen = [1, 2, 3, 4, 5, 6]; Funktion quadrat(Wert, Index, Array) ( var result = value * value; document.write("Das Quadrat der Zahl " + value + " ist " + result + "
"); ); zahlen.forEach(quadrat);

Die Methode forEach() verwendet als Parameter dieselbe Funktion, in die bei der Iteration über Elemente das aktuell iterierte Element übergeben und Operationen daran ausgeführt werden.

Die Methode „map()“ ähnelt der Methode „forEach“; sie benötigt als Parameter auch eine Funktion, die Operationen an den Elementen des Arrays ausführt, aber die Methode „map()“ gibt ein neues Array mit den Ergebnissen von Operationen an den Elementen des Arrays zurück.

Lassen Sie uns beispielsweise die Kartenmethode verwenden, um die Quadrate von Zahlen in einem Array zu berechnen:

Var-Zahlen = [1, 2, 3, 4, 5, 6]; Funktion quadrat(Wert, Index, Array) ( Rückgabeergebnis = Wert * Wert; ); var quadratArray = zahlen.map(quadrat); document.write(squareArray);

Die Funktion, die an die Methode „map()“ übergeben wird, empfängt das aktuelle Element, das gerade iteriert wird, führt Operationen daran aus und gibt einen Wert zurück. Dieser Wert geht dann in das resultierende SquareArray ein