• Zurück
• Weiter

Schleifen bieten eine schnelle und einfache Möglichkeit, etwas wiederholt auszuführen. Dieses Kapitel desJavaScript-Leitfadens stellt die verschiedenen Iterationsanweisungen vor, die JavaScript zur Verfügung stehen.

Sie können sich eine Schleife als eine computerisierte Version des Spiels vorstellen, bei dem Sie jemandem sagen, er solleX Schritte in eine Richtung und dannY Schritte in eine andere Richtung gehen. Zum Beispiel könnte die Idee "Gehen Sie fünf Schritte nach Osten" auf diese Weise als Schleife ausgedrückt werden:

for (let step = 0; step < 5; step++) {  // Runs 5 times, with values of step 0 through 4.  console.log("Walking east one step");}

Es gibt viele verschiedene Arten von Schleifen, aber sie tun im Wesentlichen alle dasselbe: Sie wiederholen eine Aktion eine bestimmte Anzahl von Malen. (Beachten Sie, dass diese Anzahl auch null sein kann!)

Die verschiedenen Schleifenmechanismen bieten unterschiedliche Möglichkeiten, den Start- und Endpunkt der Schleife zu bestimmen. Es gibt verschiedene Situationen, die besser durch eine Schleifenart unterstützt werden als durch die anderen.

Die in JavaScript bereitgestellten Anweisungen für Schleifen sind:

• for-Anweisung
• do...while-Anweisung
• while-Anweisung
• labeled-Anweisung
• break-Anweisung
• continue-Anweisung
• for...in-Anweisung
• for...of-Anweisung

for-Anweisung

Einefor-Schleife wird so lange wiederholt, bis eine bestimmte Bedingungfalse ergibt. Die JavaScript-for-Schleife ist derfor-Schleife in Java und C ähnlich.

Einefor-Anweisung sieht wie folgt aus:

for (initialization; condition; afterthought)  statement

Wenn einefor-Schleife ausgeführt wird, passiert Folgendes:

1. Der initialisierende Ausdruckinitialization, falls vorhanden, wird ausgeführt. Dieser Ausdruck initialisiert in der Regel einen oder mehrere Schleifenzähler, aber die Syntax erlaubt auch einen Ausdruck beliebiger Komplexität. Dieser Ausdruck kann auch Variablen deklarieren.
2. Der Ausdruckcondition wird ausgewertet. Wenn der Wert voncondition wahr ist, werden die Schleifenanweisungen ausgeführt. Andernfalls wird diefor-Schleife beendet. (Wenn der Ausdruckcondition vollständig weggelassen wird, wird die Bedingung als wahr vorausgesetzt.)
3. Diestatement wird ausgeführt. Um mehrere Anweisungen auszuführen, verwenden Sie eineBlockanweisung ({ }), um diese Anweisungen zu gruppieren.
4. Falls vorhanden, wird der Aktualisierungsausdruckafterthought ausgeführt.
5. Die Steuerung kehrt zu Schritt 2 zurück.

Beispiel

Im folgenden Beispiel enthält die Funktion einefor-Anweisung, die die Anzahl der ausgewählten Optionen in einer Scroll-Liste zählt (ein<select>-Element, das Mehrfachauswahl erlaubt).

HTML

<form name="selectForm">  <label for="musicTypes"    >Choose some music types, then click the button below:</label  >  <select name="musicTypes" multiple>    <option selected>R&amp;B</option>    <option>Jazz</option>    <option>Blues</option>    <option>New Age</option>    <option>Classical</option>    <option>Opera</option>  </select>  <button type="button">How many are selected?</button></form>

JavaScript

Hier deklariert diefor-Anweisung die Variablei und initialisiert sie mit0. Sie überprüft, obi kleiner ist als die Anzahl der Optionen im<select>-Element, führt die folgendeif-Anweisung aus und erhöhti um 1 nach jedem Durchlauf durch die Schleife.

function countSelected(selectObject) {  let numberSelected = 0;  for (let i = 0; i < selectObject.options.length; i++) {    if (selectObject.options[i].selected) {      numberSelected++;    }  }  return numberSelected;}const btn = document.getElementById("btn");btn.addEventListener("click", () => {  const musicTypes = document.selectForm.musicTypes;  console.log(`You have selected ${countSelected(musicTypes)} option(s).`);});

do...while-Anweisung

Diedo...while-Anweisung wird so lange wiederholt, bis eine bestimmte Bedingungfalse ergibt.

Einedo...while-Anweisung sieht wie folgt aus:

do  statementwhile (condition);

statement wird immer mindestens einmal ausgeführt, bevor die Bedingung überprüft wird. (Um mehrere Anweisungen auszuführen, verwenden Sie eine Blockanweisung ({ }), um diese Anweisungen zu gruppieren.)

Wenncondition wahr ist, wird die Anweisung erneut ausgeführt. Am Ende jeder Ausführung wird die Bedingung überprüft. Wenn die Bedingungfalse ist, wird die Ausführung gestoppt und die Steuerung an die Anweisung nachdo...while übergeben.

Beispiel

Im folgenden Beispiel wird diedo-Schleife mindestens einmal durchlaufen und erneut durchlaufen, bisi nicht mehr kleiner als5 ist.

let i = 0;do {  i += 1;  console.log(i);} while (i < 5);

while-Anweisung

Einewhile-Anweisung führt ihre Anweisungen aus, solange eine bestimmte Bedingungtrue ist. Einewhile-Anweisung sieht wie folgt aus:

while (condition)  statement

Wenn dieconditionfalse wird, wird diestatement innerhalb der Schleife nicht mehr ausgeführt und die Steuerung wird an die Anweisung nach der Schleife übergeben.

Der Bedingungstest erfolgtvor der Ausführung derstatement in der Schleife. Wenn die Bedingungtrue zurückgibt, wirdstatement ausgeführt und diecondition erneut getestet. Wenn die Bedingungfalse zurückgibt, wird die Ausführung gestoppt und die Steuerung an die Anweisung nachwhile übergeben.

Um mehrere Anweisungen auszuführen, verwenden Sie eine Blockanweisung ({ }), um diese Anweisungen zu gruppieren.

Beispiel 1

Die folgendewhile-Schleife iteriert, solangen kleiner als3 ist:

let n = 0;let x = 0;while (n < 3) {  n++;  x += n;}

Mit jeder Iteration erhöht die Schleifen und addiert diesen Wert zux. Daher nehmenx undn folgende Werte an:

• Nach dem ersten Durchlauf:n =1 undx =1
• Nach dem zweiten Durchlauf:n =2 undx =3
• Nach dem dritten Durchlauf:n =3 undx =6

Nach Abschluss des dritten Durchlaufs ist die Bedingungn < 3 nicht mehrtrue, sodass die Schleife beendet wird.

Beispiel 2

Vermeiden Sie Endlosschleifen. Stellen Sie sicher, dass die Bedingung in einer Schleife schließlichfalse wird—sonst wird die Schleife nie beendet! Die Anweisungen in der folgendenwhile-Schleife werden für immer ausgeführt, da die Bedingung niemalsfalse wird:

// Infinite loops are bad!while (true) {  console.log("Hello, world!");}

labeled-Anweisung

Einelabel versieht eine Anweisung mit einer Kennung, die es Ihnen ermöglicht, später in Ihrem Programm darauf zu verweisen. Zum Beispiel können Sie ein Label verwenden, um eine Schleife zu kennzeichnen und dann diebreak- odercontinue-Anweisungen verwenden, um anzugeben, ob ein Programm die Schleife unterbrechen oder ihre Ausführung fortsetzen soll.

Die Syntax der labeled-Anweisung sieht wie folgt aus:

label:  statement

Der Wert deslabel kann eine beliebige JavaScript-Kennung sein, die kein reserviertes Wort ist. Diestatement, die Sie mit einem Label kennzeichnen, kann jede Anweisung sein. Beispiele für die Verwendung von labeled-Anweisungen finden Sie in den folgenden Beispielen zubreak undcontinue.

break-Anweisung

Verwenden Sie diebreak-Anweisung, um eine Schleife,switch oder in Verbindung mit einer labeled-Anweisung zu beenden.

• Wenn Siebreak ohne Label verwenden, wird die innerste umschließendewhile,do-while,for oderswitch sofort beendet und die Steuerung an die folgende Anweisung übergeben.
• Wenn Siebreak mit einem Label verwenden, wird die spezifizierte labeled-Anweisung beendet.

Die Syntax derbreak-Anweisung sieht wie folgt aus:

break;break label;

1. Die erste Form der Syntax beendet die innerste umschließende Schleife oderswitch.
2. Die zweite Form der Syntax beendet die spezifizierte umschließende labeled-Anweisung.

Beispiel 1

Das folgende Beispiel iteriert durch die Elemente eines Arrays, bis es den Index eines Elements findet, dessen WerttheValue ist:

for (let i = 0; i < a.length; i++) {  if (a[i] === theValue) {    break;  }}

Beispiel 2: Abbrechen zu einem Label

let x = 0;let 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 && x === 10) {      break labelCancelLoops;    } else if (z === 10) {      break;    }  }}

