Vollzeitblogger

JavaScript Basics: Schleifen: for, forEach, while

March 20, 2014

Dieser Artikel ist teil der JavaScript Basics - Tutorials für Anfänger Serie. Schleifen oder auch loops existieren, damit man etwas X mal machen kann, wobei X eine beliebige Zahl ist. Mit einer while Schleife kann man auch Code ausführen, bis eine Bedingung erreicht ist, zum Beispiel bis ein bestimmter Wert gefunden wurde.

For Schleifen

Eine for Schleife ist die üblichste in der JavaScript Welt, man führt etwas aus, für meist jeden Index eines Arrays. Die For-Schleife ist sehr flexibel und besteht aus mindestens einer Bedingung die beschreibt wie lange die Schleife laufen soll.

Wenn man etwas mit allen Elementen eines Arrays ausführen möchte, würde man die Länge des Arrays als Wert nehmen wie folgt:

<code>var meinArray = [1,2,3,4,5,6,7]
for (var i = 0; i < meinArray.length; i++){
    console.log(meinArray[i]);
}
</code>

Ein Beispiel wäre die Siegerehrung eines Wettkampfes.

Beispiel: Nehmen wir an wir haben eine sortierte Liste der Eiskunstlaufweltmeisterschaftsteilnehmer, sortiert nach Punkten wie hier: http://de.wikipedia.org/wiki/Eiskunstlauf-Weltmeisterschaft_2013#Damen.

Nun könnten wir mit folgender Schleife die ersten 10 davon ausgeben:

<code>var teilnehmer = ['Kim Yu-Na', 'Carolina Kostner', 'Mao Asada', 'Kanako Murakami', 'Ashley Wagner', 'Gracie Gold', 'Li Zijun', 'Kaetlyn Osmond', 'Adelina Sotnikowa', 'Jelisaweta Tuktamyschewa', 'Maé Bérénice Méité', 'Akiko Suzuki'];

for(var i = 0; i < 10; i++){
    if(i === 0){
        console.log(teilnehmer[i] + ' gewann Gold!');
    }
    else if(i === 1){
        console.log(teilnehmer[i] + ' gewann Silber!');
    }
    else if(i === 2){
        console.log(teilnehmer[i] + ' gewann Bronze!');
    }
    else {
        console.log(teilnehmer[i]);
    }
}
</code>

ForEach Schleifen

Um mit jedem Element eines Arrays zu arbeiten, können wir forEach benutzen.

Wenn wir zum Beispiel die numerische Platzierung von Eiskunstlaufweltmeisterschaftsteilnehmern darstellen wollen, können wir das mit dem folgenden Code machen:

<code>var teilnehmer = ['Kim Yu-Na', 'Carolina Kostner', 'Mao Asada', 'Kanako Murakami', 'Ashley Wagner', 'Gracie Gold', 'Li Zijun', 'Kaetlyn Osmond', 'Adelina Sotnikowa', 'Jelisaweta Tuktamyschewa', 'Maé Bérénice Méité', 'Akiko Suzuki'];

teilnehmer.forEach(function(element, index, array){
    var platz = index+1;
    console.log(element + ' kam auf Platz ' + platz)
});
</code>

Wir zählen 1 zu dem index hinzu, weil Arrays mit 0 anfangen, olympische Ranglisten allerdings mit 1. Diese array.forEach Schleife wird also folgende Ausgabe liefern:

<code>Kim Yu-Na kam auf Platz 1
Carolina Kostner kam auf Platz 2
Mao Asada kam auf Platz 3
Kanako Murakami kam auf Platz 4
Ashley Wagner kam auf Platz 5
Gracie Gold kam auf Platz 6
Li Zijun kam auf Platz 7
Kaetlyn Osmond kam auf Platz 8
Adelina Sotnikowa kam auf Platz 9
Jelisaweta Tuktamyschewa kam auf Platz 10
Maé Bérénice Méité kam auf Platz 11
Akiko Suzuki kam auf Platz 12
</code>

Anstatt eine anonyme Funktion zu verwenden, könnte man das obige Beispiel auch mit einer benannten Funktion schreiben:

<code>function output(element, index, array){
    var platz = index+1;
    console.log(element + ' kam auf Platz ' + platz)
}

teilnehmer.forEach(output);
</code>

While Schleifen

Wenn man seine Prozessorauslastung auf 100 Prozent bringen möchte, kann man einfach eine Schleife starten, die nie endet:

<code>while(true){

}
</code>

Diese Endlosschleife wird sich selbst immer weiter ausführen und irgendwann fragt der Browser, ob das Tab gekillt werden soll, da rechenintensives JavaScript darin läuft.

Eine typischere Variante der while Schleife allerdings wäre allerdings ähnlich wie diese und wir führen einen Teil des Scriptes aus, bis die Bedingung false ergibt, also andersrum als in der for Schleife und das Zählwerk wird auch uns überlassen.

<code>var i = 0;
while (i < 10){
    console.log(i);
    i++; // Der Iterator muss von uns geschrieben werden
}
</code>

Ausgabe:

<code>0
1
2
3
4
5
6
7
8
9
</code>

break in JavaScript loops

Um eine Schleife vorzeitig zu interbrechen, kann man break verwenden. Wenn man beispielsweise ein Array durchsucht oder eine endlose while Schleife startet, die aber unter gewissen Umständen unterbrochen werden soll.

Das break keyword funktioniert ebenso bei for oder forEach Schleifen.

Zusammenfassung

Schleifen helfen uns dabei einen Teil unseres Scripts beliebig häufig laufen zu lassen, oder auch etwas auf verschiedene Variablen anzuwenden, die wir zunächst in einem Array sammeln.