for-Schleife – Iteration

for – Iteration oder for-loop oder for-Schleife – durchläuft Arrays und wiederholt Anweisungen

Die for-Anweisung wiederholte Anweisungen auf Arrays und nodeLists. Javascript unterstützt for für Arrays und nodeLists, for … in auf Objekten und seit ECMAScript 2015 auch forEach für Arrays.

Eine for-Anweisung wird eingesetzt, wenn die Zahl der Durchläufe im Vorherein bekannt ist – z.B. bei Arrays, deren Länge per arr.length abgefragt wird.

while-Schleifen werden eingesetzt, wenn die Zahl der Durchläufe am Anfang nicht bekannt ist.

Eine for-Anweisung in Javascript basiert auf einer Variablen für den Index und führt Anweisungen in abgezählten Schritten durch (Interation), bis eine Bedingung nicht mehr zutrifft.

for-Anweisung

Anders als die Varianten der while-Schleife wird die Variable innerhalb der Increment-Anweisung automatisch herauf- oder heruntergezählt. Im Anweisungsblock der for-Anweisung muss keine Anweisung für das sichere Ende der Schleife sorgen.

Alle Zutaten sind am Anfang der Schleife in einer Klammer gelistet. Das macht die for-Anweisung so gut lesbar.

let i;
for ( i=0; i<=9; i++ ) {
       |     |    |
       |     |    +---> Schritt-Anweisung (Increment)
       |     |
       |     +---> Bedingung
       |
       +---> Anfangs-Ausdruck
       
   … Anweisungen: Mach was mit i …
}

Der Anfangs-Ausdruck initialisiert einen oder mehrere Zähler – fast immer auf der Initialisierung einer Zählvariablen, z.B. i=0;. Der Anfangs-Ausdruck erlaubt eine beliebig komplexe Syntax.

Die Bedingung legt fest, wann die Zielgröße der Zählvariablen erreicht ist, z.B. i<10;.

Die Increment-Anweisung erhöht die Zählvariable oder zählt sie herunter, z.B. i++ oder durch eine komplexe Funktion wie myFunction(i).

Die for-Anweisung wird nach dem folgenden Schema durchgeführt:

  1. Der Anfangs-Ausdruck wird ausgeführt.
  2. Die Bedingung wird geprüft (evaluiert). Wenn der Wert der Bedingung true ist, werden die Anweisungen in der for-Anweisung ausgeführt. Wenn der Wert der Bedingung false liefert, endet die for-Anweisung. Wenn keine Bedingung notiert ist, gilt die Bedingung als true.
  3. Die Anweisungen werden durchgeführt.
  4. Die Increment-Anweisung wird ausgeführt und die Kontrolle wird an Schritt 2 übergeben.
let text = '';
let zahl = 10;
let i;
for ( i=0; i<=zahl; i++ ) {
   text = text + i + ' mal 3 ist ' + i*3 + '\n';
}
console.log (text);
0 mal 3 ist 0
1 mal 3 ist 3
2 mal 3 ist 6
…
9 mal 3 ist 27
10 mal 3 ist 30

Die Variable text speichert die Aufgabe und das Ergebnis jedes Laufs durch den Block der for-Anweisung. Die Variable zahl gibt vor, wie oft der for-Block aufgerufen wird.

for-Anweisungen lassen sich ineinander verschachteln.

for-Anweisungen beginnen nicht notwendigerweise mit dem Index 0. Das Increment (Schrittweite) muss nicht 1 sein. Ein Skript würde den Block der folgenden for-Anweisung vier Mal durchführen: für i=3, i=8, i=13 und i=18.

let index = 3;
let jump = 5; 
let i;
for ( i=index; i<23; i+=jump {   // oder i=i+jump
   // Anweisungen 
}

Verschachtelte for-Schleifen

Zweidimensionale Arrays werden mit verschachtelten for-Schleifen durchlaufen.

let colors = [
 [30, 90, 120],
 [40, 50, 60],    
 [65, 75, 85]
];
let i;
for ( i=0; i<colors.length; i++ ) {
   for (let j=0; j<colors[i].length; j++) {
      console.log ("colors [i][j] "+" colors ["+i+"]["+j+"]" + colors [i][j]);
   }
}

Die innere for-Schleife gibt jedes Element des Arrays aus:

[Log]  colors [i][j]  colors [0][0] 30
[Log]  colors [i][j]  colors [0][1] 90
[Log]  colors [i][j]  colors [0][2] 120
…
[Log]  colors [i][j]  colors [2][0] 65
[Log]  colors [i][j]  colors [2][1] 75
[Log]  colors [i][j]  colors [2][2] 85

Dünnbesetzte Arrays – sparse Arrays

Der Index eines Arrays muss nicht fortlaufend sein.

let arr = ["Anton", "Berta", "Claudia"];
arr[24] = "Zara";

for (let i=0; i<arr.length; i++) {
    console.log ("i " + i + " " + arr[i]);
}

for (let key in arr ) {
    console.log ("key " +  arr[key]);
}

Die for-Schleife wird das Array 24 mal durchlaufen und an den nicht besetzten Stellen gibt arr[i] undefined zurück.

for in wird vier mal durchlaufen und gibt "Anton", "Berta", "Claudia" und "Zara" zurück, aber nicht unbedingt in dieser Reihenfolge. for-in iteriert über die Eigenschaften eines Objekts und Arrays sind letztendlich Objekte mit einem ganzzahligen Schlüssel. for-in klingt jetzt schneller, weil es nur vier mal durchlaufen wird, ist es aber nicht.

forEach

Seit ES5 gibt es forEach für Arrays. Das klassische for (i=0; i<length; i++) braucht eine Variable i als Zähler, muss auf die Anzahl der Array-Element prüfen und das aktuelle Element mit [i] ansprechen. Das läßt viel Raum für potentielle Vertipper (z.B. lenght statt length) und Fehler (z.B. i ).

forEach() überspringt Löcher im sparse Arrays, wir müssen nicht wissen, wie groß das Array ist. forEach ist kürzer und ausdrucksvoller.

for, for-in-Loop, forEach – Iteration