continue-Anweisung

Diecontinue-Anweisung kann verwendet werden, um einewhile,do-while,for oderlabel-Anweisung neu zu starten.

• Wenn Siecontinue ohne Label verwenden, wird die aktuelle Iteration der innersten umschließendenwhile,do-while oderfor-Anweisung beendet, und die Ausführung der Schleife wird mit der nächsten Iteration fortgesetzt. Im Gegensatz zurbreak-Anweisung beendetcontinue nicht die Ausführung der Schleife vollständig. In einerwhile-Schleife springt sie zurück zur Bedingung. In einerfor-Schleife springt sie zumincrement-expression.
• Wenn Siecontinue mit einem Label verwenden, bezieht sie sich auf die Schleifenanweisung, die mit diesem Label gekennzeichnet ist.

Die Syntax dercontinue-Anweisung sieht wie folgt aus:

continue;continue label;

Beispiel 1

Das folgende Beispiel zeigt einewhile-Schleife mit einercontinue-Anweisung, die ausgeführt wird, wenn der Wert voni3 ist. Dadurch nimmtn die Werte1,3,7 und12 an.

let i = 0;let n = 0;while (i < 5) {  i++;  if (i === 3) {    continue;  }  n += i;  console.log(n);}// Logs:// 1 3 7 12

