JavaScript Essentials: comment se faire une idée des boucles

Supposons que vous souhaitiez exécuter une fonction, bounceBall, quatre fois. Comment le ferais-tu? Comme ça?

fonction bounceball () {
  // rebondir la balle ici
}
bounceBall ()
bounceBall ()
bounceBall ()
bounceBall ()

Cette approche est idéale si vous n’avez besoin de faire rebondir que quelques fois. Qu'advient-il si vous avez besoin de rebondir une centaine de fois?

La meilleure façon consiste à utiliser une boucle for.

La boucle "pour"

La boucle for exécute un bloc de code autant de fois que vous le souhaitez. Voici une boucle for qui exécute bounceBall dix fois:

pour (soit i = 0; i <10; i ++) {
  bounceBall ()
}

Il se décompose en quatre parties: l’expression initialeExpression, la condition, l’expression incremental et l’expression:

pour (initialExpression; condition; incrementExpression) {
  déclaration
}

Avant de faire une boucle, vous devez avoir une déclaration. Cette instruction est le bloc de code que vous souhaitez exécuter plusieurs fois. Vous pouvez écrire n'importe quel nombre de lignes de code ici. Vous pouvez même utiliser des fonctions.

Voici à quoi ressemble la boucle for avec bounceBall:

pour (initialExpression; condition; incrementExpression) {
  bounceBall ()
}

Ensuite, vous avez besoin d'une expression initiale pour commencer une boucle. C'est là que vous déclarez une variable. Pour la plupart des boucles, cette variable s'appelle i. Il est également défini sur 0.

Voici à quoi ça va ressembler lorsque vous placez l’expression initialeExpression dans la boucle for:

for (let i = 0; condition; incrementExpression) {
  bounceBall ()
}

Après l'exécution de l'instruction, la variable i est augmentée ou diminuée. Vous augmentez ou diminuez la valeur de i dans l'expression d'incrémentation.

Pour augmenter la valeur de i de un, vous réaffectez i de telle sorte qu'il devienne i + 1 avec i = i + 1. Le raccourci pour cette réaffectation est i ++, ce que vous trouverez le plus souvent dans les boucles for.

Pour diminuer la valeur de i de un, vous réaffectez i de telle sorte qu'il devienne i - 1 avec i = i - 1. Le raccourci pour cette réaffectation est i--, qui est une autre variation de ce que vous trouverez dans la plupart des boucles for .

Dans l'exemple de bounceBall ci-dessus, nous avons augmenté la variable i de un à chaque exécution du code:

pour (soit i = 0; condition; i ++) {
  bounceBall ()
}

Mais devriez-vous augmenter ou diminuer i?

La réponse réside dans la condition. Cette instruction de condition est évaluée à true ou à false. Si l'instruction est évaluée à true, l'instruction est exécutée.

Lorsque l'instruction est exécutée, JavaScript exécute l'expression d'incrémentation et vérifie si la condition est évaluée à nouveau. Il répète ce processus jusqu'à ce que la condition soit évaluée à false.

Une fois la condition évaluée à false, JavaScript ignore la boucle et poursuit avec le reste de votre code.

Donc, si vous ne voulez pas que la boucle s'exécute, vous pouvez définir une condition qui est évaluée à false immédiatement:

// Cette boucle ne fonctionnera pas car la condition est évaluée à false
pour (soit i = 0; i <0; i ++) {
  bounceBall ()
  const timesBounce = i + 1
  console.log ('La balle a rebondi' + timesBounce + 'times')
}
// tu ne verras que ça
console.log ('prochaine ligne de code')

Si vous souhaitez que la boucle s'exécute deux fois, modifiez la condition pour qu'elle soit définie sur false lorsque l'expression d'incrémentation a été exécutée deux fois.

// Cette boucle sera exécutée deux fois
pour (soit i = 0; i <2; i ++) {
  bounceBall ()
  const timesBounce = i + 1
  console.log ('La balle a rebondi' + timesBounce + 'times') ")
}
console.log ('prochaine ligne de code')

Si vous souhaitez que la boucle s'exécute dix fois, modifiez la condition pour qu'elle soit évaluée à false lorsque l'expression d'incrémentation a été exécutée dix fois.

// Cette boucle sera exécutée dix fois
pour (soit i = 0; i <10; i ++) {
  bounceBall ()
  const timesBounce = i + 1
  console.log ('La balle a rebondi' + timesBounce + 'times') ")
}
console.log ('prochaine ligne de code')

Boucles infinies

Les boucles infinies se produisent lorsque la condition de vos boucles for retourne toujours la valeur true. Votre navigateur se bloquera si vous exécutez une boucle infinie.

