JavaScript/Objekte/Array/forEach

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Methode forEach ruft für jeden Wert des Arrays eine Callback-Funktion auf, der es diesen Wert übergibt. Sie ist als elegantere Schreibweise zu den üblichen Schleifen-Konstrukten von JavaScript im Umgang mit Arrays gedacht.

  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

Syntax

arr.forEach(callback[, thisArg])


Attribute
Writable true
Enumerable false
Configurable true


Folgende Parameter sind möglich:

  • callback: Funktion, die ein Element aus dem Array überarbeitet. Sie bekommt ihrerseits drei Parameter:
    • currentValue: aktuellen Wert aus dem Array
    • index: Index des Elements aus dem Array, über welches gerade iteriert wird
    • array: Referenz auf das gesamte (ursprüngliche) Array
  • thisArg: (optional) Kontext-Parameter, der als this genutzt wird bei der Ausführung der callback-Funktion.


Anwendungsbeispiel[Bearbeiten]

Beispiel
function log (v, i, ar) {
    /* Die Variable i enthält den Index des Wertes v
       im Array ar. Diese drei Parameter werden an die
       Callback-Funktion bei forEach übergeben. */
    if (console && console.dir) {
        // Ausgabe einer Objektstruktur auf die Konsole
        console.dir(v);
    }
}

var obst = ["Äpfel", "Birnen", "Zwetschgen"];

obst.forEach(log);

Im Beispiel wird eine Funktion log definiert, welche auf der JavaScript-Konsole des Browsers die Struktur des an sie übergebenen Objektes ausgibt, falls dieser das unterstützt.

Üblicherweise wird diese Methode als Ersatz für eine for-Schleife verwendet:

Beispiel
var obst = ["Äpfel", "Birnen", "Zwetschgen"];

obst.forEach(function (s, i, o) {
    // Die Variable o enthält eine Referenz auf das Array obst.
    alert(++i + ". Obst-Umfrage: Mögen Sie " + s + "?");
});
// "1. Obst-Umfrage: Mögen Sie Äpfel?"
// "2. Obst-Umfrage: Mögen Sie Birnen?"
// "3. Obst-Umfrage: Mögen Sie Zwetschgen?"

Das Verwenden der forEach-Methode hat den Vorteil, dass die in der Callback-Funktion eingeschlossenen Variablen (hier s und i) auch nur dort ihre Gültigkeit haben. Gerade beim Zuweisen von Ereignissen an Elementobjekte wäre es fatal, wenn durch eine im übergeordneten Geltungsbereich gültige Variable unerwünschte Nebeneffekte aufträten. Mehr zu Callback-Funktionen finden Sie unter Umgang mit Callback-Funktionen.

Die Callback-Funktion[Bearbeiten]

Die Callback-Funktion wird mit diesen drei Parametern von der forEach-Methode aufgerufen:

  • aktueller Wert (currentValue)
  • aktueller Index (index)
  • ursprüngliches Array (originalArray)
Beispiel
function cb (currentValue, index, originalArray) {
    // tu was
}

Der optionale Kontext-Parameter[Bearbeiten]

Wenn innerhalb der Callback-Funktion das Schlüsselwort this nicht auf das globale window-Objekt verweisen soll, dann kann mit diesem zweiten Parameter im forEach-Aufruf eine Referenz auf ein Objekt übertragen werden, welches stattdessen innerhalb der Callback-Funktion für this gelten soll.



Siehe auch[Bearbeiten]

Spezifikation[Bearbeiten]

forEach() ECMAScript 2015 2017 Draft