5.3.6 Schleifen

Schleifen sind Bestandteile jeder Programmiersprache, da sie es ermöglichen, Anweisungen mehrfach auszuführen. In JavaScript gibt es verschiedene Schleifentypen, die je nach Anwendungsfall genutzt werden können. Dieses Kapitel behandelt die for-, while- und do-while-Schleifen sowie die Befehle break und continue, um Schleifen zu steuern.

for-Schleifen

for-Schleifen laufen nach folgendem Prinzip ab:

„Wir starten beim Initialisierungswert. Wenn die Bedingung erfüllt ist, werden die Anweisungen ausgeführt. Nach jeder Beendigung der Anweisungen werden die Befehle abgearbeitet. Dann startet die Schleife wieder, wenn die Bedingung immer noch erfüllt ist, und bricht erst ab, wenn die Bedingung nicht mehr erfüllt ist.“

1
2
3
4
"use strict";
for (let i = 1; i <= 10; i++) {
  document.write(i + ". Durchlauf <br>");
}

So sieht es im Browser aus

Sourcecode zum Beispiel
<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <title>JavaScript for-Schleife</title>
</head>
<body>
  <script>
    "use strict";
    for (let i = 1; i <= 10; i++) {
      document.write(i + ". Durchlauf <br>");
    }
  </script>
</body>
</html>

Erklärung

  • Initialisierungswert – initialisiert die Zählervariable, die meist in den Befehlen erhöht wird.
  • Bedingung – solange sie erfüllt ist, wird die Schleife ausgeführt.
  • Anweisungen – werden ausgeführt, solange die Schleife durchläuft.
  • Befehle – werden nach jedem Durchlauf ausgeführt, meist zur Zählererhöhung.

do-while-Schleife

Die do-while-Schleife führt Anweisungen aus, solange eine Bedingung erfüllt ist. Im Gegensatz zur for-Schleife wird hier der Anweisungsblock mindestens einmal ausgeführt.

1
2
3
4
5
6
"use strict";
let i = 1;
do {
  document.write(i + ". Durchlauf <br>");
  i++;
} while (i <= 10);

Andere Schleife, aber das Ergebnis ist wie oben gezeigt.


while-Schleife

Die while-Schleife führt Anweisungen aus, solange ihre Bedingung erfüllt ist. Ist die Bedingung bereits am Anfang nicht erfüllt, wird der Anweisungsblock übersprungen.

1
2
3
4
5
6
"use strict";
let i = 1;
while (i <= 10) {
  document.write(i + ". Durchlauf <br>");
  i++;
}
Und auch hier ist das Ergebnis wie zuvor gezeigt.

Wichtige Anmerkung

  • Eine for-Schleife ist gut, wenn die Anzahl der Schleifendurchläufe definiert ist.
  • Eine while-Schleife ist gut, wenn die Anzahl der Schleifendurchläufe nicht klar ist.

break

Manchmal kommt es vor, dass eine Schleife nicht so oft durchlaufen werden soll oder muss, wie vorgesehen – zum Beispiel weil das Ergebnis schon feststeht. Um ein Beispiel zu nennen: in einer Schleife prüft eine Funktion, ob ein bestimmtes Zeichen in einem String vorkommt. Ist das Zeichen bereits an der 3. Stelle gefunden, muss die Schleife nicht zwingend den Rest des Strings durchsuchen – die Schleife kann unterbrochen werden.

Zu diesem Zweck gibt es den JavaScript-Befehl break, der das Verlassen der ganzen Schleife erzwingt. Der break-Befehl wird also verwendet, um eine Schleife vorzeitig zu verlassen. Oft wird er in Kombination mit einer if-Abfrage genutzt, um eine Bedingung zu prüfen.

Beispiel: break

1
2
3
4
5
6
7
for (let i = 1; i <= 10; i++) {
  if (i === 5) {
    document.write("Schleife bei i = 5 abgebrochen.");
    break;
  }
  document.write("Durchlauf:", i);
}

In diesem Beispiel wird die Schleife abgebrochen, sobald der Wert von i gleich 5 ist.

So sieht es im Browser aus

Sourcecode zum Beispiel
<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <title>JavaScript for-Schleife mit Break</title>
</head>
<body>
  <script>
    "use strict";
    for (let i = 1; i <= 10; i++) {
      if (i === 5) {
        document.write("Schleife bei i = 5 abgebrochen.<br>");
        break;
      }
      document.write("Durchlauf: " + i + "<br>");
    }
  </script>
</body>
</html>
</html>

continue

Während break Schleifen abbrechen lässt, sorgt continue dafür, dass die Schleife sofort wieder von vorne beginnt. Alle Anweisungen die nach continue aufgeführt sind, werdennicht mehr ausgeführt.

Beispiel: continue

1
2
3
4
5
6
for (let i = 1; i <= 10; i++) {
  if (i % 2 === 0) {
    continue; // Überspringt bei Aufruf den weiteren Schleifendurchlauf
  }
  document.write("Ungerade Zahl: " + i + "<br>");
}

In diesem Beispiel werden alle geraden Zahlen übersprungen, und die Schleife gibt nur ungerade Zahlen aus.

So sieht es im Browser aus

Sourcecode zum Beispiel
<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <title>JavaScript for-Schleife mit Break</title>
</head>
<body>
  <script>
    for (let i = 1; i <= 10; i++) {
      if (i % 2 === 0) {
        continue; // Überspringt bei Aufruf den weiteren Schleifendurchlauf
      }
      document.write("Ungerade Zahl: " + i + "<br>");
    }
  </script>
</body>
</html>