Wenn Sie diecontinue;-Anweisung auskommentieren, würde die Schleife bis zum Ende laufen und Sie würden1,3,6,10,15 sehen.

Beispiel 2

Eine Anweisung mit dem LabelcheckIandJ enthält eine Anweisung mit dem LabelcheckJ. Wenncontinue auftritt, beendet das Programm die aktuelle Iteration voncheckJ und beginnt die nächste Iteration. Jedes Mal, wenncontinue auftritt, wirdcheckJ erneut durchlaufen, bis seine Bedingungfalse ergibt. Wennfalse zurückgegeben wird, wird der Rest dercheckIandJ-Anweisung ausgeführt, undcheckIandJ wird erneut durchlaufen, bis seine Bedingungfalse ergibt. Wennfalse zurückgegeben wird, setzt das Programm die Ausführung mit der Anweisung nachcheckIandJ fort.

Hättecontinue ein LabelcheckIandJ, würde das Programm an den Anfang dercheckIandJ-Anweisung fortsetzen.

let i = 0;let j = 10;checkIandJ: while (i < 4) {  console.log(i);  i += 1;  checkJ: while (j > 4) {    console.log(j);    j -= 1;    if (j % 2 === 0) {      continue;    }    console.log(j, "is odd.");  }  console.log("i =", i);  console.log("j =", j);}

for...in-Anweisung

Diefor...in-Anweisung iteriert eine spezifizierte Variable über alle aufzählbaren Eigenschaften eines Objekts. Für jede eindeutige Eigenschaft führt JavaScript die spezifizierten Anweisungen aus. Einefor...in-Anweisung sieht wie folgt aus:

for (variable in object)  statement

Beispiel

Die folgende Funktion nimmt als Argument ein Objekt und den Namen des Objekts. Sie iteriert dann über alle Eigenschaften des Objekts und gibt einen String zurück, der die Eigenschaftsnamen und deren Werte auflistet.

function dumpProps(obj, objName) {  let result = "";  for (const i in obj) {    result += `${objName}.${i} = ${obj[i]}<br>`;  }  result += "<hr>";  return result;}

Für ein Objektcar mit den Eigenschaftenmake undmodel würderesult sein:

car.make = Fordcar.model = Mustang

Arrays

Obwohl es verlockend sein mag, dies als Möglichkeit zu nutzen, überArray-Elemente zu iterieren, wird diefor...in-Anweisung neben den numerischen Indizes auch den Namen Ihrer benutzerdefinierten Eigenschaften zurückgeben.

Daher ist es besser, eine traditionellefor-Schleife mit einem numerischen Index zu verwenden, wenn Sie über Arrays iterieren, da diefor...in-Anweisung über benutzerdefinierte Eigenschaften zusätzlich zu den Array-Elementen iteriert, wenn Sie das Array-Objekt modifizieren (zum Beispiel, wenn Sie benutzerdefinierte Eigenschaften oder Methoden hinzufügen).

for...of-Anweisung

Diefor...of-Anweisung erstellt eine Schleife, die überiterierbare Objekte (einschließlichArray,Map,Set,arguments-Objekt und so weiter) iteriert und einen benutzerdefinierten Iterationshaken mit Anweisungen aufruft, die für den Wert jeder eindeutigen Eigenschaft ausgeführt werden.

for (variable of iterable)  statement

Das folgende Beispiel zeigt den Unterschied zwischen einerfor...of-Schleife und einerfor...in-Schleife. Währendfor...in über Eigenschaftsnamen iteriert, iteriertfor...of über Eigenschaftswerte:

const arr = [3, 5, 7];arr.foo = "hello";for (const i in arr) {  console.log(i);}// "0" "1" "2" "foo"for (const i of arr) {  console.log(i);}// Logs: 3 5 7

Diefor...of- undfor...in-Anweisungen können auch mitDestructuring verwendet werden. Zum Beispiel können Sie gleichzeitig über die Schlüssel und Werte eines Objekts mitObject.entries() iterieren.

const obj = { foo: 1, bar: 2 };for (const [key, val] of Object.entries(obj)) {  console.log(key, val);}// "foo" 1// "bar" 2

• Zurück
• Weiter