Array.prototype.forEach()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Die forEach()
-Methode von Array
-Instanzen führt eine bereitgestellte Funktion einmal für jedes Element des Arrays aus.
Probieren Sie es aus
const array1 = ["a", "b", "c"];
array1.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 des Arrays ausgeführt wird. Der Rückgabewert wird verworfen. Die Funktion wird mit folgenden Argumenten aufgerufen:
thisArg
Optional-
Ein Wert, der als
this
beim Ausführen voncallbackFn
verwendet wird. Siehe iterative Methoden.
Rückgabewert
Keiner (undefined
).
Beschreibung
Die forEach()
-Methode ist eine iterative Methode. Sie ruft eine bereitgestellte callbackFn
-Funktion in aufsteigender Indexreihenfolge einmal für jedes Element in einem Array auf. Im Gegensatz zu map()
gibt forEach()
immer undefined
zurück und ist nicht kaskadierbar. Ein typischer Anwendungsfall besteht darin, Nebenwirkungen am Ende einer Kette auszuführen. Lesen Sie den Abschnitt über iterative Methoden, um mehr darüber zu erfahren, 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 in sparsely arrays ausgeführt.
Die forEach()
-Methode ist generisch. Sie erwartet lediglich, dass der this
-Wert über eine length
-Eigenschaft und integerbasierte Schlüssel-Eigenschaften verfügt.
Es gibt keine Möglichkeit, eine forEach()
-Schleife zu stoppen oder zu unterbrechen, außer durch das Werfen einer Ausnahme. Wenn Sie ein solches Verhalten benötigen, ist die forEach()
-Methode das falsche Werkzeug.
Ein vorzeitiger Abbruch kann durch Schleifenanweisungen 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 erforderlich ist.
forEach()
erwartet eine synchrone Funktion — es wartet nicht auf Promises. Stellen Sie sicher, dass Sie die Konsequenzen kennen, wenn Sie Promises (oder asynchrone Funktionen) als forEach
-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 sequenziell oder gleichzeit auszuführen, siehe Promise-Zusammensetzung.
Beispiele
Eine Schleife durch forEach ersetzen
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
Hinweis:
Um den Inhalt eines Arrays in der Konsole anzuzeigen,
können Sie console.table()
verwenden, das eine
formatierte Version des Arrays ausgibt.
Das folgende Beispiel zeigt einen alternativen Ansatz,
der die forEach()
-Methode verwendet.
Das folgende Codebeispiel protokolliert (loggt) 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
Verwendung von thisArg
Das folgende (konstruiertes) 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 Parameter thisArg
(this
) an forEach()
übergeben wird, wird er jedes Mal, wenn die Callback-Funktion ausgeführt wird, dieser als this
-Wert übergeben.
Hinweis:
Wenn die Callback-Funktion als
Arrow Function Expression übergeben wird,
könnte der thisArg
-Parameter ausgelassen werden,
da alle Arrow-Funktionen den this
-Wert lexikalisch binden.
Eine Funktion zum Kopieren von Objekten
Der folgende Code erstellt eine Kopie eines gegebenen Objekts.
Es gibt unterschiedliche Möglichkeiten, eine Kopie eines Objekts zu erstellen. Die folgende Methode wird hier nur zur Veranschaulichung der Arbeitsweise von Array.prototype.forEach()
mittels Nutzung der Object.*
-Utility-Funktionen präsentiert.
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 gedacht. 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]
Verwenden des dritten Arguments von callbackFn
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. Im folgenden Beispiel wird zunächst filter()
verwendet, um die positiven Werte zu extrahieren, und dann forEach()
, um die 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() in sparsen 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.
Aufrufen von forEach() auf Nicht-Array-Objekten
Die forEach()
-Methode liest die length
-Eigenschaft von this
und greift dann auf jede Eigenschaft zu, deren Schlüssel eine nicht-negative 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
Specification |
---|
ECMAScript® 2025 Language Specification # sec-array.prototype.foreach |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | server | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
forEach |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support