Wie man ein Array in JavaScript durchläuft: forEach, for...of und andere Methoden

Warum "Array durchlaufen" die Grundlage ist, die man auswendig kennen sollte

Stellen Sie sich vor: Sie haben eine Liste von Studenten, einen Einkaufswagen oder eine Reihe von Zahlen. Sie müssen mit jedem Element etwas tun: einen Namen ausgeben, eine Summe berechnen, nur Erwachsene herausfiltern. In JavaScript gibt es dafür mehrere Möglichkeiten, und die beliebteste ist die forEach-Schleife.

Die Frage "Loop (for each) over an array in JavaScript" auf Stack Overflow hat tausende Aufrufe gesammelt. Das bedeutet, dass selbst erfahrene Entwickler manchmal über die Nuancen stolpern. Wir werden alles Schritt für Schritt erklären: vom klassischen for bis zum modernen for...of und dem leistungsstarken forEach. Sie erfahren, wann Sie welche Methode verwenden sollten und werden keine Angst mehr vor Arrays haben.

Methode Nr. 1: Die klassische for-Schleife – der Urvater aller Durchläufe

Die älteste und verständlichste Methode. Sie steuern den Zähler und die Abbruchbedingung selbst. Ideal, wenn Sie die Schleife vorzeitig abbrechen oder mehrere Elemente überspringen müssen.

const fruits = ['Apfel', 'Banane', 'Orange'];
for (let i = 0; i < fruits.length; i++) {
    console.log(`Frucht Nr.${i + 1}: ${fruits[i]}`);
}

Vorteile: volle Kontrolle, break und continue können verwendet werden.
\nNachteile: umständlich, leicht bei den Indizes zu vertun.

Wann man die klassische for-Schleife verwendet

\n
• Sie müssen den Durchlauf vorzeitig stoppen (z. B. bei der Suche nach einem Element).
\n
• Sie benötigen Zugriff auf den Index (nicht nur auf den Wert).
\n
• Sie arbeiten mit mehrdimensionalen Arrays.
\n

Methode Nr. 2: forEach – der König der Array-Durchläufe in JavaScript

Diese Methode ist die Antwort auf die Frage "Loop (for each) over an array in JavaScript" in 90% der Fälle. Sie wird direkt auf dem Array aufgerufen und nimmt eine Callback-Funktion entgegen, die für jedes Element ausgeführt wird.

const fruits = ['Apfel', 'Banane', 'Orange'];
fruits.forEach(function(fruit, index) {
    console.log(`Frucht Nr.${index + 1}: ${fruit}`);
});

// Dasselbe mit einer Pfeilfunktion (moderner Stil):
fruits.forEach((fruit, index) => {
    console.log(`Frucht Nr.${index + 1}: ${fruit}`);
});

Wichtig: forEach gibt kein neues Array zurück (im Gegensatz zu map). Es führt lediglich eine Aktion für jedes Element aus. Und ja, break und continue funktionieren hier nicht – wenn Sie die Schleife unterbrechen müssen, verwenden Sie for...of oder die klassische for-Schleife.

Parameter der forEach-Callback-Funktion

\n
• Erster Parameter – das aktuelle Element des Arrays (erforderlich).
\n
• Zweiter Parameter – der Index des Elements (optional).
\n
• Dritter Parameter – das Array selbst (selten benötigt).
\n

[10, 20, 30].forEach((value, index, array) => {
    console.log(`Element ${value} an Position ${index} im Array [${array}]`);
});

Methode Nr. 3: for...of – modern und elegant

Erschienen in ES6 (2015) und sofort von Entwicklern geliebt. Es funktioniert nicht nur mit Arrays, sondern auch mit allen iterierbaren Objekten (Strings, Set, Map).

const fruits = ['Apfel', 'Banane', 'Orange'];
for (const fruit of fruits) {
    console.log(`Frucht: ${fruit}`);
}

Hauptvorteil: break und continue können verwendet werden. Außerdem sieht der Code sauber und lesbar aus.

Wie man den Index in for...of erhält

Wenn Sie den Index benötigen, verwenden Sie die Methode entries():

for (const [index, fruit] of fruits.entries()) {
    console.log(`Frucht Nr.${index + 1}: ${fruit}`);
}

Methode Nr. 4: map – wenn Sie ein neues Array erstellen müssen

Wenn Sie nicht nur durchlaufen, sondern jedes Element umwandeln und ein neues Array mit derselben Länge erhalten möchten, verwenden Sie m