path: root/files/de/web/javascript/guide/loops_and_iteration/index.html

---
title: Schleifen und Iterationen
slug: Web/JavaScript/Guide/schleifen_und_iterationen
tags:
  - Guide
  - JavaScript
  - Loop
  - Syntax
  - 'l10n:priority'
translation_of: Web/JavaScript/Guide/Loops_and_iteration
---
<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</div>

<p class="summary">Schleifen sind ein einfaches Werkzeug, um einzelne Schritte wiederholt auszuführen. Dieses Kapitel des <a href="/de/docs/Web/JavaScript/Guide">JavaScript Guide</a> stellt die verschiedenen Statements für Iterationen vor, welche in JavaScript zur Verfügung stehen.</p>

<p>Man kann sich Schleifen wie eine Computerversion des Spiels vorstellen, bei dem man jemandem sagt, er soll x Schritte in eine Richtung und dann y Schritte in eine andere Richtung gehen. So kann zum Beispiel die Aussage "Gehe fünf Schritte nach Osten" mit Hilfe von Schleifen so ausgedrückt werden:</p>

<pre class="brush: js">var schritt;
for (schritt = 0; schritt &lt; 5; schritt++) {
  // Laufe 5 mal, mit den Werten von Schritt 0 bis 4
  console.log('Gehe einen Schritt nach Osten');
}
</pre>

<p>Es gibt viele verschiedene Arten von Schleifen, doch im Wesentlichen verrichten alle die gleiche Aufgabe: sie führen eine Aktion für eine bestimmte Anzahl an Wiederholungen aus (diese Anzahl kann auch 0 sein). Dabei ermöglichen die verschiedenen Arten von Schleifen unterschiedliche Anfangs- und Endpunkte festzulegen. Es gibt zahlreiche Situationen in denen eine Art von Schleifen einfacher zum Ergebnis führt, als eine andere.</p>

<p>JavaScript stellt folgende Statements für Schleifen zur Verfügung:</p>

<ul>
 <li>{{anch("for Statement")}}</li>
 <li>{{anch("do...while Statement")}}</li>
 <li>{{anch("while Statement")}}</li>
 <li>{{anch("label Statement")}}</li>
 <li>{{anch("break Statement")}}</li>
 <li>{{anch("continue Statement")}}</li>
 <li>{{anch("for...in Statement")}}</li>
 <li>{{anch("for...of Statement")}}</li>
</ul>

<h2 id="for_Statement"><code>for</code> Statement</h2>

<p>Eine  {{jsxref("statements/for","for Schleife")}} wird so lange durchlaufen, bis eine bestimmte Bedingung den Wert <code>false</code> liefert. Die for Schleife in JavaScript ist vergleichbar mit der in Java und C. Ein for Statement sieht wie folgt aus:</p>

<pre class="syntaxbox">for ([initialerAusruck]; [Bedingung]; [erhöhenderAusdruck])
  Anweisung
</pre>

<p>Bei der Ausführung einer for Schleife geschieht folgendes:</p>

<ol>
 <li>Der Ausdruck zur Initialisierung der Schleife <code>initialerAsudruck</code>, wird ausgeführt, sofern dieser existiert. Dieser Ausdruck initialisiert einen oder mehrere Schleifenzähler, wobei die Syntax beliebig komplexe Ausdrücke zulässt. In diesem Ausdruck können auch Variablen deklariert werden.</li>
 <li>Die Bedingung <code>Bedingung</code> wird geprüft. Wenn die Auswertung von <code>Bedingung</code> den Wert <code>true</code> ergibt, werden die Anweisungen innerhalb der Schleife ausgeführt. Ergibt die Prüfung hingegen <code>false</code>, wird die Schleife verlassen. Bleibt die Bedingung leer, wird immer der Wert <code>true</code> angenommen.</li>
 <li>Die <code>Anweisung</code> wird ausgeführt. Um mehrere Anweisungen auszuführen, werden Block-Anweisungen (<code>{ ... }</code>) verwendet, um diese zu gruppieren.</li>
 <li>Wenn vorhanden, wird der Ausdruck <code>erhöhenderAusdruck</code> ausgeführt.</li>
 <li>Geht zu Schritt 2 zurück.</li>
