Schleifen und Iterationen

Schleifen sind ein einfaches Werkzeug, um einzelne Schritte wiederholt auszuführen. Dieses Kapitel des JavaScript Guide stellt die verschiedenen Anweisungen für Iterationen vor, welche in JavaScript zur Verfügung stehen.

Man kann sich Schleifen wie eine Computerversion des Spiels vorstellen, bei dem man jemandem sagt, er soll x Schritte in eine Richtung und dann y Schritte in eine andere Richtung gehen. So kann zum Beispiel die Aussage "Gehe fünf Schritte nach Osten" mit Hilfe von Schleifen so ausgedrückt werden:

var schritt;
for (schritt = 0; schritt < 5; schritt++) {
  // Laufe 5 mal, mit den Werten von Schritt 0 bis 4
  console.log('Gehe einen Schritt nach Osten');
}

Es gibt viele verschiedene Arten von Schleifen, doch im Wesentlichen verrichten alle die gleiche Aufgabe: sie führen eine Aktion für eine bestimmte Anzahl an Wiederholungen aus (diese Anzahl kann auch 0 sein). Dabei ermöglichen die verschiedenen Arten von Schleifen unterschiedliche Anfangs- und Endpunkte festzulegen. Es gibt zahlreiche Situationen in denen eine Art von Schleifen einfacher zum Ergebnis führt, als eine andere.

JavaScript stellt folgende Anweisungen für Schleifen zur Verfügung:

• for Anweisung
• do...while Anweisung
• while Anweisung
• label Anweisung
• break Anweisung
• continue Anweisung
• for...in Anweisung
• for...of Anweisung

for Anweisung

Eine  for Schleife wird so lange durchlaufen, bis eine bestimmte Bedingung den Wert false liefert. Die for Schleife in JavaScript ist vergleichbar mit der in Java und C. Eine for Anweisung sieht wie folgt aus:

for ([initialerAusruck]; [Bedingung]; [erhöhenderAusdruck])
  Anweisung

Bei der Ausführung einer for Schleife geschieht folgendes:

1. Der Ausdruck zur Initialisierung der Schleife initialerAsudruck, wird ausgeführt, sofern dieser existiert. Dieser Ausdruck initialisiert einen oder mehrere Schleifenzähler, wobei die Syntax beliebig komplexe Ausdrücke zulässt. In diesem Ausdruck können auch Variablen deklariert werden.
2. Die Bedingung Bedingung wird geprüft. Wenn die Auswertung von Bedingung den Wert true ergibt, werden die Anweisungen innerhalb der Schleife ausgeführt. Ergibt die Prüfung hingegen false, wird die Schleife verlassen. Bleibt die Bedingung leer, wird immer der Wert true angenommen.
3. Die Anweisung wird ausgeführt. Um mehrere Anweisungen auszuführen, werden Block-Anweisungen ({ ... }) verwendet, um diese zu gruppieren.
4. Der Ausdruck zur Aktualisierung erhöhenderAusdruck, sofern es diesen gibt, wird ausgeführt und die Schleife kehrt zu Schritt 2 zurück.

Beispiel

Die folgende Funktion enthält eine for Anweisung, welche die Anzahl der ausgewählten Optionen aus einer Auswahlliste (ein <select>, welches eine Mehrfachauswahl erlaubt) ermittelt. Die for Anweisung deklariert eine Variable i und initialisiert diese mit dem Wert 0. Sie prüft ob i kleiner als die Anzahl der verfügbarer Optionen des <select> Elements ist, führt die nachfolgende if Anweisung aus und erhöht i bei jedem Schleifendurchlauf um 1.

<form name="selectForm">
  <p>
    <label for="musicTypes">Choose some music types, then click the button below:</label>
    <select id="musicTypes" name="musicTypes" multiple="multiple">
      <option selected="selected">R&B</option>
      <option>Jazz</option>
      <option>Blues</option>
      <option>New Age</option>
      <option>Classical</option>
      <option>Opera</option>
    </select>
  </p>
  <p><input id="btn" type="button" value="How many are selected?" /></p>
</form>

<script>
function howMany(selectObject) {
  var numberSelected = 0;
  for (var i = 0; i < selectObject.options.length; i++) {
    if (selectObject.options[i].selected) {
      numberSelected++;
    }
  }
  return numberSelected;
}

var btn = document.getElementById("btn");
btn.addEventListener("click", function(){
  alert('Number of options selected: ' + howMany(document.selectForm.musicTypes))
});
</script>

do...while Anweisung

Die do...while Anweisung wiederholt eine bestimmte Anweisung, bis eine Bedingung false ergibt. Eine do...while Anweisung sieht wie folgt aus:

do
  anweisung
while (bedingung);

