10. – 13. Unterrichtsblock

JavaScript Schleifen

Schleifen können einen Codeblock mehrmals ausführen. Schleifen sind praktisch, wenn man einen Befehl wiederholt und mit unterschiedlichen Werten ausführen möchte.

Bei der Arbeit mit Arrays ist dies oft der Fall:

// Array Inhalt:
const tiere = ["Luchs", "Hirsch", "Uhu", "Wildsau", "Feldhase", "Fuchs"];


// Umständliche Befehlskette zur Ausgabe eines Arrays
text += tiere[0] + "<br>";
text += tiere[1] + "<br>";
text += tiere[2] + "<br>";
text += tiere[3] + "<br>";
text += tiere[4] + "<br>";
text += tiere[5] + "<br>";


// Einfache & Dynamische Ausgabe der Array-Inhalte:
let text = "";
for (let liste = 0; liste < tiere.length; liste++) {
  text += tiere[liste] + "<br>";
}

document.getElementById("demo").innerHTML = text;

Verschiedene Arten von Schleifen

JavaScript unterstützt verschiedene Arten von Schleifen:

• for– durchläuft einen Codeblock mehrmals
• for/in– durchläuft die Eigenschaften eines Objekts
• for/of– durchläuft die Werte eines iterierbaren Objekts
• while– durchläuft einen Codeblock, während eine angegebene Bedingung wahr ist
• do/while– durchläuft auch einen Codeblock, während eine angegebene Bedingung wahr ist

Die for-Schleife

Die for-Anweisung erstellt eine Schleife mit 3 optionalen Ausdrücken:

for (ausdruck 1; ausdruck 2; ausdruck 3) {
// Auszuführender Code
}

Ausdruck 1 (Initialisierung) wird (einmal) vor der Ausführung des Codeblocks ausgeführt.
Ausdruck 2 (Schleifenbedingung) definiert die Bedingung zum Ausführen des Codeblocks.
Ausdruck 3 (Fortsetzung) wird (jedes Mal) ausgeführt, nachdem der Codeblock ausgeführt wurde und die Schleifenbedingung erneut zutrifft.

Hierbei kommen die Operatoren aus dem 3. Unterrichtsblock zum Einsatz.

/*
for ( Initialisierung; Schleifenbedingung; Fortsetzung)
 {
    Anweisungen
 }
*/

let liste = "";   // Zunächst wird eine Variable ohne Wert erstellt

//          Ausdruck 1;        Ausdruck 2;           Ausdruck3;
//          Initialisierung    Schleifenbedingung    Fortsetzung
for (let    ziffer = 0;        ziffer < 5;           ziffer++        ) 
 {
  liste += ziffer + "<br>";   // Anweisung
 }

/*
Erklärung:

Ausdruck 1 (Initialisierung)
Setzt eine Variable, bevor die Schleife beginnt (ziffer = 0)

Ausdruck 2 (Schleifenbedingung)
Definiert die Bedingung für die Ausführung der Schleife (ziffer muss kleiner als 5 sein)

Ausdruck 3 (Fortsetzung)
Erhöht den Wert von "ziffer" (ziffer++) jedes Mal,
wenn der Codeblock in der Schleife ausgeführt wurde.
*/

Ausdruck 1 (Initialisierung)

Normalerweise wird der erste Ausdruck verwendet, um die in der Schleife verwendete Variable zu initialisieren (ziffer = 0;).
Ausdruck 1 ist optional.

// Im ersten Ausdruck können auch mehrere Werte durch ein Komma getrennt definiert werden. 
const waldtiere = ["Luchs", "Hirsch", "Uhu", "Wildsau", "Feldhase", "Fuchs"];
// let i = "";            // Einzeldeklaration
// let zahl = "";         // Einzeldeklaration
// let text = "";         // Einzeldeklaration
let i, zahl, text;        // Mehrfachdeklaration

for (i = 0, zahl = waldtiere.length, text = ""; i < zahl; i++) {
  text += waldtiere[i] + "<br>";
}

// Ausdruck 1 kann auch weggelassen werden (wenn die Werte festgelegt werden, bevor die Schleife beginnt):
let i = 2;
let zahl = waldtiere.length;
let text = "";
for (; i < zahl; i++) {
  text += tiere[i] + "<br>";
}