</ol>

<h3 id="Beispiel"><strong>Beispiel</strong></h3>

<p>Die folgende Funktion enthält ein for Statement, welche die Anzahl der ausgewählten Optionen aus einer Auswahlliste (ein {{HTMLElement("select")}}, welches eine Mehrfachauswahl erlaubt) ermittelt. Das for Statement deklariert eine Variable <code>i</code> und initialisiert diese mit dem Wert 0. Sie prüft ob <code>i</code> kleiner als die Anzahl der verfügbarer Optionen des <code>&lt;select&gt;</code> Elements ist, führt das nachfolgende <code>if</code> Statement aus und erhöht <code>i</code> bei jedem Schleifendurchlauf um 1.</p>

<pre class="brush: html">&lt;form name="selectForm"&gt;
  &lt;p&gt;
    &lt;label for="musicTypes"&gt;Choose some music types, then click the button below:&lt;/label&gt;
    &lt;select id="musicTypes" name="musicTypes" multiple="multiple"&gt;
      &lt;option selected="selected"&gt;R&amp;B&lt;/option&gt;
      &lt;option&gt;Jazz&lt;/option&gt;
      &lt;option&gt;Blues&lt;/option&gt;
      &lt;option&gt;New Age&lt;/option&gt;
      &lt;option&gt;Classical&lt;/option&gt;
      &lt;option&gt;Opera&lt;/option&gt;
    &lt;/select&gt;
  &lt;/p&gt;
  &lt;p&gt;&lt;input id="btn" type="button" value="How many are selected?" /&gt;&lt;/p&gt;
&lt;/form&gt;

&lt;script&gt;
function howMany(selectObject) {
  var numberSelected = 0;
  for (var i = 0; i &lt; selectObject.options.length; i++) {
    if (selectObject.options[i].selected) {
      numberSelected++;
    }
  }
  return numberSelected;
}

var btn = document.getElementById('btn');
btn.addEventListener('click', function(){
  alert('Number of options selected: ' + howMany(document.selectForm.musicTypes))
});
&lt;/script&gt;

</pre>

<h2 id="do...while_Statement"><code>do...while</code> Statement</h2>

<p>Das {{jsxref("statements/do...while", "do...while")}} Statement wiederholt eine bestimmte Anweisung, bis eine Bedingung <code>false</code> ergibt. Ein <code>do...while</code> Statement sieht wie folgt aus:</p>

<pre class="syntaxbox">do
  anweisung
while (bedingung);
</pre>

<p><code>amweisung</code> wird dabei einmal ausgeführt, bevor die Bedingung geprüft wird. Um mehrere Anweisungen auszuführen, werden diese als Block Statement (<code>{ ... }</code>) gruppiert. Wenn <code>bedingung</code> <code>true</code> ist, wird die Anweisung erneut ausgeführt. Nach jeder Ausführung der Anweisungen, wird die Bedingung erneut geprüft. Sobald <code>bedingung</code> <code>false</code> ergibt, endet die Ausführung der Schleife und die nächste Anweisung nach der <code>do...while </code>Schleife aus wird ausgeführt.</p>

<h3 id="Beispiel_2"><strong>Beispiel</strong></h3>

<p>Im folgenden Beispiel wird die Schleife mindestens einmal ausgeführt. Anschliessend wird die Schleife so oft durchlaufen, bis <code>i</code> nicht mehr kleiner als 5 ist.</p>

<pre class="brush: js">var i = 0;
do {
  i += 1;
  console.log(i);
} while (i &lt; 5);</pre>

<h2 id="while_Statement"><code>while</code> Statement</h2>

<p>Ein {{jsxref("statements/while","while")}} Statement wird solange ausgeführt, wie eine bestimmte Bedingung <code>true</code> ergibt. Ein <code>while</code> Statement sieht wie folgt aus:</p>

<pre class="syntaxbox">while (bedingung)
  anweisung
</pre>

<p>Wenn die Bedingung <code>false</code> ist, wird die Schleife nicht weiter durchlaufen und die nächste Anweisung nach der <code>while</code> Schleife wird ausgeführt.</p>

