for-Schleife und Struktursprünge – Programmieren lernen mit JavaScript – Thytos
Nächstes Video startet in 3 Sekunden.
Programmieren lernen mit JavaScript

for-Schleife und Struktursprünge

Die for-Schlei­fe ist da­rauf aus­ge­legt, eine Ite­ra­tions­va­ri­a­ble hoch­zu­zäh­len. Soll eine Schlei­fe vor­zei­tig ver­las­sen oder ein Durch­lauf über­sprun­gen wer­den, gibt es da­für Struk­tur­sprünge.

In vielen Fällen werden Schleifen eingesetzt, um über Listen zu iterieren. Dabei wird eine Zählervariable bei jedem Durchlauf um eins erhöht, um als Index in der Liste das jeweils nächste Element auszulesen.
Eine Schleifenart eignet sich ganz besonders für diesen Anwendungsfall: Die for-Schleife.

for (var i = 0; i < array.length; i++) {
  doSomething(array[i]);
}

Der Schleifenkopf der For-Schleife besteht aus drei Bereichen:

  1. Initialisierung: Der erste Teil wird einmalig vor dem ersten Durchlauf der Schleife ausgeführt. Hier kann beispielsweise eine Laufvariable definiert werden.
    var i = 0;
    
  2. Bedingung: Die Bedingung wird vor jedem Schleifendurchlauf überprüft. Der Schleifenkörper wird nur ausgeführt, wenn die Bedingung der Fall ist. Hier kann beispielsweise sichergestellt werden, dass eine Indexvariable kleiner ist als die Länge des Arrays, das durchlaufen wird.
    i < array.length;
    
  3. Finale Anweisung: Der dritte Teil wird nach jedem Schleifendurchlauf ausgeführt. Hier kann beispielsweise eine Laufvariable erhöht werden.
    i++
    

Der Schleifenkörper muss nicht in geschweiften Klammern stehen, wenn er nur eine einzelne Anweisung umfasst. Es empfiehlt sich dennoch, dies zu tun.

Obwohl die For-Schleife auch für andere Zwecke verwendet werden könnte, ist sie doch optimal für die Einsatz einer Laufvariablen – einer Variablen also, die in einer Schleife mit jedem Durchlauf erhöht oder verringert wird. Das ermöglicht, eine Anzahl festzulegen, wie oft ein Code durchlaufen werden soll.
Hier wird zum Beispiel die alert-Funktion dreimal aufgerufen.

for (var i = 0; i < 3; i++) {
  alert(i);
}

Statt die Laufvariable hochzuzählen, kann sie auch heruntergezählt werden.

for (var i = 3; i > 0; i--) {
  alert(i);
}

Wie oben schon schematisch gezeigt, ist die For-Schleife sehr geeignet, um Listen zu durchlaufen. Das können Arrays sein oder auch Strings oder andere Arten von Listen.
Im Folgenden werden in der Initialisierung der For-Schleife zwei Variablen definiert, denn auch das ist möglich. Die Variable abc ist ein String und die Iterationsvariable i wird als Index verwendet, um nacheinander jede Stelle des Strings, also jedes Zeichen, auszugeben.

for (var i = 0, abc = "abc"; i < 3; i++) {
  alert(abc[i]);
}

Do-While-Schleife

Die Do-While-Schleife, Englisch für Tu solange, verhält sich fast wie die While-Schleife, denn auch sie führt Code aus, solange eine Bedingung wahr ist. Der Unterschied ist, dass Do-While zuerst den Schleifenkörper ausführt und dann die Bedingung überprüft, während es die While-Schleife genau andersrum handhabt. Das führt dazu, dass bei der Do-While-Schleife auf jeden Fall der Schleifenkörper einmal ausgeführt wird, selbst wenn die Bedingung nicht erfüllt ist.

do {
  alert("Wird einmalig ausgeführt");
} while (false) // Obwohl die Bedingung falsch ist

// Anders die While-Schleife
while (false) {
  alert("Wird nicht ausgeführt");
}

Wie auch bei den anderen Schleifen, können die geschweiften Klammern weggelassen werden, wenn der Schleifenkörper nur aus einer Anweisung besteht. Der Lesbarkeit und Konsistenz wegen ist es dennoch ratsam, sie zu setzen.

// Ohne geschweifte Klammern, in einer Zeile
do alert("Wird ausgeführt"); while (false)

Die For…in-Schleife ist nicht für Arrays

In JavaScript gibt es auch die for…in-Schleife. Wenn ihr eure Konsole öffnet, könnt ihr sie selbst ausprobieren.

var arr = ["foo", "bar", "baz"];
var resStr = "";

for (var i in arr) {
  resStr += arr[i];
  if (i < arr.length - 1) {
    resStr += ", ";
  }
}

resStr;
// => "foo, bar, baz"

Die for…in-Schleife wirkt ideal für Arrays, da die Iterationsvariable i nicht mal manuell hochgezählt werden muss, sondern das auf wundersame Weise automatisch passiert.
Doch, obwohl die Schleife wie gemacht für das Durchlaufen von Arrays wirkt, ist sie tatsächlich die Ineffizienteste dafür.
Ein Performance-Vergleich von Schleifen in JavaScript zeigt, dass die for…in-Schleife die mit Abstand langsamste Schleife zur Array-Iteration ist.

Die for-in-Schleife ist bis zu 97% langsamer als andere Schleifen, um Array-Iterationen durchzuführen

Das liegt daran, dass For-In-Schleifen für einen anderen Zweck ausgelegt sind, der später in dieser Serie vorgestellt wird.

Struktursprünge

Um eine Schleife vorläufig zu verlassen oder einen Schleifendurchlauf zu überspringen, gibt es die Anweisungen break und continue.

  • break bricht aus einer Schleife aus und beendet sie komplett. Der Programmfluss wird hinter dem Schleifenkörper fortgesetzt.
  • continue bricht den aktuellen Schleifendurchlauf ab, sodass mit dem nächsten fortgesetzt wird.
  • Wird return in einer Schleife verwendet, wird nicht nur die Schleife, sondern auch die Funktion, in der sie steht, an der Stelle beendet. Der Programmfluss setzt bei der aufrufenden Funktion wieder ein.

Wird true als Bedingung in einer while-Schleife angegeben, wird die Schleife endlos lange durchlaufen. Mit break kann die Abbruchbedingung aber auch innerhalb des Schleifenkörpers definiert werden.

var count = 0;

while (true) { // Läuft endlos
  count++;
  if (count === 100) {
    // Abbruchbedingung innerhalb des Schleifenkörpers
    break; // Breche die Schleife ab
  }
}

count;
// => 100

break erleichtert, komplexe und verschachtelte Abbruchbedingungen in eine Schleife zu implementieren.

Das folgende Beispiel gibt alle ungeraden Zahlen von 1 bis 9 aus, indem es den Schleifendurchlauf für gerade Zahlen mit continue überspringt.

for (var i = 1; i < 10; i++) {
  if (i % 2 === 0) {
    continue;
  }
  alert(i);
}

Zur Feststellung, ob eine Zahl gerade ist, wird der Modulo-Operator verwendet.

Übrigens: Dieses Beispiel ließe sich auch besser ohne continue umsetzen, indem statt i++ i+=2 als finale Anweisung im Schleifenkopf ausgeführt würde.

for (var i = 1; i < 10; i+=2) { // i+=2 statt i++
  // Das gleiche Resultat, ohne continue
  alert(i);
}