Array.prototype.forEach()

Probieren Sie es aus

const array = ["a", "b", "c"];

array.forEach((element) => console.log(element));

// Expected output: "a"
// Expected output: "b"
// Expected output: "c"

Syntax

forEach(callbackFn)
forEach(callbackFn, thisArg)

Parameter

callbackFn

Eine Funktion, die für jedes Element im Array ausgeführt wird. Ihr Rückgabewert wird verworfen. Die Funktion wird mit den folgenden Argumenten aufgerufen:

element

Das aktuelle Element, das im Array verarbeitet wird.

index

Der Index des aktuellen Elements, das im Array verarbeitet wird.

array

Das Array, für das forEach() aufgerufen wurde.

thisArg Optional

Ein Wert, der bei der Ausführung von callbackFn als this verwendet wird. Siehe iterative Methoden.

Rückgabewert

Keiner (undefined).

Beschreibung

Die Methode forEach() ist eine iterative Methode. Sie ruft die bereitgestellte Funktion callbackFn für jedes Element eines Arrays einmal in aufsteigender Indexreihenfolge auf. Anders als map() gibt forEach() immer undefined zurück und kann nicht verkettet werden. Typischerweise wird die Methode verwendet, um am Ende einer Methodenkette Seiteneffekte auszuführen. Weitere Informationen zur allgemeinen Funktionsweise dieser Methoden finden Sie im Abschnitt über iterative Methoden.

callbackFn wird nur für Array-Indizes aufgerufen, denen Werte zugewiesen sind. Für leere Einträge in Arrays mit Lücken wird die Funktion nicht aufgerufen.

Die Methode forEach() ist generisch. Sie setzt lediglich voraus, dass der Wert von this eine length-Eigenschaft und Eigenschaften mit ganzzahligen Schlüsseln besitzt.

Eine forEach()-Schleife lässt sich nur durch Auslösen einer Ausnahme anhalten oder abbrechen. Wenn Sie ein solches Verhalten benötigen, ist forEach() nicht die richtige Methode.

Ein vorzeitiger Abbruch ist mit Schleifenanweisungen wie for, for...of und for...in möglich. Auch Array-Methoden wie every(), some(), find() und findIndex() beenden die Iteration sofort, wenn keine weitere Iteration erforderlich ist.

forEach() erwartet eine synchrone Funktion – die Methode wartet nicht auf Promises. Beachten Sie die Auswirkungen, wenn Sie Promises (oder asynchrone Funktionen) als Callbacks für forEach verwenden.

const ratings = [5, 4, 5];
let sum = 0;

const sumFunction = async (a, b) => a + b;

ratings.forEach(async (rating) => {
  sum = await sumFunction(sum, rating);
});

console.log(sum);
// Naively expected output: 14
// Actual output: 0

Wie Sie mehrere asynchrone Operationen nacheinander oder gleichzeitig ausführen, erfahren Sie unter Promise-Komposition.

Beispiele

Eine for-Schleife in forEach umwandeln

const items = ["item1", "item2", "item3"];
const copyItems = [];

// before
for (let i = 0; i < items.length; i++) {
  copyItems.push(items[i]);
}

// after
items.forEach((item) => {
  copyItems.push(item);
});

Den Inhalt eines Arrays ausgeben

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

const logArrayElements = (element, index /*, array */) => {
  console.log(`a[${index}] = ${element}`);
};

// Notice that index 2 is skipped, since there is no item at
// that position in the array.
[2, 5, , 9].forEach(logArrayElements);
// Logs:
// a[0] = 2
// a[1] = 5
// a[3] = 9

thisArg verwenden

Das folgende (konstruierte) Beispiel aktualisiert die Eigenschaften eines Objekts anhand jedes Eintrags im Array:

class Counter {
  constructor() {
    this.sum = 0;
    this.count = 0;
  }
  add(array) {
    // Only function expressions have their own this bindings.
    array.forEach(function countEntry(entry) {
      this.sum += entry;
      ++this.count;
    }, this);
  }
}