<p>Die Prüfung der Bedingung erfolgt, bevor die Anweisungen innerhalb der Schleife ausgeführt werden. Nur wenn die Bedingung <code>true</code> ist, wird die Schleife ausgeführt, wobei anschliessend eine erneute Prüfung der Bedingung erfolgt. Ergibt die Bedingung <code>false</code>, wir mit der Anweisungen nach der <code>while</code> Schleife fortgefahren.</p>

<p>Um mehrere Anweisungen auszuführen, werden diese in einer block Anweisung ({ ... }) gruppiert.</p>

<h3 id="Beispiel_1"><strong>Beispiel 1</strong></h3>

<p>Die folgende <code>while</code> Schleife wird so lange ausgeführt, wie <code>n</code> kleiner als 3 ist.</p>

<pre class="brush: js">var n = 0;
var x = 0;
while (n &lt; 3) {
  n++;
  x += n;
}
</pre>

<p>Mit jedem Schleifendurchlauf wird <code>n</code> um 1 erhöht. Der Wert von <code>n</code> wird dann zum Wert von <code>x</code> addiert. Dadurch nehmen <code>x</code> und <code>n</code> die folgenden Werte an:</p>

<ul>
 <li>Nach dem ersten Durchlauf: <code>n</code> = 1 und <code>x</code> = 1</li>
 <li>Nach dem zweiten Durchlauf: <code>n</code> = 2 und <code>x</code> = 3</li>
 <li>Nach dem dritten Durchlauf: <code>n</code> = 3 und <code>x</code> = 6</li>
</ul>

<p>Nach dem dritten Durchlauf ist die Bedingung <code>n &lt; 3</code> nicht mehr <code>true</code> und die Schleife wird verlassen.</p>

<h3 id="Beispiel_2_2"><strong>Beispiel 2</strong></h3>

<p>Endlosschleifen müssen vermieden werden. Es ist immer sicherzustellen, dass die Bedingung irgendwann <code>false</code> ergibt, da die Schleife ansonsten nie endet. Die Anweisung in der folgenden <code>while</code> Schleife wird für immer ausgeführt, weil die Bedingung nie <code>false</code> ergibt:</p>

<pre class="brush: js">while (true) {
  console.log('Hello, world!');
}</pre>

<h2 id="Label_Statement"><code>Label</code> Statement</h2>

<p>Ein {{jsxref("statements/label","label")}} stellt ein Statement mit einem Bezeichner bereit, welches es ermöglicht auf eine bestimmte stelle im Programm zu verweisen. So kann ein Label zum Beispiel dafür verwendet werden eine Schleife zu identifizieren und dann mit <code>break</code> oder <code>continue</code> festzulegen ob diese beendet oder weiter durchlaufen werden soll.</p>

<p>Die Syntax des Label Statement sieht wie folgt aus:</p>

<pre class="syntaxbox">label :
   anweisung
</pre>

<p>Der Wert von <code><em>label</em></code> kann jede Bezeichnung sein, der kein reserviertes JavaScript Schlüsselwort ist. Die <code><em>anweisung</em></code> die mit dem Label identifiziert wird, kann jede beliebige Anweisung sein.</p>

<h3 id="Beispiel_3"><strong>Beispiel</strong></h3>

<p>In diesem Beispiel identifiziert das Label <code>markLoop</code> eine <code>while</code> Schleife.</p>

<pre class="brush: js">markLoop:
while (theMark == true) {
   doSomething();
}</pre>

<h2 id="break_Statement"><code>break</code> Statement</h2>

<p>Um eine Schleife oder ein <code>switch</code> Statement zu beenden, verwendet man das {{jsxref("statements/break","break")}} Statement in Verbindung mit dem Label Statement.</p>

<ul>
 <li>Wird <code>break</code> ohne ein Label verwendet, so wird die innerste <code>while</code>, <code>do-while</code>, <code>for</code> Schleife oder <code>switch</code> Statement beendet und die nachfolgende Ausführung wird ausgeführt.</li>
 <li>Wird <code>break</code> in Verbindung mit einem Label eingesetzt, wird die Anweisung beendet, die mit dem Label identifiziert wird.</li>
