TOC

Comment construire des boucles en JavaScript

introduction

LesLoops sont utilisés en programmation pour automatiser les tâches répétitives. Les types de boucles les plus basiques utilisés dans JavaScript sont les instructionswhile etdo...while, que vous pouvez consulter sur «https://www.digitalocean.com/community/tutorials/using- while-and- do-while-loops-in-javascript [Comment construire des boucles While et Do… While en JavaScript]. »

Étant donné que les instructionswhile etdo...while sont desconditionally based, elles s'exécutent lorsqu'une instruction donnée renvoie une évaluation àtrue. Similaire en ce sens qu'elles sont également basées sur des conditions, les instructionsfor incluent également des fonctionnalités supplémentaires telles queloop counter, vous permettant de définir au préalable le nombre d'itérations de la boucle.

Dans ce didacticiel, nous en apprendrons davantage sur l'instructionfor, y compris les instructionsfor...of etfor...in, qui sont des éléments essentiels du langage de programmation JavaScript.

Pour boucle

L'instructionfor est un type de boucle qui utilisera jusqu'à trois expressions facultatives pour implémenter l'exécution répétée d'un bloc de code.

Voyons un exemple de ce que cela signifie. 

for (initialization; condition; final expression) {
    // code to be executed
}

Dans la syntaxe ci-dessus, il y a trois expressions à l'intérieur de l'instructionfor: lesinitialization, lescondition et lesfinal expression, également appelés incrémentation.

Prenons un exemple de base pour démontrer le rôle de chacune de ces déclarations.

forExample.js

// Initialize a for statement with 5 iterations
for (let i = 0; i < 4; i++) {
    // Print each iteration to the console
    console.log(i);
}

Lorsque nous exécutons le code ci-dessus, nous recevons le résultat suivant: 

Output0
1
2
3

Dans l'exemple ci-dessus, nous avons initialisé la bouclefor aveclet i = 0, qui commence la boucle à0. Nous définissons la condition suri < 4, ce qui signifie que tant quei est évalué à moins de4, la boucle continuera à fonctionner. Notre expression finale dei++ incrémente le décompte pour chaque itération dans la boucle. Leconsole.log(i) imprime les nombres, en commençant par0 et en s'arrêtant dès quei est évalué comme4.

Sans utiliser une boucle, nous aurions pu obtenir le même résultat en utilisant le code suivant.

noLoop.js

// Set initial variable to 0
let i = 0;

// Manually increment variable by 1 four times
console.log(i++);
console.log(i++);
console.log(i++);
console.log(i++);

Sans la boucle en place, le bloc de code est répétitif et comporte plus de lignes. Si nous avions besoin d'incrémenter avec plus de nombres, nous aurions dû écrire encore plus de lignes de code.

Examinons chaque expression de la boucle pour bien la comprendre.

Initialisation

Notre première expression est leinitialization. Voici à quoi ça ressemble. 

let i = 0;

Nous déclarons une variable appeléei avec le mot-clélet (le mot-clévar peut également être utilisé) et lui attribuons une valeur de0. Alors que la variable peut être nommée n'importe quoi,i est le plus fréquemment utilisé. La variablei signifieiteration, est cohérente et maintient le code compact.

État

Tout comme nous l'avons vu dans les boucleswhile etdo...while, les bouclesfor contiennent généralement uncondition. Voici notre déclaration de condition. 

i < 4;

Nous avons déjà établi que notre variable d'itération,i, représente0 pour démarrer. Maintenant, nous disons que la condition esttrue tant quei est inférieur à4 dans cet exemple.

Expression finale

Lefinal expression est une instruction qui est exécutée à la fin de chaque boucle. Il est le plus souvent utilisé pour incrémenter ou décrémenter une valeur, mais il peut être utilisé à n'importe quelle fin. 

i++

Dans notre exemple, nous incrémentons la variable de un, aveci++. Cela revient à exécuteri = i + 1.

