Article rédigé par Erwann LE GALL
le 17 novembre 2021
Partager cet article sur les réseaux sociaux !
Auteur / Autrice
Erwann LE GALL
Formateur
[hors ligne]
Différents usages
On utilise des boucles dans beaucoup de cas différents et chaque type de boucle n’est pas forcément adapté à tous les usages. Elles peuvent servir à effectuer plusieurs fois la même action (for), à parcourir des tableaux (foreach), des objets (for…in)…On les utilise par exemple pour afficher les résultats de requêtes SQL, générer du code HTML etc..
Pour vous montrer j’ai crée un array contenant des nombres, deux variables que j’ai nommées index et value, et une boucle de chaque type.
Pour chaque boucle, je demande:
stocker dans ma variable index le numéro ou le nom de l’index en cours (un index peut aussi être une chaine).
stocker dans ma variable value la valeur contenu dans la « ligne » en cours de l’array.
m’afficher ces variables avec un console.log().
Selon la boucle que l’on utilise, on ne récupère pas ces valeurs de la même façon. Les boucles suivantes nous renvoient tout le même résultat, mais les instructions pour récupérer l’index et la valeur en cours diffèrent. Observez bien l’extrait qui suit
En observant ces boucles, voire en les essayant, vous avez certainement déjà quelques éléments vous permettant de choisir la plus adaptée à votre besoin.
On voit par exemple que la boucle « while » n’est pas la plus simple à mettre en place si le but est de récupérer les index/valeurs d’un tableau ou afficher une table de multiplication !
La boucle « for »
La boucle FOR fonctionne comme un compteur. La condition de fin de boucle attend une valeur numérique, elle n’a pas besoin de cible lors de son instance.
Pourtant on utilise souvent array.length comme condition de fin de boucle lorsqu’on l’utilise sur un array !
Oui, mais array.length renvoie un nombre, vous ne ciblez pas le tableau ! Vous dites juste à votre boucle: « Tu vois ce tableau la-bas ? tu vas itérer autant de fois que ce tableau possède de cases ». Vous pouvez très bien utiliser la longueur d’un premier tableau, et effectuer un traitement sur un second.
Dans tout les cas, la condition de fin de boucle doit être une valeur numérique, car comme je vous l’ai dit plus haut, cette boucle est en fait un compteur. On part d’une valeur numérique i, et on s’arrête lorsque i atteint la valeur que l’on a défini.
La dernière partie du corps de la boucle indique l’opération que la boucle va effectuer après le traitement des instructions
C’est elle qui définit la valeur d’incrémentation ou de décrémentation de notre boucle-compteur. En général on incrémente i de un en un (i++), mais on peut tout à fait le décrémenter, ou augmenter la valeur d’incrément
Ici la valeur de i augmentera de 2 en 2 jusqu’à atteindre 10
Et comme la valeur de i est forcément numérique, que ce passe-t’il si on itère sur un array dont certains indexes ne sont pas des nombres ?
Lorsque i = 2, la console renvoie « undefined », car ce tableau n’a pas d’indice n°2. Car à la place nous avons mis une chaine.
La boucle « foreach »
On appelle la fonction foreach sur un array ( .foreach() est une méthode des objets Array).
On définit une variable, ou un alias, qui pointera sur la cible du tour en cours. C’est à cet alias que l’on fera référence dans les instructions pour pointer vers la valeur stockée.
Pour récupérer la clé correspondant au tour en cours, on devra appeler la méthode .indexOf (la valeur dont on veut récupérer la clé)La console affiche la valeur, suivit de son index grace à array.indexOf(valeur)
La boucle « for…in… »
On parcourt tout les index du tableau ou de l’objet. Ici peu importe que l’index (clé) soit un nombre, une chaine de caractère, ou même un objet
On définit une variable, ou un alias, (ici « index ») qui représente l’index en cours à chaque tour, et on récupère la valeur avec la syntaxe array[index], ou obj[attr]
Boucle for in sur un tableau.On parcourt ses index, peu importe leur typeBoucle for in sur un objet. (pour chaque ATTR dans l’objet USER).On récupère les attributs de notre objet ainsi que leur valeur, quel que soit leur type. Ici on a même récupéré la fonction « sayHello » de notre user
Résumé
La boucle for
On part d’une valeur de départ
On définit une condition de fin de boucle
On définit l’opération d’incrémentation ou de décrémentation à exécuter à chaque tour de boucle
Syntaxe:
for(let i= number; i operator number; i operation) { instruction}
pour(initiation variable; condition fin de boucle; opération sur la variable) { instruction }
Fonctionnement :
Incrémentation ou décrémentation d’un nombre i jusqu’à une certaine valeur, définie ou déduite, et parcours des entrées en utilisant i comme index si itération sur un array.
Avantages :
Répéter des instructions un nombre prévisible ou défini de fois.
Récupérer facilement le numéro du tour en cours (en récupérant la variable i), par exemple pour s’en servir comme index d’un array.
Manier et effectuer des opérations avec des valeurs numériques (tables de multiplications par exemple).
Inconvénients :
Si on veux itérer sur un array, ses clefs doivent êtres uniquement de types « number ».
Peut causer des erreurs si on demande un index qui n’existe pas en itérant sur un array.
La boucle for…in
On déclare un alias qui serviras a pointer l’index lors des tours
On indique sur quel objet/array on effectue les itérations
Syntaxe :
for(let index in objet/array) {…}
pour(chaque index dans l’objet/array)
Fonctionnement :
Parcourt un array ou un objet par ses index, ou attributs dans le cas d’objet
Avantages :
On itère directement sur les index, ainsi peu importe le type de ce dernier, et on n’auras pas d’index « undefined ».
On n’a pas besoin de connaître le nombre de tours à effectuer.
Peu importe le type de clefs.
Peut s’utiliser sur des Objets pour lister leurs propriétés
La boucle foreach
On appelle la méthode via la syntaxe monArray.foreach()
On définit un alias qui servira ici à pointer l’entrée en cours.
Syntaxe :
Array.foreach(element => {…} );
monArray. »pour chaque« (valeur stockée, faire => { instructions};
Fonctionnement :
Parcourt les valeurs stockées dans un array.
Avantages :
On accède aux valeurs stockées sans détour car on itère directement sur celles-ci. Impossible de tomber sur une valeur « undefined ».
On n’a pas besoin de connaître le nombre de tours à effectuer.
Peu importe le type de clefs
Inconvénients :
Il faut créer une variable compteur si on a besoin de connaitre le nombre d’itérations.
Un peu plus complexe pour récupérer l’index (en js: monArray.indexOf(value))
Ne s’utilise que sur les tableaux. (Array.foreach() est une fonction du prototype Array).
Se former aux métiers du numérique est un projet intensif qui demande une implication et une motivation totale. Néanmoins, il est important de faire de temps en temps un break et de se changer les idées. Quoi de mieux qu'une série TV ou un bon film pour se détendre ? Vous trouverez dans cet article...
Cit. Bing Qu’est-ce qu’un sitemap ? En français, on pourrait simplement traduire sitemap, par plan de site. En fait, un Sitemap est la liste des pages de notre site web que l’on souhaite voir indexer par les moteurs de recherche. Il peut également contenir les informations détaillées des pages, leurs relations et leur contenus (image,...
La méthode kanban c’est quoi ? La méthode Kanban est une vieille méthode qui date des années 1950, elle a été introduite pour la première fois au Japon chez Toyota. Cette méthode est basée sur le juste temps et sur des processus évolutif. Elle avait pour but d’améliorer la production des ouvriers. On peut voir...