DieforEach()-Methode vonArray-Instanzen führt eine bereitgestellte Funktion einmal für jedes Array-Element aus.

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. Der 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, auf demforEach() aufgerufen wurde.

thisArgOptional

Ein Wert, der alsthis verwendet wird, wenncallbackFn ausgeführt wird. Sieheiterative Methoden.

Rückgabewert

Keiner (undefined).

Beschreibung

DieforEach()-Methode ist eineiterative Methode. Sie ruft eine bereitgestelltecallbackFn-Funktion einmal für jedes Element in einem Array in aufsteigender Indexreihenfolge auf. Im Gegensatz zumap() gibtforEach() immerundefined zurück und ist nicht verkettbar. Der typische Anwendungsfall ist, Seiteneffekte am Ende einer Kette auszuführen. Lesen Sie den Abschnitt überiterative Methoden für weitere Informationen darüber, wie diese Methoden im Allgemeinen funktionieren.

callbackFn wird nur für Array-Indizes aufgerufen, denen Werte zugewiesen wurden. Sie wird nicht für leere Stellen insparsely populated arrays aufgerufen.

DieforEach()-Methode istgenerisch. Sie erwartet nur, dass derthis-Wert einelength-Eigenschaft und integerbasierte Schlüssel-Eigenschaften hat.

Es gibt keine Möglichkeit, eineforEach()-Schleife zu stoppen oder zu unterbrechen, außer durch das Auslösen einer Ausnahme. Falls Sie ein solches Verhalten benötigen, istforEach() das falsche Werkzeug.

Eine vorzeitige Beendigung kann mit Schleifenanweisungen wiefor,for...of undfor...in erreicht werden. Array-Methoden wieevery(),some(),find() undfindIndex() beenden die Iteration ebenfalls sofort, wenn eine weitere Iteration nicht erforderlich ist.

forEach() erwartet eine synchrone Funktion – es wartet nicht auf Promises. Stellen Sie sicher, dass Sie sich der Implikationen bewusst sind, wenn Sie Promises (oder asynchrone Funktionen) alsforEach-Callbacks 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

Um eine Reihe von asynchronen Operationen sequentiell oder gleichzeitig auszuführen, siehePromise-Komposition.

Beispiele

Ein for-Loop in forEach umwandeln

const items = ["item1", "item2", "item3"];const copyItems = [];// beforefor (let i = 0; i < items.length; i++) {  copyItems.push(items[i]);}// afteritems.forEach((item) => {  copyItems.push(item);});

Den Inhalt eines Arrays ausgeben

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

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 (konstruiert) Beispiel aktualisiert die Eigenschaften eines Objekts aus jedem Eintrag 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); // 3console.log(obj.sum); // 16

Da derthisArg-Parameter (this) anforEach() übergeben wird, wird er bei jedem Aufruf ancallback übergeben. Der Callback verwendet ihn als seinenthis-Wert.

Kopierfunktion für Objekte

Der folgende Code erstellt eine Kopie eines gegebenen Objekts.

Es gibt verschiedene Möglichkeiten, eine Kopie eines Objekts zu erstellen. Die folgende ist nur eine Möglichkeit und wird präsentiert, um zu erklären, wieArray.prototype.forEach() funktioniert, indemObject.* Utility-Funktionen verwendet werden.

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 Lernzwecken. Wenn Sie ein Array mit eingebauten Methoden abflachen möchten, können SieArray.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;};// Usageconst nested = [1, 2, 3, [4, 5, [6, 7], 8, 9]];console.log(flatten(nested)); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

Verwenden des dritten Arguments voncallbackFn

Dasarray-Argument ist nützlich, wenn Sie auf ein anderes Element im Array zugreifen möchten, insbesondere, wenn Sie keine vorhandene Variable haben, die auf das Array verweist. Das folgende Beispiel verwendet zunächstfilter(), um die positiven Werte zu extrahieren, und dannforEach(), um ihre Nachbarn zu protokollieren.

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

Verwendung vonforEach() bei lückenhaften Arrays

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 }

Die Callback-Funktion wird nicht für den fehlenden Wert an Index 2 aufgerufen.

Aufruf vonforEach() bei Nicht-Array-Objekten

DieforEach()-Methode liest dielength-Eigenschaft vonthis und greift dann auf jede Eigenschaft zu, deren Schlüssel ein nicht-negativer Integer kleiner alslength 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 vonArray.prototype.forEach incore-js
• es-shims Polyfill vonArray.prototype.forEach
• Indizierte Sammlungen-Leitfaden
• 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()