Contrairement aux expressions d'initialisation et de condition, l'expression finale ne se termine pas par un point-virgule.

Mettre ensemble

Maintenant que nous avons passé en revue nos trois expressions contenues dans la bouclefor, nous pouvons revoir la boucle complète. 

// Initialize a for statement with 5 iterations
for (let i = 0; i < 4; i++) {
    console.log(i);
}

Tout d'abord, nous déclaronsi et le définissons sur0. Ensuite, nous définissons une condition pour que la boucle s'exécute jusqu'à ce quei soit inférieur à4. Enfin, nous incrémentonsi de un 1 à chaque itération. Notre bloc de code imprime la valeur dei sur la console, donc notre résultat est0,1,2 et3 en sortie.

Expressions facultatives

Les trois expressions de la bouclefor sont facultatives. Par exemple, nous pouvons écrire la même instructionfor sans l'expression d'initialisation en initialisant la variable en dehors de la boucle. 

// Declare variable outside the loop
let i = 0;

// Initialize the loop
for (; i < 4; i++) {
    console.log(i);
}
Output0
1
2
3

Dans ce cas, le premier; est nécessaire pour indiquer si l'instruction fait référence à l'initialisation, à la condition ou à l'expression finale, même si elle est omise.

Ci-dessous, nous pouvons également supprimer la condition de la boucle. Nous utiliserons une instructionif combinée àbreak pour dire à la boucle d'arrêter de fonctionner une fois quei est supérieur à3, ce qui est l'inverse destrue état. 

// Declare variable outside the loop
let i = 0;

// Omit initialization and condition
for (; ; i++) {
    if (i > 3) {
        break;
    }
    console.log(i);
}
Output0
1
2
3

[.note] #Warning: L'instructionbreakmust sera incluse si la condition est omise, sinon la boucle fonctionnera indéfiniment en tant queinfinite loop et risque de planter le navigateur.
#

Enfin, l'expression finale peut être supprimée en la plaçant plutôt à la fin de la boucle. Les deux points-virgules doivent toujours être inclus, sinon la boucle ne fonctionnera pas. 

// Declare variable outside the loop
let i = 0;

// Omit all statements
for (; ;) {
    if (i > 3) {
        break;
    }
    console.log(i);
    i++;
}
Output0
1
2
3

Comme nous pouvons le constater à partir des exemples ci-dessus, l'inclusion des trois instructions produit généralement le code le plus concis et le plus lisible. Toutefois, il est utile de savoir que les instructions peuvent être omises si vous les rencontrez ultérieurement.

Modifier un tableau

Nous pouvons utiliser les bouclesfor pour modifier unarray.

Dans l'exemple suivant, nous allons créer un tableau vide et le renseigner avec la variable compteur de boucles.

modifyArray.js

// Initialize empty array
let arrayExample = [];

// Initialize loop to run 3 times
for (let i = 0; i < 3; i++) {
    // Update array with variable value
    arrayExample.push(i);
    console.log(arrayExample);
}

L'exécution du code JavaScript ci-dessus donnera le résultat suivant. 

Output[ 0 ]
[ 0, 1 ]
[ 0, 1, 2 ]

Nous définissons une boucle qui s'exécute jusqu'à ce quei < 3 ne soit plustrue, et nous demandons à la console d'imprimer le tableauarrayExample sur la console à la fin de chaque itération. Avec cette méthode, nous pouvons voir comment le tableau se met à jour avec les nouvelles valeurs.

Longueur d'un tableau

Parfois, nous pouvons souhaiter qu'une boucle s'exécute un certain nombre de fois sans être certain du nombre d'itérations. Au lieu de déclarer un nombre statique, comme nous l'avons fait dans les exemples précédents, nous pouvons utiliser leslength property d'un tableau pour faire exécuter la boucle autant de fois qu'il y a d'éléments dans le tableau.

loopThroughArray.js

