CSS, HTML und Javascript mit {stil}

Schleifen in Javascript: for, for … in, do while

Javascript unterstützt for-, for … in-, do while- und while-Schleifen sowie label (label ist keine Schleifenanweisung, wird aber häufig in Schleifen benutzt).

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

while-Schleifen werden eingesetzt, wenn die Zahl der Durchläufe Anfangs unbekannt ist.

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

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 besonders 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 kann die Variable aber auch deklarieren (var i=0;) und 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 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;
for (var i=0; i<=zahl; i++) {
   text = text + i + ' mal 3 ist ' + i*3 + '\n';
}
alert (text);

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; 
for (var i=index; i<23; i+=jump {   // oder i=i+jump
   // Anweisungen 
}

Javascript for … in-Anweisung

for (elem in MyObject) {
   Anweisungen;
}

Die for…in-Anweisung ist ein Sonderfall der for-Anweisung und dient allein der Iteration durch Arrays oder Objekte. Bei einem Array durchläuft die for…in-Anweisung alle Elemente eines Arrays. Bei Objekten durchläuft die for…in-Anweisung alle Eigenschaften eines Objekts. Das Schöne an der for…in-Anweisung ist, dass die Anzahl der Elemente nicht zuvor festgestellt werden muss und dass keine Endlos-Schleife zu befürchten ist.

var text = "";
for (elem in window.navigator) {
   text = text + window.navigator[elem] + '\n';
}
alert(text);

Javascript with-Anweisung

Die with-Anweisung soll Schreibarbeit sparen und den Zugriff auf Objekt-Elemente übersichtlicher gestalten. Objektbandwürmer wie

baba.bumbum.hamma.sumsum.niknak.elem1 = x;
baba.bumbum.hamma.sumsum.niknak.elem2 = y;

verkürzt die with-Anweisung zu

with (baba.bumbum.hamma.sumsum.niknak) {
   elem1 = x; 
   elem2 = y;
}

und schon sieht alles viel harmloser aus.

Leider verbirgt die friedliche Oberfläche, was hier tatsächlich angesprochen wird: baba.bumbum.hamma.sumsum.niknak.elem1 oder einer globale Variable elem1? In dieser Hinsicht bewirkt eine Variable dieselbe Vereinfachung, sorgt aber gleichzeitig dafür, dass der Kontext auf jeden Fall korrekt und bekannt ist.

var myObj = baba.bumbum.hamma.sumsum.niknak;
myObj.elem1 = x;
myObj.elem2 = y; 

entlastet genauso von der Schreibarbeit wie die with-Anweisung, stellt aber gleichzeitig sicher, welches elem1 bzw. elem2 hier gemeint ist.