Array.prototype.forEach()

callbackFn

Eine Funktion, die für jedes Element im Array ausgeführt wird. Der Rückgabewert wird ignoriert. 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 dem forEach() aufgerufen wurde.

thisArg Optional

Ein Wert, der als this beim Ausführen von callbackFn verwendet werden soll. Siehe iterative Methoden.

Keiner (undefined).

Die forEach()-Methode ist eine iterative Methode. Sie ruft eine bereitgestellte callbackFn-Funktion einmal für jedes Element in einem Array in aufsteigender Reihenfolge der Indizes auf. Anders als map() gibt forEach() immer undefined zurück und ist nicht verkettenbar. Der typische Anwendungsfall ist das Ausführen von Seiteneffekten am Ende einer Kette. Lesen Sie den Abschnitt über iterative Methoden für mehr Informationen darüber, wie diese Methoden im Allgemeinen funktionieren.

callbackFn wird nur für Array-Indizes aufgerufen, denen Werte zugewiesen wurden. Es wird nicht für leere Stellen in dünn besetzten Arrays aufgerufen.

Die forEach()-Methode ist generisch. Sie erwartet nur, dass der this-Wert eine length-Eigenschaft und ganzzahlige Schlüssel-Eigenschaften hat.

Es gibt keine Möglichkeit, eine forEach()-Schleife zu stoppen oder zu unterbrechen, außer indem man eine Ausnahme wirft. Wenn Sie ein solches Verhalten benötigen, ist die forEach()-Methode das falsche Werkzeug.

Ein vorzeitiger Abbruch kann mit Schleifenausdrücken wie for, for...of und for...in erreicht werden. Array-Methoden wie every(), some(), find(), und findIndex() stoppen ebenfalls die Iteration sofort, wenn eine weitere Iteration nicht notwendig ist.

forEach() erwartet eine synchrone Funktion — es wartet nicht auf Promises. Stellen Sie sicher, dass Sie die Implikationen kennen, wenn Sie Promises (oder asynchrone Funktionen) als forEach-Rückrufe 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, siehe Promise-Komposition.

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

Das folgende (konstruierte) 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); // 3
console.log(obj.sum); // 16

Da der thisArg-Parameter (this) an forEach() übergeben wird, wird er jedes Mal, wenn callback aufgerufen wird, übergeben. Der Rückruf verwendet ihn als seinen this-Wert.

Der folgende Code erstellt eine Kopie eines gegebenen Objekts.

Es gibt verschiedene Methoden, um eine Kopie eines Objekts zu erstellen. Der folgende ist nur eine Möglichkeit und wird vorgestellt, um zu erklären, wie Array.prototype.forEach() funktioniert, indem Object.*-Hilfsfunktionen 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

Das folgende Beispiel dient nur Lernzwecken. Wenn Sie ein Array mit eingebauten 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 array-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 zuerst filter(), um die positiven Werte herauszufiltern, und dann forEach(), um seine 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

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 Rückruffunktion wird für den fehlenden Wert bei Index 2 nicht aufgerufen.

Die forEach()-Methode 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

• Polyfill von Array.prototype.forEach in core-js
• es-shims Polyfill von Array.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()