const obj = new Counter();
obj.add([2, 5, 9]);
console.log(obj.count); // 3
console.log(obj.sum); // 16

Da der Parameter thisArg (this) an forEach() übergeben wird, wird er bei jedem Aufruf von callback an die Funktion weitergegeben. Der Callback verwendet ihn als Wert für this.

Eine Funktion zum Kopieren von Objekten

Der folgende Code erstellt eine Kopie eines übergebenen Objekts.

Es gibt verschiedene Möglichkeiten, eine Kopie eines Objekts zu erstellen. Die folgende ist nur eine davon und soll mithilfe von Object.*-Hilfsfunktionen veranschaulichen, wie Array.prototype.forEach() funktioniert.

const copy = (obj) => {
  const copy = Object.create(Object.getPrototypeOf(obj));
  const propNames = Object.getOwnPropertyNames(obj);
  propNames.forEach((name) => {
    const desc = Object.getOwnPropertyDescriptor(obj, name);
    Object.defineProperty(copy, name, desc);
  });
  return copy;
};

const obj1 = { a: 1, b: 2 };
const obj2 = copy(obj1); // obj2 looks like obj1 now

Ein Array abflachen

Das folgende Beispiel dient nur zu Lernzwecken. Wenn Sie ein Array mit integrierten Methoden abflachen möchten, können Sie Array.prototype.flat() verwenden.

const flatten = (arr) => {
  const result = [];
  arr.forEach((item) => {
    if (Array.isArray(item)) {
      result.push(...flatten(item));
    } else {
      result.push(item);
    }
  });
  return result;
};

// Usage
const nested = [1, 2, 3, [4, 5, [6, 7], 8, 9]];
console.log(flatten(nested)); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

Das dritte Argument von callbackFn verwenden

Das Argument array ist nützlich, wenn Sie auf ein anderes Element im Array zugreifen möchten, insbesondere wenn keine Variable vorhanden ist, die auf das Array verweist. Im folgenden Beispiel werden zuerst mit filter() die positiven Werte extrahiert. Anschließend werden mit forEach() deren Nachbarwerte ausgegeben.

const numbers = [3, -1, 1, 4, 1, 5];
numbers
  .filter((num) => num > 0)
  .forEach((num, idx, arr) => {
    // Without the arr argument, there's no way to easily access the
    // intermediate array without saving it to a variable.
    console.log(arr[idx - 1], num, arr[idx + 1]);
  });
// undefined 3 1
// 3 1 4
// 1 4 1
// 4 1 5
// 1 5 undefined

forEach() bei Arrays mit Lücken verwenden

const arraySparse = [1, 3, /* empty */, 7];
let numCallbackRuns = 0;

arraySparse.forEach((element) => {
  console.log({ element });
  numCallbackRuns++;
});

console.log({ numCallbackRuns });

// { element: 1 }
// { element: 3 }
// { element: 7 }
// { numCallbackRuns: 3 }

Für den fehlenden Wert an Index 2 wird die Callback-Funktion nicht aufgerufen.

forEach() für Objekte aufrufen, die keine Arrays sind

Die Methode forEach() liest die length-Eigenschaft von this und greift dann auf jede Eigenschaft zu, deren Schlüssel eine nichtnegative ganze Zahl kleiner als length ist.

const arrayLike = {
  length: 3,
  0: 2,
  1: 3,
  2: 4,
  3: 5, // ignored by forEach() since length is 3
};
Array.prototype.forEach.call(arrayLike, (x) => console.log(x));
// 2
// 3
// 4

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Polyfill für Array.prototype.forEach in core-js
• Polyfill für Array.prototype.forEach von es-shims
• Leitfaden zu indizierten Sammlungen
• Array
• Array.prototype.find()
• Array.prototype.map()
• Array.prototype.filter()
• Array.prototype.every()
• Array.prototype.some()
• TypedArray.prototype.forEach()
• Map.prototype.forEach()
• Set.prototype.forEach()