CSS, HTML und Javascript mit {stil}

for-Schleife – Iteration

for – Iteration oder for-loop oder for-Schleifen – wiederholt Anweisungen

Javascript unterstützt for-, for … in- und seit ECMAScript 5 auch forEach.

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.

var 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.
var text = '';
var zahl = 10;
var 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.

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

Verschachtelte for-Schleifen

Zweidimensionale Arrays werden mit verschachtelten for-Schleifen durchlaufen.

var colors = [
 [30, 90, 120],
 [40, 50, 60],    
 [65, 75, 85]
];
var i;
for ( i=0; i<colors.length; i++ ) {
   for (var 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.

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

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

for (var 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.

for, for-in-Loop, forEach – Iteration