Array-Schleifen in

Über Array-Schleifen

Wenn du mit Arrays arbeitest, möchtest du manchmal Code für jeden Wert im Array ausführen. Das nennt man eine Iteration oder einen Durchlauf über das Array.

Hier schauen wir uns den Fall an, in dem du das Array dabei nicht verändern möchtest. Wie du Arrays umformst, siehst du stattdessen im Konzept Array-Transformationen.

Die for-Schleife

Die einfachste und meist sehr performante Möglichkeit, über ein Array zu iterieren, ist eine for-Schleife, siehe dazu das Konzept For-Schleifen.

const numbers = [6.0221515, 10, 23];

for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}
// => 6.0221515
// => 10
// => 23

Die for...of-Schleife

Wenn du in jeder Iteration direkt mit dem Wert arbeiten möchtest und den Index überhaupt nicht brauchst, kannst du eine for...of-Schleife verwenden.

for...of funktioniert wie die oben gezeigte einfache for-Schleife. Statt dich aber mit dem Index als Variable in der Schleife herumschlagen zu müssen, bekommst du direkt den Wert.

const numbers = [6.0221515, 10, 23];

// Because re-assigning number inside the loop will be very
// confusing, disallowing that via const is preferable.
for (const number of numbers) {
  console.log(number);
}
// => 6.0221515
// => 10
// => 23

Genau wie in normalen for-Schleifen kannst du continue verwenden, um die aktuelle Iteration abzubrechen, und break, um die Ausführung der Schleife ganz zu beenden.

JavaScript hat außerdem eine for...in-Schleife, um über die Schlüssel in einem Objekt zu iterieren. Wichtig zu wissen ist, dass for...of und for...in nicht austauschbar sind; Einzelheiten dazu findest du in der MDN-Dokumentation.

Die forEach-Methode

Jedes Array enthält eine forEach-Methode, mit der du ebenfalls über die Elemente im Array iterieren kannst.

forEach akzeptiert einen Callback als Parameter. Die Callback-Funktion wird einmal für jedes Element im Array aufgerufen.

const numbers = [6.0221515, 10, 23];

numbers.forEach((number) => console.log(number));
// => 6.0221515
// => 10
// => 23

Im obigen Beispiel verwendet der Callback nur das aktuelle Element als Parameter. Bei Bedarf kann der Callback bis zu drei Parameter nutzen.

• den Wert der aktuellen Iteration
• den Index der aktuellen Iteration
• das gesamte Array

const numbers = [6.0221515, 10, 23];

function callback(number, index, fullArray) {
  console.log(number, index, fullArray);
}

numbers.forEach(callback);
// => 6.0221515 0 [ 6.0221515, 10, 23 ]
// => 10 1 [ 6.0221515, 10, 23 ]
// => 23 2 [ 6.0221515, 10, 23 ]

Neben dem Callback akzeptiert forEach als optionalen zweiten Parameter den this-Kontext, der für die Iteration verwendet wird. Ein Beispiel findest du im Abschnitt „Using thisArg“ auf MDN.

Bei der Arbeit mit forEach solltest du ein paar Dinge beachten.

• Sobald die forEach-Schleife begonnen hat, gibt es keine Möglichkeit mehr, die Iteration zu stoppen. Die Anweisungen break und continue gibt es in diesem Zusammenhang nicht.
• forEach verhält sich merkwürdig, wenn du das Array nach dem Start der Schleife veränderst. Elemente, die du am Ende hinzufügst, werden ignoriert, das Entfernen von Elementen kann dazu führen, dass andere übersprungen werden, und so weiter. Um solche Probleme zu vermeiden, verändere das zugrunde liegende Array niemals im Callback.
• Der Rückgabewert der forEach-Methode selbst ist undefined. Deshalb kannst du am Ende keine weiteren Array-Methoden verketten.
• Wenn du deinen Code auf Leistung optimieren musst, solltest du stattdessen for oder for...of in Betracht ziehen, denn beide sind etwa dreimal schneller.