JavaScript Loops Explained: For Loop, While Loop, Do ... while Loop, et plus

Les boucles sont utilisées dans JavaScript pour effectuer des tâches répétées en fonction d'une condition. Les conditions reviennent généralement trueou falselorsqu'elles sont analysées. Une boucle continuera à s'exécuter jusqu'au retour de la condition définie false.

Les trois types de boucles les plus courants sont

  • pour
  • tandis que
  • faire pendant

Vous pouvez taper js for, js whileou js do whilepour obtenir plus d' informations sur l' un de ces. Examinons-les, ainsi que certaines variantes, plus en détail maintenant.

pour boucle

Syntaxe

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

L' forinstruction javascript se compose de trois expressions et d'une instruction:

La description

  • initialisation - Exécuter avant la première exécution sur la boucle. Cette expression est couramment utilisée pour créer des compteurs. Les variables créées ici sont étendues à la boucle. Une fois la boucle terminée, son exécution est détruite.
  • condition - Expression qui est vérifiée avant l'exécution de chaque itération. Si omis, cette expression prend la valeur true. S'il est évalué à vrai, l'instruction de la boucle est exécutée. S'il a la valeur false, la boucle s'arrête.
  • expression finale - Expression exécutée après chaque itération. Habituellement utilisé pour incrémenter un compteur. Mais il peut également être utilisé pour décrémenter un compteur.
  • instruction - Code à répéter dans la boucle

n'importe laquelle de ces trois expressions ou l'instruction peut être omise. Les boucles For sont couramment utilisées pour compter un certain nombre d'itérations pour répéter une instruction. Utilisez une breakinstruction pour quitter la boucle avant que l'expression de condition ne soit évaluée à false.

Pièges courants

Dépasser les limites d'un tableau

Lors de l'indexation sur un tableau plusieurs fois, il est facile de dépasser les limites du tableau (par exemple, essayez de référencer le 4ème élément d'un tableau à 3 éléments).

 // 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

Il existe deux façons de corriger ce code. Définissez la condition sur i < arr.lengthoui <= arr.length - 1

Exemples

Itérer sur des entiers de 0 à 8

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

Sortir d'une boucle avant que l'expression de la condition ne soit fausse

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

pour ... en boucle

L' for...ininstruction itère sur les propriétés énumérables d'un objet, dans un ordre arbitraire. Pour chaque propriété distincte, des instructions peuvent être exécutées.

for (variable in object) { ... }

Obligatoire / FacultatifParamètreDescriptionRequiredVariableUn nom de propriété différent est attribué à la variable à chaque itération.OptionalObjectObject dont les propriétés énumérables sont itérées.

Exemples

// 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

pour ... de boucle

L' for...ofinstruction crée une boucle itérant sur des objets itérables (y compris Array, Map, Set, Arguments, etc.), invoquant un hook d'itération personnalisé avec des instructions à exécuter pour la valeur de chaque propriété distincte.

 for (variable of object) { statement }

Descriptionvariable À chaque itération, une valeur d'une propriété différente est affectée à variable.objectObject dont les propriétés énumérables sont itérées.

Exemples

Tableau

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

Carte

 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

Ensemble

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

Objet Arguments

 // 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

boucle while

La boucle while commence par évaluer la condition. Si la condition est vraie, la ou les instructions sont / sont exécutées. Si la condition est fausse, la ou les instructions ne sont pas exécutées. Après cela, la boucle while se termine.

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);