Erklärte JavaScript-Schleifen: Für Schleife, While-Schleife, Do ... while-Schleife und mehr

In JavaScript werden Schleifen verwendet, um wiederholte Aufgaben basierend auf einer Bedingung auszuführen. Die Bedingungen kehren normalerweise zurück trueoder werden falseanalysiert. Eine Schleife läuft weiter, bis die definierte Bedingung zurückkehrt false.

Die drei häufigsten Arten von Schleifen sind

  • zum
  • während
  • mach während

Sie können eingeben js for, js whileoder js do whileum weitere Informationen zu einem dieser zu erhalten. Schauen wir uns diese und einige Variationen jetzt genauer an.

für Schleife

Syntax

for ([initialization]); [condition]; [final-expression]) { // statement }

Die Javascript- forAnweisung besteht aus drei Ausdrücken und einer Anweisung:

Beschreibung

  • Initialisierung - Vor der ersten Ausführung in der Schleife ausführen. Dieser Ausdruck wird häufig zum Erstellen von Zählern verwendet. Hier erstellte Variablen sind auf die Schleife beschränkt. Sobald die Schleife ihre Ausführung beendet hat, werden sie zerstört.
  • Bedingung - Ausdruck, der vor der Ausführung jeder Iteration überprüft wird. Wenn nicht angegeben, wird dieser Ausdruck als wahr ausgewertet. Wenn es als wahr ausgewertet wird, wird die Anweisung der Schleife ausgeführt. Wenn es als falsch ausgewertet wird, stoppt die Schleife.
  • final-expression - Ausdruck, der nach jeder Iteration ausgeführt wird. Wird normalerweise verwendet, um einen Zähler zu erhöhen. Es kann aber auch zum Dekrementieren eines Zählers verwendet werden.
  • Anweisung - Code, der in der Schleife wiederholt werden soll

Jeder dieser drei Ausdrücke oder die Anweisung kann weggelassen werden. For-Schleifen werden üblicherweise verwendet, um eine bestimmte Anzahl von Iterationen zu zählen, um eine Anweisung zu wiederholen. Verwenden Sie eine breakAnweisung, um die Schleife zu verlassen, bevor der Bedingungsausdruck als false ausgewertet wird.

Häufige Fehler

Überschreiten der Grenzen eines Arrays

Wenn Sie ein Array mehrmals indizieren, ist es leicht, die Grenzen des Arrays zu überschreiten (versuchen Sie beispielsweise, auf das 4. Element eines Arrays mit 3 Elementen zu verweisen).

 // This will cause an error. // The bounds of the array will be exceeded. var arr = [ 1, 2, 3 ]; for (var i = 0; i <= arr.length; i++) { console.log(arr[i]); } output: 1 2 3 undefined

Es gibt zwei Möglichkeiten, diesen Code zu reparieren. Stellen Sie die Bedingung entweder i < arr.lengthoder eini <= arr.length - 1

Beispiele

Iterieren Sie durch ganze Zahlen von 0-8

for (var i = 0; i < 9; i++) { console.log(i); } output: 0 1 2 3 4 5 6 7 8

Brechen Sie aus einer Schleife aus, bevor der Bedingungsausdruck falsch ist

for (var elephant = 1; elephant < 10; elephant+=2) { if (elephant === 7) { break; } console.info('elephant is ' + elephant); } output: elephant is 1 elephant is 3 elephant is 5

für ... in Schleife

Die for...inAnweisung durchläuft die aufzählbaren Eigenschaften eines Objekts in beliebiger Reihenfolge. Für jede einzelne Eigenschaft können Anweisungen ausgeführt werden.

for (variable in object) { ... }

Required / OptionalParameterDescriptionRequiredVariable Bei jeder Iteration wird der Variablen ein anderer Eigenschaftsname zugewiesen. OptionalObjectObject, dessen aufzählbare Eigenschaften iteriert werden.

Beispiele

// Initialize object. a = { "a": "Athens", "b": "Belgrade", "c": "Cairo" } // Iterate over the properties. var s = "" for (var key in a) { s += key + ": " + a[key]; s += "

"; } document.write (s); // Output: // a: Athens // b: Belgrade // c: Cairo // Initialize the array. var arr = new Array("zero", "one", "two"); // Add a few expando properties to the array. arr["orange"] = "fruit"; arr["carrot"] = "vegetable"; // Iterate over the properties and elements. var s = ""; for (var key in arr) { s += key + ": " + arr[key]; s += "

"; } document.write (s); // Output: // 0: zero // 1: one // 2: two // orange: fruit // carrot: vegetable // Efficient way of getting an object's keys using an expression within the for-in loop's conditions var myObj = {a: 1, b: 2, c:3}, myKeys = [], i=0; for (myKeys[i++] in myObj); document.write(myKeys); //Output: // a // b // c

für ... der Schleife

Die for...ofAnweisung erstellt eine Schleife, die über iterierbare Objekte (einschließlich Array-, Map-, Set-, Arguments-Objekt usw.) iteriert und einen benutzerdefinierten Iterations-Hook mit Anweisungen aufruft, die für den Wert jeder einzelnen Eigenschaft ausgeführt werden sollen.

 for (variable of object) { statement }

Beschreibungvariable Bei jeder Iteration wird variable.objectObject ein Wert einer anderen Eigenschaft zugewiesen, dessen aufzählbare Eigenschaften iteriert werden.

Beispiele

Array

 let arr = [ "fred", "tom", "bob" ]; for (let i of arr) { console.log(i); } // Output: // fred // tom // bob

Karte

 var m = new Map(); m.set(1, "black"); m.set(2, "red"); for (var n of m) { console.log(n); } // Output: // 1,black // 2,red

einstellen

 var s = new Set(); s.add(1); s.add("red"); for (var n of s) { console.log(n); } // Output: // 1 // red

Argumente Objekt

 // your browser must support for..of loop // and let-scoped variables in for loops function displayArgumentsObject() { for (let n of arguments) { console.log(n); } } displayArgumentsObject(1, 'red'); // Output: // 1 // red

while-Schleife

Die while-Schleife beginnt mit der Auswertung der Bedingung. Wenn die Bedingung erfüllt ist, werden die Anweisungen ausgeführt. Wenn die Bedingung falsch ist, werden die Anweisungen nicht ausgeführt. Danach endet die while-Schleife.

Here is the syntax for while loop:

Syntax:

while (condition) { statement(s); }

statement(s): A statement that is executed as long as the condition evaluates to true.

condition: Here, condition is a Boolean expression which is evaluated before each pass through the loop. If this condition evaluates to true, statement(s) is/are executed. When condition evaluates to false, execution continues with the statement after the while loop.

Example:

 var i = 1; while (i < 10) { console.log(i); i++; // i=i+1 same thing } Output: 1 2 3 4 5 6 7 8 9

How to Iterate with JavaScript While Loops

While loops will run as long as the condition inside the ( ) is true. Example:

while(condition){ code... }

Hint 1:

Use a iterator variable such as i in your condition

var i = 0; while(i <= 4){ }

Spoiler Alert Solution Ahead!

Solution:

// Setup var myArray = []; // Only change code below this line. var i = 0; while (i <= 4){ myArray.push(i); i++; }

Do...while loop

The do...while loop is closely related to while loop. In the do while loop, the condition is checked at the end of the loop.

Here is the syntax for do...while loop:

Syntax:

 do { *Statement(s);* } while (*condition*);

statement(s): A statement that is executed at least once before the condition or Boolean expression is evaluated and is re-executed each time the condition evaluates to true.

condition: Here, a condition is a Boolean expression. If Boolean expression evaluates to true, the statement is executed again. When Boolean expression evaluates to false, the loops ends.

Example:

var i = 0; do { i = i + 1; console.log(i); } while (i < 5); Output: 1 2 3 4 5

How to Iterate with JavaScript Do…While Loops

  • Do...While loops makes sure that the code is executed at least once, and after the execution, if the condition inside the while() is true, it continues with the loop, otherwise it stop.

Solution:

var myArray = []; var i = 10; do { myArray.push(i); i++; } while(i <= 10);