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

L'incrémental pour loop 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 en utilisant le ++ ou -- les opérateurs.

Voici à quoi ressemble sa syntaxe générale:

pour (var i = valeur initiale; i < tableau.longueur; i++) {
tableau[i]}

Parcourons maintenant un tableau en utilisant la syntaxe de base ci-dessus:

unTableau = [1, 3, 5, 6] ;
pour (soit i = 0; i < anArray.length; i++) {
console.log (anArray[i])
}
Sortir:
1
3
5
6 

Nous allons maintenant opérer sur chaque élément du tableau ci-dessus en utilisant le JavaScript pour boucle:

unTableau = [1, 3, 5, 6] ;
pour (soit i = 0; i < anArray.length; i++) {
console.log("5", "x", unTableau[i], "=", unTableau[i] * 5)
}
Sortir:
5 x 1 = 5
5x3 = 15
5x5 = 25
5x6 = 30 

La boucle parcourt le tableau de manière incrémentielle avec le ++ opérateur, produisant une sortie ordonnée.

Mais en utilisant le 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:

unTableau = [1, 3, 5, 6] ;
pour (let i = anArray.length-1; je > = 0; je--) {
console.log("5", "x", unTableau[i], "=", unTableau[i]*5)
}
Sortir:
5x6 = 30
5x5 = 25
5x3 = 15
5 x 1 = 5

La logique derrière le code ci-dessus n'est pas farfelue. L'indexation des tableaux commence à partir de zéro. Alors appelle un tableau[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 je >= 0 puis force le décompte à s'arrêter sur le dernier élément du tableau.

En rapport: Méthodes de tableau JavaScript que vous devriez maîtriser aujourd'hui

JavaScript pourChaque

Bien que vous ne puissiez pas décrémenter en utilisant JavaScript pour chaque, c'est souvent moins verbeux que le brut pour boucle. 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 pour chaque:

array.forEach (élément => {
action
})

Découvrez comment cela fonctionne en pratique:

soit unTableau = [1, 3, 5, 6] ;
unTableau.pourChaque (x => {
console.log (x)
});
Sortir:
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:

soit unTableau = [1, 3, 5, 6] ;
unTableau.pourChaque (x => {
console.log("5", "x", x, "=", x * 5)
});
Sortir:
5 x 1 = 5
5x3 = 15
5x5 = 25
5x6 = 30 

Comment utiliser la boucle for...in de JavaScript

Les pour... dans boucle en JavaScript parcourt un tableau et renvoie son index.

Vous le trouverez facile à utiliser pour... dans si vous connaissez La boucle for de Python car ils sont similaires en ce qui concerne la simplicité et la logique.

Jetez un œil à sa syntaxe générale:

for (laisser l'élément dans le tableau){
action 
}

Alors le pour... dans loop 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:

soit unTableau = [1, 3, 5, 6] ;
for (let i dans anArray){
console.log (i)
}
Sortir:
0
1
2
3 

Pour sortir chaque élément à la place:

soit unTableau = [1, 3, 5, 6] ;
for (let i dans anArray){
console.log (anArray[i])
}
Sortir:
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 pour... dans:

soit unTableau = [1, 3, 5, 6] ;
// Supprimez un de la longueur du tableau et affectez-le à une variable :
let v = anArray.length - 1; 
// Utilisez la variable ci-dessus comme base d'index lors de l'itération du tableau :
for (let i dans anArray){
console.log (anArray[v])
v -=1 ;
}
Sortir:
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

Les pour... de boucle est similaire à la pour... dans boucle.

Cependant, contrairement pour... dans, 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 du tableau) {
action 
}

Utilisons cette méthode de bouclage pour parcourir un tableau de manière incrémentielle pour voir comment cela fonctionne:

soit unTableau = [1, 3, 5, 6] ;
for (let i de anArray) {
console.log (i)
}
Sortir:
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 pour... dans:

soit unTableau = [1, 3, 5, 6] ;
let v = anArray.length - 1;
for (laissez x d'anArray) {
console.log (anArray[v])
v -=1 ;
}
Sortir:
6
5
3
1

Pour opérer dans la boucle:

soit unTableau = [1, 3, 5, 6] ;
let v = anArray.length - 1;
for (laissez x d'anArray) {
console.log("5", "x", unTableau[v], "=", unTableau[v] * 5)
v -=1 ;
}
Sortir:
5x6 = 30
5x5 = 25
5x3 = 15
5 x 1 = 5 

La boucle while

Les tandis que boucle s'exécute en continu tant qu'une condition spécifiée reste vraie. 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:

soit i = 0 ;
tandis que (i < 10) {
console.log (4)
}

Le code ci-dessus enregistre "4" à l'infini.

Parcourons un tableau en utilisant le tandis que boucle:

soit i = 0 ;
while (i < anArray.length) {
console.log (anArray[i])
je +=1
}
Sortir:
1
3
5
6 

Boucle JavaScript do... while

Les faire pendant boucle accepte et exécute un ensemble d'actions explicitement à l'intérieur d'un faire syntaxe. Il énonce ensuite la condition de cette action à l'intérieur du tandis que boucle.

Voici à quoi cela ressemble:

faire{
Actions
}
tandis que (
considération
)

Parcourons maintenant un tableau en utilisant cette méthode de bouclage:

faire{
console.log (anArray[i])
je +=1
}
tandis que (
i < anArray.length
)
Sortir:
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.

Comment utiliser l'instruction JavaScript if-else

L'instruction if-else est votre première étape vers la logique de programmation dans vos applications.

Lire la suite

A propos de l'auteur