amweisung wird dabei einmal ausgeführt, bevor die Bedingung geprüft wird. Um mehrere Anweisungen auszuführen, werden diese als Block Statement ({ ... }) gruppiert. Wenn bedingung true ist, wird die Anweisung erneut ausgeführt. Nach jeder Ausführung der Anweisungen, wird die Bedingung erneut geprüft. Sobald bedingung false ergibt, endet die Ausführung der Schleife und die nächste Anweisung nach der do...while Schleife aus wird ausgeführt.

Beispiel

Im folgenden Beispiel wird die Schleife mindestens einmal ausgeführt. Anschliessend wird die Schleife so oft durchlaufen, bis i nicht mehr kleiner als 5 ist.

var i = 0;
do {
  i += 1;
  console.log(i);
} while (i < 5);

while Anweisung

Eine while Anweisung wird solange ausgeführt, wie eine bestimmte Bedingung true ergibt. Eine while Anweisung sieht wie folgt aus:

while (bedingung)
  anweisung

Wenn die Bedingung false ist, wird die Schleife nicht weiter durchlaufen und die nächste Anweisung nach der while Schleife wird ausgeführt.

Die Prüfung der Bedingung erfolgt, bevor die Anweisungen innerhalb der Schleife ausgeführt werden. Nur wenn die Bedingung true ist, wird die Schleife ausgeführt, wobei anschliessend eine erneute Prüfung der Bedingung erfolgt. Ergibt die Bedingung false, wir mit der Anweisungen nach der while Schleife fortgefahren.

Um mehrere Anweisungen auszuführen, werden diese in einer block Anweisung ({ ... }) gruppiert.

Beispiel 1

Die folgende while Schleife wird so lange ausgeführt, wie n kleiner als 3 ist.

var n = 0;
var x = 0;
while (n < 3) {
  n++;
  x += n;
}

Mit jedem Schleifendurchlauf wird n um 1 erhöht. Der Wert von n wird dann zum Wert von x addiert. Dadurch nehmen x und n die folgenden Werte an:

• Nach dem ersten Durchlauf: n = 1 und x = 1
• Nach dem zweiten Durchlauf: n = 2 und x = 3
• Nach dem dritten Durchlauf: n = 3 und x = 6

Nach dem dritten Durchlauf ist die Bedingung n < 3 nicht mehr true und die Schleife wird verlassen.

Beispiel 2

Endlosschleifen müssen vermieden werden. Es ist immer sicherzustellen, dass die Bedingung irgendwann false ergibt, da die Schleife ansonsten nie endet. Die Anweisung in der folgenden while Schleife wird für immer ausgeführt, weil die Bedingung nie false ergibt:

while (true) {
  console.log("Hello, world");
}

Label Anweisung

Ein label stellt eine Anweisung mit einem Bezeichner bereit, welches es ermöglicht auf eine bestimmte stelle im Programm zu verweisen. So kann ein Label zum Beispiel dafür verwendet werden eine Schleife zu identifizieren und dann mit break oder continue festzulegen ob diese beendet oder weiter durchlaufen werden soll.

Die Syntax der Label Anweisung sieht wie folgt aus:

label :
   anweisung

Der Wert von label kann jede Bezeichnung sein, der kein reserviertes JavaScript Schlüsselwort ist. Die anweisung die mit dem Label identifiziert wird, kann jede beliebige Anweisung sein.

Beispiel

In diesem Beispiel identifiziert das Label markLoop eine while Schleife.

markLoop:
while (theMark == true) {
   doSomething();
}

break Anweisung

Um eine Schleife oder eine switch Anweisung zu beenden, verwendet man die break Anweisung in Verbindung mit der Label Anweisung.

• Wird break ohne ein Label verwendet, so wird die innerste while, do-while, for Schleife oder switch Anweisung beendet und die nachfolgende Ausführung wird ausgeführt.
• Wird break in Verbindung mit einem Label eingesetzt, wird die Anweisung beendet, die mit dem Label identifiziert wird.

Die Syntax von break sieht wie folgt aus:

break [label];

Die erste Variante der Syntax beendet die innerste Schleife oder die innerste switch Anweisung. Die zweite Variante beendet eine bestimmte Anweisung.

Beispiel 1

Das folgende Beispiel durchläuft die Elemente in einem Array, bis ein Element mit dem Wert von theValue gefunden wird:

for (var i = 0; i < a.length; i++) {
  if (a[i] == theValue) {
    break;
  }
}

Beispiel 2: break mit einem Label

var x = 0;
var z = 0;
labelCancelLoops: while (true) {
  console.log("Outer loops: " + x);
  x += 1;
  z = 1;
  while (true) {
    console.log("Inner loops: " + z);
    z += 1;
    if (z === 10 && x === 10) {
      break labelCancelLoops;
    } else if (z === 10) {
      break;
    }
  }
}

