Array.prototype.forEach() — Methode · JavaScript-Referenz

Signatur

forEach(callbackFn) / forEach(callbackFn, thisArg)

Beschreibung

Die Methode forEach() von Array-Instanzen führt eine bereitgestellte Funktion einmal für jedes Array-Element aus.

Die Methode forEach() ist eine iterative Methode. Sie ruft eine bereitgestellte callbackFn-Funktion einmal für jedes Element in einem Array in aufsteigender Index-Reihenfolge auf. Im Gegensatz zu map() gibt forEach() immer undefined zurück und ist nicht verkettbar. Der typische Anwendungsfall ist das Ausführen von Seiteneffekten am Ende einer Kette.

callbackFn wird nur für Array-Indizes aufgerufen, denen Werte zugewiesen wurden. Für leere Slots in sparse arrays wird er nicht aufgerufen.

Die Methode forEach() ist generisch. Sie erwartet lediglich, dass der this-Wert eine length-Eigenschaft und ganzzahlig indizierte Eigenschaften besitzt.

Es gibt keine Möglichkeit, eine forEach()-Schleife anders zu stoppen oder abzubrechen als durch das Werfen einer Exception. Wenn Sie ein solches Verhalten benötigen, ist die Methode forEach() das falsche Werkzeug.

Ein vorzeitiger Abbruch kann mit Schleifen-Anweisungen wie for, for...of und for...in erreicht werden. Array-Methoden wie every(), some(), find() und findIndex() stoppen die Iteration ebenfalls sofort, wenn eine weitere Iteration nicht mehr nötig ist.

forEach() erwartet eine synchrone Funktion — es wartet nicht auf Promises. Achten Sie bei der Verwendung von Promises (oder async-Funktionen) als forEach-Callbacks auf die Implikationen.

Um eine Reihe von asynchronen Operationen sequenziell oder nebenläufig auszuführen, siehe promise composition.

Parameter

Name	Typ	Default	Beschreibung
$callbackFn Pflicht	Function	—	Eine Funktion, die für jedes Element im Array ausgeführt wird. Ihr Rückgabewert wird verworfen. Die Funktion wird mit folgenden Argumenten aufgerufen: `element` (das aktuell verarbeitete Element im Array), `index` (der Index des aktuell verarbeiteten Elements) und `array` (das Array, auf dem `forEach()` aufgerufen wurde).
$thisArg	any	—	Ein Wert, der als `this` bei der Ausführung von `callbackFn` verwendet wird. Siehe iterative methods.

Rückgabewert

Typ

undefined

Beschreibung

Keiner (undefined).

Beispiele

Eine for-Schleife in forEach umwandeln

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

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

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

Inhalt eines Arrays ausgeben

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

// Beachte, dass Index 2 übersprungen wird, da an
// dieser Position kein Element im Array vorhanden ist.
[2, 5, , 9].forEach(logArrayElements);
// Logs:
// a[0] = 2
// a[1] = 5
// a[3] = 9

Verwendung von thisArg

class Counter {
  constructor() {
    this.sum = 0;
    this.count = 0;
  }
  add(array) {
    // Nur Funktionsausdrücke haben eigene this-Bindungen.
    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

Eine Funktion zum Kopieren von Objekten

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 sieht jetzt wie obj1 aus

Ein Array abflachen

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

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

Verwendung des dritten Arguments von callbackFn

const numbers = [3, -1, 1, 4, 1, 5];
numbers
  .filter((num) => num > 0)
  .forEach((num, idx, arr) => {
    // Ohne das arr-Argument gibt es keine einfache Möglichkeit,
    // auf das Zwischen-Array zuzugreifen, ohne es in einer Variablen zu speichern.
    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 sparse arrays 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 }

forEach() auf Nicht-Array-Objekten aufrufen

const arrayLike = {
  length: 3,
  0: 2,
  1: 3,
  2: 4,
  3: 5, // wird von forEach() ignoriert, da length gleich 3 ist
};
Array.prototype.forEach.call(arrayLike, (x) => console.log(x));
// 2
// 3
// 4

forEach() mit async-Callback (unerwartetes Verhalten)

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);
// Naiv erwartete Ausgabe: 14
// Tatsächliche Ausgabe: 0

// Wichtig · Fallstricke

Um den Inhalt eines Arrays in der Konsole anzuzeigen, können Sie console.table() verwenden, das eine formatierte Version des Arrays ausgibt. Bei Verwendung eines arrow function expression als Callback kann der Parameter thisArg weggelassen werden, da alle arrow functions den this-Wert lexikalisch binden.

Siehe auch

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()

← Vorheriger Eintrag Array.prototype.flatMap() Nächster Eintrag → Array.prototype.includes()