Pour récupérer d'une boucle infinie, vous devez quitter votre navigateur avec force. Sur un Mac, cela signifie que vous cliquez avec le bouton droit de la souris sur l’icône de votre navigateur et que vous sélectionnez «Forcer à quitter». Sur une machine Windows, vous ouvrez le gestionnaire de tâches Windows avec Ctrl + Alt + Suppr, sélectionnez votre navigateur et cliquez sur «Fin de tâche».

En boucle dans les tableaux

En pratique, vous n'écrivez presque jamais une boucle qui s'exécute dix fois, comme dans l'exemple bounceBall ci-dessus. Vous parcourez toujours un tableau ou un objet.

Lorsque vous parcourez (ou parcourez) un tableau, vous parcourez chaque élément du tableau une fois. Pour ce faire, vous pouvez utiliser la longueur ou le tableau comme condition:

const fruitBasket = ['banane', 'poire', 'goyave']
// fruitBasket.length est égal à 3
pour (soit i = 0; i 
// => Il y a une banane dans le panier
// => Il y a une poire dans le panier
// => Il y a une goyave dans le panier

Une autre façon d'écrire cette boucle for consiste à utiliser une expression d'incrémentation négative. Cette version est légèrement plus rapide que la boucle for ci-dessus, mais boucle le tableau depuis la fin.

pour (laissez i = fruitBasket.length - 1; i> = 0; i--) {
  console.log ("Il y a un" + panier de fruits [i] + "dans le panier")
}
// => Il y a une goyave dans le panier
// => Il y a une poire dans le panier
// => Il y a une banane dans le panier

En boucle dans des tableaux avec «pour»

Un autre moyen (bien meilleur) de parcourir un tableau consiste à utiliser une boucle for ... of. Il s'agit d'une nouvelle syntaxe de boucle fournie avec ES6. Cela ressemble à ceci:

const fruitBasket = ['banane', 'poire', 'goyave']
pour (laisser fruit de fruitBasket) {
  console.log (fruit)
}
// => Il y a une banane dans le panier
// => Il y a une poire dans le panier
// => Il y a une goyave dans le panier

La boucle for ... of est préférable à la boucle standard car elle effectue toujours une boucle dans le tableau. Il n’est pas nécessaire d’écrire array.length, ce qui rend votre code beaucoup plus facile à lire et à maintenir.

Vous pouvez utiliser pour ... avec n'importe quel objet itérable. Ce sont des objets qui contiennent la propriété Symbol.iterator. Les tableaux sont l'un de ces objets. Si vous console.log un tableau vide, vous verrez qu’il contient le Symbol.iterator comme l’une de ses clés (dans la clé Array __proto__):

La logique en boucle

Vous pouvez utiliser if / else ou toute autre logique dans une boucle for.

Par exemple, supposons que vous ayez une liste de nombres et que vous souhaitiez créer une deuxième liste de nombres inférieurs à 20.

Pour compléter cet objectif, vous devez d’abord parcourir les chiffres.

nombres constants = [25, 22, 12, 56, 8, 18, 34]
pour (laisser num nombre) {
  // fais quelque chose ici
}

Ici, vous voulez vérifier si chaque nombre est inférieur à 20.

nombres constants = [25, 22, 12, 56, 8, 18, 34]
pour (laisser num nombre) {
  si (num <20) {
    // faire quelque chose
  }
}

Si num est inférieur à 20, vous souhaitez l'ajouter à un autre tableau. Pour ce faire, vous utilisez la méthode push.

nombres constants = [25, 22, 12, 56, 8, 18, 34]
laisser plus petit que 20 = []
pour (laisser num nombre) {
  si (num <20) {
    smallerThan20.push (num)
  }
}
// plus petit que 20 === [12, 8, 18]

Emballer

Une boucle for est utilisée lorsque vous souhaitez exécuter plusieurs fois la même tâche (ou un ensemble de tâches).

Vous parcourez rarement le code en boucle exactement dix fois. Normalement, vous souhaiterez plutôt parcourir un tableau.

Pour parcourir un tableau exactement une fois, vous pouvez utiliser la boucle for ... of, qui est beaucoup plus facile à écrire et à comprendre que la boucle for traditionnelle.

N'oubliez pas que vous pouvez écrire n'importe quelle quantité de logique que vous voulez dans les boucles. Vous pouvez utiliser des fonctions, des instructions if / else, ou même utiliser des boucles en boucle.

Si vous avez aimé cet article, vous allez adorer Learn Learn JavaScript, un cours qui vous aide à apprendre à créer de véritables composants à partir de zéro avec Javascript. Cliquez ici pour en savoir plus sur Learn JavaScript si cela vous intéresse.

(Oh, au fait, si vous avez aimé cet article, je l’apprécierais si vous pouviez le partager.)

Publié à l'origine sur zellwk.com.