JavaScript-for-Loop: Arrays per Index durchlaufen

Die JavaScript-for-Schleife wiederholt einen Codeblock eine kontrollierte Anzahl von Durchläufen mit drei Ausdrücken: Initialisierung, Bedingung und Aktualisierung. Verwende sie, wenn du den Schleifenindex brauchst, um Array-Positionen zu lesen, Nachbarwerte zu vergleichen oder Iterationen zu zählen. Im Gegensatz zu forEach oder for...of gibt das klassische JavaScript-for-Statement direkte Kontrolle über Start-, End- und Schrittwerte.

JavaScript-For-Loop-Beispiel für Array-Iteration

Ausgabe:

Schritt 0: bauen
Schritt 1: testen
Schritt 2: bereitstellen

So funktioniert dieses Beispiel

1. let i = 0 erstellt einen blockgebundenen Zähler, der beim ersten Array-Index startet.
2. i < aufgaben.length prüft vor jeder Iteration die Bedingung. Die Schleife stoppt, sobald i den Wert aufgaben.length erreicht, und verhindert so einen Zugriff außerhalb des Bereichs.
3. i++ erhöht den Zähler, nachdem der Schleifenkörper jeder Iteration abgeschlossen ist.
4. aufgaben[i] liest das Element an Position i und koppelt jeden Wert mit seinem Index.

Die Grenze < length (nicht <=) ist das Standardmuster, weil Array-Indizes von 0 bis length - 1 laufen.

Häufige Fehler bei JavaScript-for-Schleifen

Off-by-one mit <=

Falsch:

const elemente = ["a", "b", "c"];
for (let i = 0; i <= elemente.length; i++) {
  console.log(elemente[i]);
}

Richtig:

const elemente = ["a", "b", "c"];
for (let i = 0; i < elemente.length; i++) {
  console.log(elemente[i]);
}

<= führt eine zusätzliche Iteration aus, daher ist elemente[elemente.length] gleich undefined.

var in asynchronen Callbacks verwenden

Falsch:

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}
// Ausgabe: 3, 3, 3

Richtig:

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}
// Ausgabe: 0, 1, 2

var ist funktionsgebunden, daher lesen die Callbacks das finale i. let erstellt pro Iteration eine neue Bindung.

for-Schleife vs for…of

Greife standardmäßig zu for...of; wechsle zu einer klassischen for-Schleife, wenn du den Index oder nicht sequenzielle Schritte brauchst.

Weitere Beispiele

Früh mit break beenden:

const temperaturen = [22, 18, 35, 29];
for (let i = 0; i < temperaturen.length; i++) {
  if (temperaturen[i] > 30) {
    console.log("Erster heißer Tag bei Index", i);
    break;
  }
}

break stoppt die Schleife sofort. Ohne break würde die Schleife nach dem ersten Treffer weiter alle verbleibenden Elemente prüfen.

Iterationen mit continue überspringen:

for (let i = 0; i < 5; i++) {
  if (i === 2) continue;
  console.log(i);
}
// 0, 1, 3, 4

continue überspringt den Rest des aktuellen Schleifendurchlaufs, führt aber vor der nächsten Bedingungsprüfung weiterhin den Aktualisierungsausdruck (i++) aus.

FAQ

Wie lautet die Syntax einer JavaScript-for-Schleife?

Ein JavaScript-for-Statement hat drei optionale Ausdrücke: for (init; condition; update). init läuft einmal vor dem Schleifenstart, die Bedingung wird vor jeder Iteration ausgewertet und das Update läuft nach jedem Schleifenkörper. Alle drei Teile sind optional. Wenn die Bedingung fehlt, entsteht eine Endlosschleife, die mit break beendet werden muss.

JavaScript while vs for loop: wann nutzt man was?

Nutze eine for-Schleife, wenn Initialisierung, Bedingung und Update zum gleichen Zähler gehören. In einer Zeile sind die Grenzen sofort sichtbar. Nutze while, wenn die Abbruchbedingung von externem Zustand abhängt oder wenn Initialisierung und Update in den Schleifenkörper statt in den Header gehören.

Wie beendet man eine JavaScript-for-Schleife vorzeitig?

Platziere ein break-Statement im Schleifenkörper. Wenn die Engine break erreicht, verlässt sie die Schleife sofort und setzt die Ausführung nach der schließenden Klammer fort. Kombiniere break mit einer Bedingung, um nach dem ersten Zieltreffer zu stoppen und unnötige Iterationen zu vermeiden.