Array.prototype.forEach()

Die forEach() Methode führt eine übergebene Funktion für jedes Element eines Arrays aus.

Syntax

arr.forEach(callback[, thisArg])

Parameter

callback

Funktion, die ein Element aus dem Array überarbeitet. Sie bekommt ihrerseits drei Parameter:

currentValue

Das zu bearbeitende Element aus dem Array.

index

Der Index des Elements aus dem Array.

array

Das gesamte Array.

thisArg

Optional. Wert, der als this genutzt wird bei der Ausführung der callback-Funktion.

Beschreibung

forEach führt die übergebene callback-Funktion an jedem Element des ausführenden Arrays in aufsteigender Reihenfolge durch. Sie überspringt dabei gelöschte und ausgeschlossene Elemente. Sie wird allerdings für Elemente mit dem Wert undefined ausgeführt.

callback wird mit drei Argumenten aufgerufen:

• Dem Wert des Elements (value)
• Dem Index des Elements (index)
• Das Array, das durchlaufen wird (array)

Wenn ein thisArg-Parameter an forEach übergeben wird, wird es er auch an die callback-Funktion als deren this Wert weitergegeben.  Andernfalls wird dafür undefined genutzt.  Der this-Wert, der in der callback-Funktion wahrgenommen wird, ist festgelegt durch the usual rules for determining the this seen by a function.

Die Reichweite der Elemente, die von forEach durchlaufen werden, wird vor dem ersten Aufruf der callback-Funktion ermittelt. Elemente, die danach an das Array angefügt werden, werden nicht von der callback-Funktion beachtet. Wenn sich der Wert eines vorhandenen Elements im Array ändert, ist der Wert, der an die callback-Funktion übergeben wird, derjenige, den das Element Zeitpunkt des Aufrufs von forEach innehatte; Elemente, die zuvor gelöscht wurden, werden gar nicht beachtet.

forEach führt die  callback-Funktion einmal für jedes Array-Element aus; Anders als every und some, gibt es immer den Wert undefined zurück.

Beispiele

Ausgeben der Inhalte eines Arrays

Der folgende Quelltext gibt eine Zeile für jedes Element eines Arrays aus:

function logArrayElements(element, index, array) {
  console.log('a[' + index + '] = ' + element);
}

// Hinweis zur Auslassung: Es gibt keinen Eintrag mit dem Index 2, somit wird dieser übersprungen
[2, 5, , 9].forEach(logArrayElements);
// Ausgabe:
// a[0] = 2
// a[1] = 5
// a[3] = 9

Die Schleife verlassen

Der folgende Quelltext benutzt Array.prototype.every um den Inhalt eines Arrays auszugeben und stoppt, wenn ein Wert erreicht ist, der THRESHOLD überschreitet.

var THRESHOLD = 12;
var v = [5, 2, 16, 4, 3, 18, 20];
var res;

res = v.every(function(element, index, array) {
  console.log('element:', element);
  if (element >= THRESHOLD) {
    return false;
  }

  return true;
});
console.log('res:', res);
// Ausgabe:
// element: 5
// element: 2
// element: 16
// res: false

res = v.some(function(element, index, array) {
  console.log('element:', element);
  if (element >= THRESHOLD) {
    return true;
  }

  return false;
});
console.log('res:', res);
// Ausgabe:
// element: 5
// element: 2
// element: 16
// res: true

Funktion zum Kopieren eines Objekts

Der folgende Quelltext erzeugt eine Kopie des übergebenen Objekts. Es gibt verschiedene Möglichkeiten um ein Objekt zu kopieren, der folgende ist nur einer davon zur Veranschaulichung wie Array.prototype.forEach funktioniert, indem die ECMAScript 5 Object.* Funktionen genutzt werden.

function copy(o) {
  var copy = Object.create(Object.getPrototypeOf(o));
  var propNames = Object.getOwnPropertyNames(o);

  propNames.forEach(function(name) {
    var desc = Object.getOwnPropertyDescriptor(o, name);
    Object.defineProperty(copy, name, desc);
  });

  return copy;
}

var o1 = { a: 1, b: 2 };
var o2 = copy(o1); // o2 sieht jetzt aus wie o1

Polyfill

forEach wurde in der 5. Edition zum ECMA-262 Standard hinzugefügt; somit muss es nicht in anderen Ausführungen dieses Standards vorhanden sein. Man kann es umgehen, indem man den nachfolgenden Quelltext an das Anfang des Skriptes einfügt, was die Benutzung von forEach auch in Ausführungen, die es nicht von vornherein unterstützen, ermöglicht.  Dieser Algorithmus ist genau der, der in ECMA-262, 5. Edition spezifiziert wurde, in der Annahme, dass Object und TypeError ihre ursprünglichen Werte haben und dass callback.call auf die selbe Weise funktioniert wie Function.prototype.call.

// Production steps of ECMA-262, Edition 5, 15.4.4.18
// Reference: https://es5.github.io/#x15.4.4.18
if (!Array.prototype.forEach) {

  Array.prototype.forEach = function(callback, thisArg) {

    var T, k;

    if (this === null) {
      throw new TypeError(' this is null or not defined');
    }

    // 1. Let O be the result of calling ToObject passing the |this| value as the argument.
    var O = Object(this);

    // 2. Let lenValue be the result of calling the Get internal method of O with the argument "length".
    // 3. Let len be ToUint32(lenValue).
    var len = O.length >>> 0;

    // 4. If IsCallable(callback) is false, throw a TypeError exception.
    // See: https://es5.github.com/#x9.11
    if (typeof callback !== "function") {
      throw new TypeError(callback + ' is not a function');
    }

    // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
    if (arguments.length > 1) {
      T = thisArg;
    }

    // 6. Let k be 0
    k = 0;

    // 7. Repeat, while k < len
    while (k < len) {

      var kValue;

      // a. Let Pk be ToString(k).
      //   This is implicit for LHS operands of the in operator
      // b. Let kPresent be the result of calling the HasProperty internal method of O with argument Pk.
      //   This step can be combined with c
      // c. If kPresent is true, then
      if (k in O) {

        // i. Let kValue be the result of calling the Get internal method of O with argument Pk.
        kValue = O[k];

        // ii. Call the Call internal method of callback with T as the this value and
        // argument list containing kValue, k, and O.
        callback.call(T, kValue, k, O);
      }
      // d. Increase k by 1.
      k++;
    }
    // 8. return undefined
  };
}

Spezifikationen

Browserkompatibilität

Siehe auch

• Array.prototype.find()
• Array.prototype.findIndex()
• Array.prototype.map()
• Array.prototype.every()
• Array.prototype.some()
• Map.prototype.forEach()
• Set.prototype.forEach()