</ul>

<p>Die Syntax von <code>break</code> sieht wie folgt aus:</p>

<pre class="syntaxbox">break [<em>label</em>];
</pre>

<p>Die erste Variante der Syntax beendet die innerste Schleife oder das innerste <code>switch</code> Statement. Die zweite Variante beendet eine bestimmte Anweisung.</p>

<h3 id="Beispiel_1_2"><strong>Beispiel</strong> <strong>1</strong></h3>

<p>Das folgende Beispiel durchläuft die Elemente in einem Array, bis ein Element mit dem Wert von <code>theValue</code> gefunden wird:</p>

<pre class="brush: js">for (var i = 0; i &lt; a.length; i++) {
  if (a[i] == theValue) {
    break;
  }
}</pre>

<h3 id="Beispiel_2_break_mit_einem_Label"><strong>Beispiel 2: </strong><code>break</code> mit einem Label</h3>

<pre class="brush: js">var x = 0;
var z = 0;
labelCancelLoops: while (true) {
  console.log('Outer loops: ' + x);
  x += 1;
  z = 1;
  while (true) {
    console.log('Inner loops: ' + z);
    z += 1;
    if (z === 10 &amp;&amp; x === 10) {
      break labelCancelLoops;
    } else if (z === 10) {
      break;
    }
  }
}
</pre>

<h2 id="continue_Statement"><code>continue</code> Statement</h2>

<p>Das {{jsxref("statements/continue","continue")}} Statement kann eingesetzt werden, um eine w<code>hile</code>, <code>do-while</code>, <code>for Schleife</code> oder ein Statement mit einem Label erneut auszuführen.</p>

<ul>
 <li>Wird <code>continue</code> ohne ein Label verwendet, wird der Durchlauf der innersten <code>while</code>, <code>do-while</code> oder <code>for</code> Statement beendet und der nächsten Durchlauf wird begonnen. Im Gegensatz zum <code>break</code> Statement, wird mit <code>continue</code> nicht die gesamte Schleife abgebrochen. In einer <code>while</code> Schleife springt das Programm zurück zur Bedingung. In einer <code>for</code> Schleife springt das Programm zum erhöhenden Ausdruck.</li>
 <li>Wird <code>continue</code> mit einem Label eingesetzt, wird <code>continue</code> auf die Anweisungen angewendet, die durch das Label identifiziert werden.</li>
</ul>

<p>Die Syntax des <code>continue</code> Statement sieht wie folgt aus:</p>

<pre class="syntaxbox"><code>continue</code> [<em>label</em>];
</pre>

<h3 id="Beispiel_1_3"><strong>Beispiel 1</strong></h3>

<p>Das folgende Beispiel zeigt eine <code>while</code> Schleife, mit einem <code>continue</code> Statement, die weiter ausgeführt wird, wenn <code>i</code> den Wert 3 hat. Dadurch erhält <code>n</code> die Werte 1, 3, 7 und 12.</p>

<pre class="brush: js">var i = 0;
var n = 0;
while (i &lt; 5) {
  i++;
  if (i == 3) {
    continue;
  }
  n += i;
}
</pre>

<h3 id="Beispiel_2_3"><strong>Beispiel 2</strong></h3>

<p>Eine Anweisung mit dem Label <em><code>checkiandj</code></em> enthält eine Anweisung mit dem Label <em><code>checkj</code></em>. Wenn <code>continue</code> erreicht wird, bricht das Programm den aktuellen Schleifendurchlauf von <em><code>checkj</code></em> ab und setzt die Ausführung beim nächsten Durchlauf fort. Immer wenn <code>continue</code> erreicht wird, wird <em><code>checkj</code></em> erneut ausgeführt, bis dessen Bedingung <code>false</code> zurückliefert. Wird <code>false</code> zurückgeliefert, wird der Rest der <em><code>checkiandj</code></em> Anweisung vollendet und <em><code>checkiandj</code></em> wird wiederholt, bis dessen Bedingung <code>false</code> zurückgibt. Wird <code>false</code> zurückgegeben, wird das Programm bei der Anweisung nach <em><code>checkiandj</code></em> fortgesetzt.</p>

