Comment utiliser les boucles en JavaScript
La boucle vous permet de parcourir chaque élément d'un tableau afin que vous puissiez personnaliser et afficher chacun d'eux comme vous le souhaitez. Comme pour tout langage de programmation, les boucles sont également un outil crucial pour le rendu de tableaux en JavaScript.
À l'aide de quelques exemples pratiques, approfondissons les différentes manières d'utiliser les boucles en JavaScript.
La boucle incrémentielle et décrémentale pour en JavaScript
La boucle for incrémentielle est la base de l'itération en JavaScript.
Il suppose une valeur initiale affectée à une variable et exécute une simple vérification de longueur conditionnelle. Ensuite, il incrémente ou décrémente cette valeur à l'aide des opérateurs ++ ou — .
Voici à quoi ressemble sa syntaxe générale :
for(var i = initial value; i < array.length; i++) {
array[i]}
Parcourons maintenant un tableau en utilisant la syntaxe de base ci-dessus :
anArray = [1, 3, 5, 6];
for(let i = 0; i < anArray.length; i++) {
console.log(anArray[i])
}
Output:
1
3
5
6Nous allons maintenant opérer sur chaque élément du tableau ci-dessus en utilisant la boucle JavaScript for :
anArray = [1, 3, 5, 6];
for(let i = 0; i < anArray.length; i++) {
console.log("5", "x", anArray[i], "=", anArray[i] * 5)
}
Output:
5 x 1 = 5
5 x 3 = 15
5 x 5 = 25
5 x 6 = 30
La boucle parcourt le tableau de manière incrémentielle avec l'opérateur ++ , produisant une sortie ordonnée.
Mais en utilisant l'opérateur négatif ( — ), vous pouvez inverser la sortie.
Les syntaxes sont les mêmes, mais la logique est un peu différente de la boucle d'incrémentation ci-dessus.
Voici comment fonctionne la méthode décrémentale :
anArray = [1, 3, 5, 6];
for(let i = anArray.length-1; i > = 0; i--) {
console.log("5", "x", anArray[i], "=", anArray[i]*5)
}
Output:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5La logique derrière le code ci-dessus n'est pas farfelue. L'indexation des tableaux commence à partir de zéro. Donc, appeler anArray[i] itère normalement de l'index zéro à trois car le tableau ci-dessus contient quatre éléments.
Ainsi, supprimer un de la longueur du tableau et définir la condition sur zéro supérieur ou égal, comme nous l'avons fait, est assez pratique, en particulier lorsque vous utilisez le tableau comme base de votre itération.
Il maintient l'index du tableau à un de moins que sa longueur. La condition i >= 0 force alors le comptage à s'arrêter sur le dernier élément du tableau.
JavaScript pourChaque
Bien que vous ne puissiez pas décrémenter en utilisant forEach de JavaScript, il est souvent moins détaillé que la boucle for brute. Il fonctionne en choisissant un élément après l'autre sans mémoriser le précédent.
Voici la syntaxe générale de JavaScript forEach :
array.forEach(element => {
action
})Découvrez comment cela fonctionne en pratique :
let anArray = [1, 3, 5, 6];
anArray.forEach(x => {
console.log(x)
});
Output:
1
3
5
6
Utilisez maintenant ceci pour exécuter une opération mathématique simple sur chaque élément comme vous l'avez fait dans la section précédente :
let anArray = [1, 3, 5, 6];
anArray.forEach(x => {
console.log("5", "x", x, "=", x * 5)
});
Output:
5 x 1 = 5
5 x 3 = 15
5 x 5 = 25
5 x 6 = 30
Comment utiliser la boucle for…in de JavaScript
La boucle for…in en JavaScript parcourt un tableau et renvoie son index.
Vous le trouverez facile à utiliser pour…in si vous connaissez la boucle for de Python car elles sont similaires en termes de simplicité et de logique.
Jetez un œil à sa syntaxe générale :
for (let element in array){
action
}Ainsi, la boucle for…in affecte chaque élément d'un tableau à la variable (élément) déclarée entre parenthèses.
Ainsi, la journalisation de l'élément directement dans la boucle renvoie un index de tableau et non les éléments eux-mêmes :
let anArray = [1, 3, 5, 6];
for (let i in anArray){
console.log(i)
}
Output:
0
1
2
3
Pour sortir chaque élément à la place :
let anArray = [1, 3, 5, 6];
for (let i in anArray){
console.log(anArray[i])
}
Output:
1
3
5
6
Comme vous l'avez fait lors de l'utilisation de la boucle décrémentale, il est également facile d'inverser la sortie en utilisant for…in :
let anArray = [1, 3, 5, 6];
// Remove one from the length of the array and assign this to a variable:
let v = anArray.length - 1;
// Use the above variable as an index basis while iterating down the array:
for (let i in anArray){
console.log(anArray[v])
v -=1;
}
Output:
6
5
3
1
Le code ci-dessus est logiquement similaire à ce que vous avez fait en utilisant la boucle décrémentale. C'est plus lisible et explicitement décrit, cependant.
JavaScript pour…de la boucle
La boucle for…of est similaire à la boucle for…in .
Cependant, contrairement à for…in , il ne parcourt pas l'index du tableau mais les éléments eux-mêmes.
Sa syntaxe générale ressemble à ceci :
for (let i of array) {
action
}
Utilisons cette méthode de bouclage pour parcourir un tableau de manière incrémentielle pour voir comment cela fonctionne :
let anArray = [1, 3, 5, 6];
for (let i of anArray) {
console.log(i)
}
Output:
1
3
5
6
Vous pouvez également utiliser cette méthode pour parcourir le tableau et inverser la sortie. C'est similaire à la façon dont vous le faites en utilisant for…in :
let anArray = [1, 3, 5, 6];
let v = anArray.length - 1;
for (let x of anArray) {
console.log(anArray[v])
v -=1;
}
Output:
6
5
3
1
Pour opérer dans la boucle :
let anArray = [1, 3, 5, 6];
let v = anArray.length - 1;
for (let x of anArray) {
console.log("5", "x", anArray[v], "=", anArray[v] * 5)
v -=1;
}
Output:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5
La boucle while
La boucle while fonctionne en continu tant qu'une condition spécifiée reste vrai. Il est souvent utilisé comme une boucle infinie.
Par exemple, puisque zéro est toujours inférieur à dix, le code ci-dessous s'exécute en continu :
let i = 0;
while (i < 10) {
console.log(4)
}Le code ci-dessus enregistre "4" à l'infini.
Le itérer Let par un tableau en utilisant la boucle while:
let i = 0;
while (i < anArray.length) {
console.log(anArray[i])
i +=1
}
Output:
1
3
5
6
Boucle JavaScript do… while
La boucle do… while accepte et exécute explicitement un ensemble d'actions à l'intérieur d'une syntaxe do . Il indique alors la condition de cette action à l' intérieur de la boucle while.
Voici à quoi cela ressemble :
do{
actions
}
while (
consition
)Parcourons maintenant un tableau en utilisant cette méthode de bouclage :
do{
console.log(anArray[i])
i +=1
}
while (
i < anArray.length
)
Output:
1
3
5
6
Familiarisez-vous avec les boucles JavaScript
Bien que nous ayons mis en évidence les différentes méthodes de bouclage JavaScript ici, la maîtrise des bases de l'itération en programmation vous permet de les utiliser de manière flexible et en toute confiance dans vos programmes. Cela dit, la plupart de ces boucles JavaScript fonctionnent de la même manière, avec seulement quelques différences dans leur contour général et leurs syntaxes.
Les boucles, cependant, sont à la base de la plupart des rendus de tableaux côté client. N'hésitez donc pas à modifier ces méthodes de bouclage à votre guise. Les utiliser avec des tableaux plus complexes, par exemple, vous permet de mieux comprendre les boucles JavaScript.