// Declare array with 3 items
let fish = [ "flounder", "salmon", "pike" ];

// Initalize for loop to run for the total length of an array
for (let i = 0; i < fish.length; i++) {
    // Print each item to the console
    console.log(fish[i]);
}

Nous allons recevoir la sortie suivante. 

Outputflounder
salmon
pike

Dans cet exemple, nous incrémentons chaque index du tableau avecfish[i] (par exemple la boucle s'incrémentera defish[0],fish[1], etc.). Cela entraîne la mise à jour dynamique de l'index à chaque itération.

Plus de détails sur lesfor statement is available on the Mozilla Developer Network.

Pour… en boucle

L'instructionfor...in itère sur les propriétés d'un objet. Pour démontrer, nous allons créer un simple objetshark avec quelques pairesname:value.

shark.js

const shark = {
    species: "great white",
    color: "white",
    numberOfTeeth: Infinity
}

En utilisant la bouclefor...in, nous pouvons facilement accéder à chacun des noms de propriété. 

// Print property names of object
for (attribute in shark) {
    console.log(attribute);
}
Outputspecies
color
numberOfTeeth

Nous pouvons également accéder aux valeurs de chaque propriété en utilisant le nom de la propriété comme valeur d'index de l'objet. 

// Print property values of object
for (attribute in shark) {
    console.log(shark[attribute]);
}
Outputgreat white
white
Infinity

En les assemblant, nous pouvons accéder à tous les noms et valeurs d'un objet. 

// Print names and values of object properties
for (attribute in shark) {
    console.log(`${attribute}`.toUpperCase() + `: ${shark[attribute]}`);
}
OutputSPECIES: great white
COLOR: white
NUMBEROFTEETH: Infinity

Nous avons utilisé la méthodetoUpperCase() pour modifier le nom de la propriété et l'avons suivie de la valeur de la propriété. for...in est un moyen extrêmement utile pour parcourir les propriétés des objets.

Consultezfor...in on the Mozilla Developer Network pour plus d'informations.

Pour… de boucle

L'instructionfor...in est utile pour itérer sur les propriétés d'un objet, mais pour itérer sur des objets itérables commearrays etstrings, nous pouvons utiliser l'instructionfor...of. L'instructionfor...of est une fonctionnalité plus récente à partir deECMAScript 6. ECMAScript (ou ES) est une spécification de langage de script créée pour normaliser JavaScript.

Dans cet exemple de bouclefor...of, nous allons créer un tableau et imprimer chaque élément du tableau sur la console.

sharks.js

// Initialize array of shark species
let sharks = [ "great white", "tiger", "hammerhead" ];

// Print out each type of shark
for (let shark of sharks) {
    console.log(shark);
}

Nous recevrons ce qui suit en sortie de l'instructionfor...of. 

Outputgreat white
tiger
hammerhead

Il est également possible d'imprimer l'index associé aux éléments d'index en utilisant la méthodeentries().

sharks.js

...
// Loop through both index and element
for (let [index, shark] of sharks.entries()) {
    console.log(index, shark);
}
Output0 'great white'
1 'tiger'
2 'hammerhead'

Une chaîne peut être itérée de la même manière qu'un tableau.

sharkString.js

// Assign string to a variable
let sharkString = "sharks";

// Iterate through each index in the string
for (let shark of sharkString) {
    console.log(shark);
}
Outputs
h
a
r
k
s

Dans ce cas, nous avons parcouru chaque caractère de la chaîne en les imprimant dans un ordre séquentiel.

Pour un compte rendu plus détaillé des différences entrefor...in etfor...of, lisez à propos defor...of loops on the Mozilla Developer Network.

Conclusion

Dans ce didacticiel, nous avons appris à construire des bouclesfor en JavaScript, constituées des instructionsfor,for...of etfor...in.

Les boucles font partie intégrante de la programmation en JavaScript et sont utilisées pour automatiser des tâches répétitives et rendre le code plus concis et efficace.

Related