<p>Wenn <code>continue</code> ein Label <em><code>checkiandj</code></em> hätte, würde das Programm am Anfang der <em><code>checkiandj</code></em> Anweisung fortgesetzt werden.</p>

<pre class="brush: js">var i = 0;
var j = 10;
checkiandj:
  while (i &lt; 4) {
    console.log(i);
    i += 1;
    checkj:
      while (j &gt; 4) {
        console.log(j);
        j -= 1;
        if ((j % 2) == 0) {
          continue checkj;
        }
        console.log(j + ' is odd.');
      }
      console.log('i = ' + i);
      console.log('j = ' + j);
  }</pre>

<h2 id="for...in_Statement"><code>for...in</code> Statement</h2>

<p>Das {{jsxref("statements/for...in","for...in")}} Statement durchläuft eine bestimmte Variable über alle aufzählbaren Eigenschaften eines Objekts. Für jede einzelne Eigenschaft führt JavaScript die entsprechende Anweisung aus. Ein <code>for...in</code> Statement sieht wie folgt aus:</p>

<pre class="syntaxbox">for (variable in object) {
  statements
}
</pre>

<h3 id="Beispiel_4"><strong>Beispiel</strong></h3>

<p>Die folgende Funktion nimmt als Argument ein Objekt und dessen Namen entgegen. Anschliessend durchläuft sie alle Eigenschaften des Objekts und liefert einen String zurück, der alle Namen und Werte der Eigenschaften des Objekts enthält.</p>

<pre class="brush: js">function dump_props(obj, obj_name) {
  var result = '';
  for (var i in obj) {
    result += obj_name + '.' + i + ' = ' + obj[i] + '&lt;br&gt;';
  }
  result += '&lt;hr&gt;';
  return result;
}
</pre>

<p>Für ein Objekt <code>car</code> mit den Eigenschaften <code>make</code> und <code>model</code>, sieht das Ergebnis wie folgt aus:</p>

<pre class="brush: js">car.make = Ford
car.model = Mustang
</pre>

<h3 id="Arrays"><strong>Arrays</strong></h3>

<p>Auch wenn es nahe liegt diesen Weg zu verwenden, um die Elemente eines {{jsxref("Array")}}s zu durchlaufen, würde das <strong>for...in</strong> Statement die Namen der definierten Werte und den numerischen Index zurückliefern. Daher ist es besser eine normale {{jsxref("statements/for","for")}} Schleifen mit einem numerischen Index zu verwenden, wenn Arrays durchlaufen werden sollen, da das <strong>for...in</strong> Statement neben den benutzerdefinierten Elementen auch die Eigenschaften des Arrays durchläuft, wenn man Methoden oder Eigenschaften hinzufügt oder ändert.</p>

<h2 id="for...of_Statement"><code>for...of</code> Statement</h2>

<p>Das {{jsxref("statements/for...of","for...of")}} Statement erstellt eine Schleife, die alle <a href="/de/docs/Web/JavaScript/Guide/iterable">iterable objects</a> (inklusive {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("functions/arguments","arguments")}} Objekt, etc.) durchläuft und die Anweisungen ausführt, die mit dem Wert des Durchlaufes für jede Eigenschaft übereinstimmt.</p>

<pre class="syntaxbox">for (<em>variable</em> of <em>object</em>) {
  <em>statement
</em>}</pre>

<p>Das folgende Beispiel zeigt den Unterschied zwischen der <code>for...of</code> Schleife und der {{jsxref("statements/for...in","for...in")}} Schleife. Während <code>for...in</code> die Namen der Eigenschaften durchläuft, durchläuft <code>for...of</code> die Werte der Eigenschaft:</p>

<pre class="brush:js">var arr = [3, 5, 7];
arr.foo = 'hello';

for (var i in arr) {
   console.log(i); // logs "0", "1", "2", "foo"
}

for (var i of arr) {
   console.log(i); // logs 3, 5, 7
}
</pre>

<p>{{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</p>