Ausdruck 2 (Schleifenbedingung)

Oft wird Ausdruck 2 verwendet, um den Zustand der Anfangsvariablen auszuwerten.
Ausdruck 2 ist ebenfalls optional.

Wenn Ausdruck 2 wahr zurückgibt, beginnt die Schleife erneut. Wenn es falsch zurückgibt, wird die Schleife beendet.

Ausdruck 3 (Fortsetzung)

Oft erhöht Ausdruck 3 den Wert der Anfangsvariablen. Dies wird vor allem dann angewendet, wenn die Schleife anhand von Zahlenwerten ein vordefiniertes Ende haben soll.
Ausdruck 3 ist ebenfalls optional.

Ausdruck 3 kann sowohl eine Dekrementierung (i–), als auch eine Inkrementierung (i = i + 15) oder andere Zählarten ausführen.

// Ausdruck 3 kann auch weggelassen werden, wenn die Werte innerhalb der Schleife erhöht werden:
let i = 0;
let len = cars.length;
let text = "";
for (; i < len; ) {
  text += cars[i] + "<br>";
  i++;
}

Schleifenbereich

Verwendung var und let in einer Schleife:

/*
  Verwendung von "var"
*/
// In diesem Beispiel wird var innerhalb der Schleife neu deklariert.

var i = 5;

for (var i = 0; i < 10; i++) {
  // Ausführung
}

// Hier ist i gleich 10



/*
  Verwendung von let
*/
// Im diesem Beispiel, wird der Wert von let nicht innerhalb der Schleife verändert, 
da er bereits außerhalb der Schleife deklariert wurde.

let i = 5;

for (let i = 0; i < 10; i++) {
  // Ausführung
}

// Hier ist i gleich 5

Wenn let verwendet wird, um die i-Variable in einer Schleife zu deklarieren, ist die i-Variable nur innerhalb der Schleife verwendbar.

Die for-of-Schleife

Die JavaScript for of-Anweisung durchläuft die Werte eines iterierbaren Objekts.
Damit können iterierbare Datenstrukturen wie Arrays, Strings, Maps und mehr durchlaufen werden:

Syntax

for (Variable of iterierares Objekt) {
  // Programm, das ausgeführt werden soll
}

Variable – Bei jeder Iteration wird der Variablen der Wert der nächsten Eigenschaft zugewiesen. Variablen können mit const, let, oder var deklariert werden.
Iterierbares Objekt – Ein Objekt mit wiederholbaren Eigenschaften.

for-of-Schleife bei einem Array

const tiere = ["Luchs", "Hirsch", "Steinmarder"];

let text = "";
for (let x of tiere) {
  text += x "<br>";
}

for-of-Schleife bei einem String

let langwort = "Chiemseeschifffahrt";

let text = "";
for (let x of langwort) {
text += x + "<br>";
}

break & continue innerhalb von Schleifen

Die break-Anweisung „springt“ aus einer Schleife.
Die continue-Anweisung „überspringt“ eine Iteration in der Schleife.

Die break-Anweisung

Erinnerung: haben break die in einem früheren Unterrichtsblock bereits verwendet. In einem switch()-Programmcode wurde break verwendet, um aus einer Aussage „herauszuspringen“ .

Die break-Anweisung kann auch verwendet werden, um aus einer Schleife zu springen:

/*
Im folgenden Beispiel beendet "break" die Schleife 
(„unterbricht“ die Schleife), wenn der Schleifenzähler (i) 5 ist
*/

let text = "";

for (let i = 0; i < 50; i++) {
  if (i === 5) { break; }
  text += "Nummer " + i + "." + "<br>";
}

Die continue-Anweisung

Die continue-Anweisung unterbricht eine Iteration (in der Schleife), wenn eine bestimmte Bedingung eintritt, und fährt mit der nächsten Iteration in der Schleife fort.

// Dieses Beispiel überspringt den Wert 3:

let text = "";

for (let i = 0; i < 15; i++) {
  if (i === 3) { continue; }
  text += "Nummer " + i + "." + "<br>";
}