C'est un lundi maussade et vous êtes au travail. Nous savons tous à quel point les lundis peuvent être déprimants, n'est-ce pas ? Votre patron s'approche de vous et vous dit : « Hé, j'ai 300 e-mails non ouverts que nous avons reçus au cours du week-end. Je veux que vous les ouvriez chacun, que vous notiez le nom de l'expéditeur et que vous supprimiez les e-mails une fois que vous avez terminé. Cette tâche semble très fatigante si vous essayez de la faire manuellement. La prochaine chose qui vous vient à l’esprit est probablement d’aller sur Google et de rechercher un logiciel capable d’automatiser ce processus et de vous faciliter la vie, n’est-ce pas ? Eh bien, nous avons des situations similaires en programmation. Il y a des moments où vous devez effectuer des tâches répétées jusqu'à ce qu'elles soient terminées. Comment résolvez-vous ce problème ? En JavaScript, nous avons ce que nous appelons des boucles. Les boucles nous permettent de résoudre des tâches répétées en réduisant la quantité de code nécessaire pour terminer la tâche. Dans cet article, nous verrons ce qu'est une boucle, comment elle fonctionne et les différentes méthodes que nous pouvons utiliser pour l'appliquer dans nos programmes. Qu’est-ce qu’une boucle ? Les boucles sont utilisées en JavaScript pour effectuer facilement des actions répétées. Ils sont basés sur une condition qui renvoie vrai ou faux. Une condition est une expression qui doit être transmise pour maintenir une boucle en cours d’exécution. Une boucle s'exécute lorsque les conditions spécifiées renvoient une valeur vraie et s'arrête lorsqu'elles renvoient une valeur fausse. Quand devez-vous utiliser une boucle ? Les boucles sont utiles pour effectuer des tâches répétitives. Par exemple, l’utilisation d’une boucle raccourcit le code nécessaire à la résolution d’un problème. Cela permet de gagner du temps, d'optimiser l'utilisation de la mémoire et d'améliorer la flexibilité. La véritable signification d’une boucle va au-delà de la réduction de la longueur du code et de la limitation de la répétition. Ils sont également utiles lorsque vous travaillez avec des données dans un tableau, un objet ou d'autres structures. De plus, les boucles favorisent la modularité du code en réduisant le code répétitif et en augmentant la réutilisabilité du code, ce qui permet de créer des codes pouvant être utilisés dans différentes parties de votre projet. Types de boucles Il existe deux grandes catégories de boucles : les boucles contrôlées à l’entrée et les boucles contrôlées à la sortie. Les boucles évaluent la condition à « l'entrée de la boucle » avant d'exécuter le corps de la boucle. Si la condition est vraie, le corps court. Sinon, le corps ne fonctionne pas. Les boucles et sont des exemples de boucles contrôlées par l'entrée. contrôlées par l'entrée for while Les boucles se concentrent sur le corps de la boucle plutôt que sur la condition de test, garantissant que le corps de la boucle est exécuté au moins une fois avant d'évaluer la condition de test. Un bon exemple de boucle contrôlée par la sortie est la boucle . contrôlées par la sortie do-while Examinons quelques exemples de boucles contrôlées par l'entrée : Boucle while Une boucle a la syntaxe suivante. while while (condition) { // loop's body } La liste suivante explique la fonctionnalité d'une boucle while : La boucle prend une condition de test entre parenthèses. while Le programme vérifie la condition pour voir si elle réussit ou échoue. Le code dans le corps de la boucle s'exécute tant que la condition est passée. Le programme termine son fonctionnement une fois que la condition de test échoue. Ci-dessous, prenons un exemple pratique de la boucle : while let arr = []; let i = 1; let number = 5; while (i <= number) { arr.push(i) i++ } console.log(arr) L'extrait de code ci-dessus initialise les variables "arr", "i" et "num". La variable " est un tableau qui contient les valeurs qui satisfont à la condition de test. arr " La variable "i" garde une trace de chaque incrément après chaque itération. La variable "nombre" compare la valeur de "i" à sa valeur (5) après chaque itération. Le code dans le corps de la boucle pousse chaque valeur de « i » après chaque itération dans le tableau tant que « i » est inférieur ou égal à « nombre ». Une fois que la valeur actuelle de « i » ne remplit pas la condition, dans ce cas, où la valeur de est supérieure au qui est 6, la boucle cesse de fonctionner. « i » « nombre » La méthode est une fonction JavaScript intégrée qui ajoute un nouvel élément à la fin d'un tableau. push() Sortir [1, 2, 3, 4, 5] faire pendant que la boucle Une boucle ressemble beaucoup à la boucle while ; la principale différence entre la boucle et la boucle est que la boucle assure l'exécution du code au moins une fois avant d'évaluer l'état de la boucle ; la boucle a la syntaxe suivante ci-dessous. do-while while do-while do-while do-while do { // loop's body } while (//condition) Le est un excellent exemple de boucle contrôlée par la sortie. Cela réside dans le fait que les boucles contrôlées par la sortie donnent au corps de la boucle avant la condition de test. Examinons maintenant un exemple de code pratique utilisant la boucle . do-while la priorité do-while Exemple: let i = 1; let num = 5; do { console.log(i); i++; } while (i <= num); Maintenant, décomposons cet extrait de code : Nous avons initialisé les variables "i" et "num". La console enregistre la valeur de "i" (1) avant d'évaluer l'état de la boucle. La condition est vérifiée et la valeur de "i" s'incrémente de +1 après chaque itération. La boucle termine son opération une fois que « i » est supérieur à « num ». Sortir 1 2 3 4 5 Bien que la boucle soit très similaire à la boucle , il existe des différences subtiles que nous devons noter ; Prenons un autre exemple qui compare la différence entre les boucles et . do-while while while do-while let i = 5; let num = 4 while( i < num) { console.log(i) } Cette boucle ci-dessus ne renverra aucun résultat à la console ; maintenant, pourquoi est-ce ainsi ? while Nous avons initialisé les variables "i" et "num" avec des valeurs de 5 et 4, respectivement. La condition vérifie si la valeur de « i » est inférieure à « num ». Si c'est vrai, il enregistre chaque valeur respective. Puisque la valeur initiale de "i" dépasse celle de "num", la boucle ne s'exécute jamais. Prenons maintenant un exemple similaire avec la boucle . do-while let i = 5; let num = 4; do { console.log(i) } while ( i < num) Sortir 5 La boucle assure l'exécution du bloc de code, qui renvoie 5 dans la console, bien que "i" ait initialement une valeur supérieure à "num", il est toujours enregistré une fois dans la console. Cette représentation vous montre la différence de fonctionnalité entre les boucles et . do-while do-while while Pour la boucle La est un type de boucle unique et l'une des boucles les plus couramment utilisées par les programmeurs. La est une boucle qui exécute un bloc de code un nombre de fois spécifique en fonction d'une condition. La boucle for a la syntaxe suivante ci-dessous. for loop for loop for (Expression1...; Expression2....; Expression3...{ //code block } Expression 1 : cette partie d'une est également appelée zone ; c'est le début de notre et la zone où la variable counter est définie. La variable counter est utilisée pour suivre le nombre de fois où la boucle s'exécute et la stocker sous forme de valeur. for loop d'initialisation for loop Expression 2 : C'est la deuxième partie de la boucle ; cette partie définit l'instruction qui exécuterait la boucle. conditionnelle Expression 3 : C'est ici que se termine la boucle ; la variable compteur dans cette section met à jour sa valeur après chaque itération en augmentant ou en diminuant la valeur comme spécifié dans la condition. Passons à un exemple utilisant la boucle for. for (let i = 0; i < 100; i++) { console.log("Hello World" ) } À partir de l’extrait de code ci-dessus, décomposons-le ensemble. Tout d’abord, nous avons initialisé la variable compteur « avec une valeur de zéro. i » Ensuite, nous avons créé l'instruction conditionnelle qui permettrait au code de continuer à fonctionner. Nous avons comparé la valeur de « i » à 100 ; s'il réussit ce test, "Hello World" est enregistré. Ce processus se répète tandis que le compteur augmente de +1 après chaque itération. La boucle se termine lorsque la valeur du compteur atteint 100. Sortir Hello World Hello World Hello World ... //repeated 97 more times making it 100 "Hello World" in total ... pour chaque boucle La boucle est une méthode en JavaScript qui parcourt un tableau et applique une fonction de rappel sur chaque élément de ce tableau ; une fonction de rappel est simplement une autre fonction passée en paramètre dans une fonction. La fonction de rappel fonctionne en s'exécutant séquentiellement une fois l'exécution de la fonction principale terminée. for-each Examinons la syntaxe de base d'une boucle . for-each array.forEach(function(currentValue, index, arr)) Le code fourni ci-dessus explique le fonctionnement d'une boucle . for-each Cette boucle accepte trois paramètres, qui sont la valeur actuelle, un index et un tableau. La valeur actuelle représente la valeur actuelle de l'élément dans le tableau. L'index est un paramètre facultatif qui vous indique la position numérotée de l'élément actuel dans ce tableau. L'arr est un autre paramètre facultatif qui vous indique à quel tableau appartient l'élément. let myArray = [1, 2, 3, 4, 5]; array.forEach((num, index, arr) => { arr[index] = num * 2; console.log(array); }); Décomposons l'exemple ci-dessus : Nous avons initialisé un tableau avec le nom de variable "myArray" et l'avons stocké avec des entiers allant de 1 à 5. La méthode array prend trois paramètres et applique une fonction de rappel sur le tableau. for-each Cette ligne; multiplie la valeur de l'élément actuel par 2 et attribue la valeur renvoyée à l'index de l'élément actuel. arr[index] = num * 2 Attention : la méthode array ne renvoie pas de nouveau tableau ; au lieu de cela, il modifie le tableau d'origine et le renvoie. for-each Sortir [2, 4, 6, 8, 10] À quoi servent... In et For... des boucles en JavaScript ? Les boucles et boucles sont très utiles lorsqu'il s'agit d'itérer sur des objets itérables ; Les objets itérables font référence à tout élément susceptible d'être bouclé, des exemples courants d'objets itérables sont les tableaux, les chaînes, les ensembles, etc. for... in for... of Les et sont similaires dans la façon dont ils itèrent/se déplacent à travers les objets, la principale différence entre eux est indiquée dans la façon dont ils renvoient des valeurs. for... in for... of pour... dans les boucles Une boucle est utile lorsque vous devez extraire la ou les clés/propriétés d'un objet et ses propriétés correspondantes de l'objet parent. La boucle peut parfois parcourir un objet d'une manière différente de la façon dont elle a été définie dans cet objet particulier ; Prenons un exemple de boucle en action. for... in for... in for... in let namesArray = []; const studentScores = { John: 60, Dan: 53, Tricia: 73, Jamal: 45, Jane: 52 } for(const name in studentScores){ namesArray.push(name); } console.log(namesArray); Dans l'exemple ci-dessus, nous avons défini un objet nommé qui contient plusieurs noms d'étudiants et leurs scores correspondants. En utilisant , nous avons pu récupérer uniquement les noms des étudiants, qui représentent les de l'objet et les stocker dans un tableau en utilisant la méthode . studentScores for... in clés studentScores, push() Sortir ["John", "Dan", "Tricia", "Jamal", "Jane"] pour... de boucles La boucle est un type spécial de boucle qui parcourt les valeurs d'objets itérables tels que des tableaux, des chaînes, des cartes, etc., les boucles ne se soucient pas des clés ou des propriétés d'un objet. , ils affichent plutôt des priorités sur les valeurs uniquement. for... of for... of La boucle est incapable de parcourir les objets normaux et générera une erreur car ils ne sont pas itérables. Prenons un exemple utilisant la boucle . for... of for.. of let numArray = [1,2,3,4,5] for (const value of numArray) { console.log(value) } // Output = 1,2,3,4,5 En résumé, les boucles et sont un excellent moyen de parcourir des objets itérables ; la principale différence est qu'une boucle renvoie la clé d'un objet tandis que la renvoie uniquement les valeurs des objets itérables. for... in for... of for... in for... of Qu’est-ce qu’une boucle infinie et comment pouvons-nous l’éviter ? Une boucle infinie fait référence à une boucle qui continue de s'exécuter indéfiniment ; cela se produit lorsqu'une boucle n'a pas de condition de sortie définie. Les boucles infinies sont dangereuses car elles peuvent faire planter votre navigateur et entraîner des actions indésirables dans votre programme. // infinite loop sample while (true) { console.log("keep on running") } Pour éviter les boucles infinies dans votre programme, assurez-vous toujours qu'il existe une condition de sortie définie dans votre boucle. Conclusion Merci beaucoup d'être arrivé à la fin de cet article, les boucles en Javascript sont un concept important que tout développeur doit maîtriser car il est très utile pour créer un bon programme optimisable. Je pense qu'avec cet article, vous serez en mesure de comprendre les bases et les subtilités de l'utilisation des boucles dans votre programme.