continue Anweisung

Die continue Anweisung kann eingesetzt werden, um eine while, do-while, for Schleife oder ein Statement mit einem Label erneut auszuführen.

• Wird continue ohne ein Label verwendet, wird der Durchlauf der innerste while, do-while oder for Anweisung beendet und der nächsten Durchlauf wird begonnen. Im Gegensatz zur break Anweisung, wird mit continue nicht die gesamte Schleife abgebrochen. In einer while Schleife springt das Programm zurück zur Bedingung. In einer for Schleife springt das Programm zum erhöhenden Ausdruck.
• Wird continue mit einem Label eingesetzt, wird continue auf die Anweisungen angewendet, die durch das Label identifiziert werden.

Die Syntax der continue Anweisung sieht wie folgt aus:

continue [label];

Beispiel 1

Das folgende Beispiel zeigt eine while Schleife, mit einer continue Anweisung, die weiter ausgeführt wird, wenn i den Wert 3 hat. Dadurch erhält n die Werte 1, 3, 7 und 12.

i = 0;
n = 0;
while (i < 5) {
  i++;
  if (i == 3) {
    continue;
  }
  n += i;
}

Beispiel 2

Eine Anweisung mit dem Label checkiandj enthält eine Anweisung mit dem Label checkj. Wenn continue erreicht wird, bricht das Programm den aktuellen Schleifendurchlauf von checkj ab und setzt die Ausführung beim nächsten Durchlauf fort. Immer wenn continue erreicht wird, wird checkj erneut ausgeführt, bis dessen Bedingung false zurückliefert. Wird false zurückgeliefert, wird der Rest der checkiandj Anweisung vollendet und checkiandj wird wiederholt, bis dessen Bedingung false zurückgibt. Wird false zurückgegeben, wird das Programm bei der Anweisung nach checkiandj fortgesetzt.

Wenn continue ein Label checkiandj hätte, würde das Programm am Anfang der checkiandj Anweisung fortgesetzt werden.

checkiandj:
  while (i < 4) {
    console.log(i);
    i += 1;
    checkj:
      while (j > 4) {
        console.log(j);
        j -= 1;
        if ((j % 2) == 0) {
          continue checkj;
        }
        console.log(j + " is odd.");
      }
      console.log("i = " + i);
      console.log("j = " + j);
  }

for...in Anweisung

Die for...in Anweisung durchläuft eine bestimmte Variable über alle aufzählbaren Eigenschaften eines Objekts. Für jede einzelne Eigenschaft führt JavaScript die entsprechende Anweisung aus. Eine for...in Anweisung sieht wie folgt aus:

for (variable in object) {
  statements
}

Beispiel

Die folgende Funktion nimmt als Argument ein Objekt und dessen Namen entgegen. Anschliessend durchläuft sie alle Eigenschaften des Objekts und liefert einen String zurück, der alle Namen und Werte der Eigenschaften des Objekts enthält.

function dump_props(obj, obj_name) {
  var result = "";
  for (var i in obj) {
    result += obj_name + "." + i + " = " + obj[i] + "<br>";
  }
  result += "<hr>";
  return result;
}

Für ein Objekt car mit den Eigenschaften make und model, sieht das Ergebnis wie folgt aus:

car.make = Ford
car.model = Mustang

Arrays

Auch wenn es nahe liegt diesen Weg zu verwenden, um die Elemente eines Arrays zu durchlaufen, würde die for...in Anweisung die Namen der definierten Werte und den numerischen Index zurückliefern. Daher ist es besser eine normale for Schleifen mit einem numerischen Index zu verwenden, wenn Arrays durchlaufen werden sollen, da die for...in Anweisung neben den benutzerdefinierten Elementen auch die Eigenschaften des Arrays durchläuft, wenn man Methoden oder Eigenschaften hinzufügt oder ändert.

for...of Anweisung

Die for...of Anweisung erstellt eine Schleife, die alle iterable objects (inklusive Array, Map, Set, arguments Objekt, etc.) durchläuft und die Anweisungen ausführt, die mit dem Wert des Durchlaufes für jede Eigenschaft übereinstimmt.

for (variable of object) {
  statement
}

Das folgende Beispiel zeigt den Unterschied zwischen der for...of Schleife und der for...in Schleife. Während for...in die Namen der Eigenschaften durchläuft, durchläuft for...of die Werte der Eigenschaft:

let arr = [3, 5, 7];
arr.foo = "hello";

for (let i in arr) {
   console.log(i); // logs "0", "1", "2", "foo"
}

for (let i of arr) {
   console.log(i); // logs "3", "5", "7"
}