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 fr jedes Element im Array ausgefhrt wird. Ihr Rckgabewert 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, bei dem forEach() aufgerufen wurde.

thisArg Optional

Ein Wert, der als this beim Ausfhren von callbackFn verwendet wird. Siehe iterative Methoden.

Rckgabewert

Keine (undefined).

Beschreibung

Die forEach()-Methode ist eine iterative Methode. Sie ruft eine bereitgestellte callbackFn-Funktion einmal fr jedes Element in einem Array in aufsteigender Indexreihenfolge auf. Im Gegensatz zu map() gibt forEach() immer undefined zurck und ist nicht verkettbar. Der typische Anwendungsfall ist die Ausfhrung von Nebeneffekten am Ende einer Kette. Lesen Sie den Abschnitt ber iterative Methoden, um mehr darber zu erfahren, wie diese Methoden im Allgemeinen funktionieren.

callbackFn wird nur fr Array-Indizes aufgerufen, denen Werte zugewiesen sind. Sie wird nicht fr leere Felder in dnn besetzten Arrays aufgerufen.

Die forEach()-Methode ist generisch. Sie erwartet nur, dass der this-Wert eine length-Eigenschaft und integer-basierte Eigenschaften hat.

Es gibt keine Mglichkeit, eine forEach()-Schleife zu stoppen oder zu unterbrechen, auer durch das Werfen einer Ausnahme. Wenn Sie ein solches Verhalten bentigen, ist die forEach()-Methode das falsche Werkzeug.

Ein frhzeitiges Beenden kann mit Schleifenanweisungen wie for, for...of und for...in erreicht werden. Array-Methoden wie every(), some(), find(), und findIndex() beenden die Iteration ebenfalls sofort, wenn eine weitere Iteration nicht erforderlich ist.

forEach() erwartet eine synchrone Funktion es wird nicht auf Promises gewartet. Stellen Sie sicher, dass Sie die Implikationen beim Verwenden von Promises (oder asynchronen Funktionen) als forEach-Callbacks kennen.

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 sequenziell oder gleichzeitig auszufhren, siehe 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 protokolliert eine Zeile fr 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

Verwendung von thisArg

Das folgende (konstruiert) Beispiel aktualisiert die Eigenschaften eines Objekts basierend auf 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 bei jedem Aufruf an callback bergeben. Der Callback verwendet ihn als seinen this-Wert.

Eine Objektkopierfunktion

Der folgende Code erstellt eine Kopie eines gegebenen Objekts.

Es gibt verschiedene Mglichkeiten, eine Kopie eines Objekts zu erstellen. Das Folgende ist nur eine Mglichkeit und wird prsentiert, um zu erklren, wie Array.prototype.forEach() funktioniert, indem es Object.*-Utility-Funktionen verwendet.

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 ist nur zu Lernzwecken hier. Wenn Sie ein Array mit eingebauten Methoden abflachen mchten, knnen 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]

Verwendung des dritten Arguments von callbackFn

Das array-Argument ist ntzlich, wenn Sie auf ein anderes Element im Array zugreifen mchten, insbesondere wenn Sie keine vorhandene Variable haben, die auf das Array verweist. Das folgende Beispiel verwendet zuerst filter(), um die positiven Werte zu extrahieren, und verwendet 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

Verwendung von forEach() bei dnn besetzten 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 fr den fehlenden Wert bei Index 2 aufgerufen.

Aufrufen von forEach() bei nicht-Array-Objekten

Die forEach()-Methode liest die length-Eigenschaft von this und greift dann auf jede Eigenschaft zu, deren Schlssel eine nicht-negative Ganzzahl ist, die 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-Kompatibilitt

Siehe auch

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