La boucle for en JavaScript, et quelle boucle choisir
Les boucles JavaScript comparées
La boucle for en JavaScript et toutes les autres, comparées en direct | We.Inc
for, for...of, for...in, while, do...while et forEach côte à côte. Exécutez chaque boucle sur un tableau, une chaîne, un objet ou une Map et voyez le résultat, ou l'erreur levée.
Une boucle for classique a trois parties : for (let i = 0; i < arr.length; i++) { ... }. Utilisez-la quand vous avez besoin de l'index ou d'un pas personnalisé. Pour les valeurs simples, utilisez for...of, pour les clés d'un objet for...in ou Object.entries, et while quand vous ne savez pas à l'avance combien de tours il faut.
Quelle boucle pour quel besoin
Boucle
Idéale pour
Sortie anticipée possible ?
for (let i = 0; i < n; i++)
Compter, accéder par index, reculer ou avancer de 2 en 2
Oui
for (const x of iterable)
Valeurs des tableaux, chaînes, Maps, Sets, NodeLists
Oui
for (const key in obj)
Clés d'un objet simple (y compris les clés héritées)
Oui
while (condition)
Répéter jusqu'à ce que quelque chose change, nombre inconnu
Oui
do { } while (condition)
Pareil, mais s'exécute toujours au moins une fois
Oui
arr.forEach(fn)
Effets de bord sur chaque élément du tableau
Non (seulement en levant une erreur)
Toutes les boucles de cette page répètent du code, mais elles diffèrent par ce qu'elles vous donnent à chaque tour, ce qu'elles peuvent parcourir et la façon d'en sortir. L'outil ci-dessous permet d'appliquer chaque boucle à quatre types de données et d'observer le vrai résultat, ce qui rend faciles à repérer des erreurs comme for...in sur un tableau ou for...of sur un objet simple.
Choisissez une boucle et un type de données. La page exécute réellement cette boucle dans votre navigateur.
Le panneau de résultat liste ce que contenait la variable de boucle à chaque tour, ou l'erreur levée par la combinaison.
Activez l'option break pour arrêter au troisième tour et voir quelles boucles le permettent.
Copiez n'importe quel modèle parmi les exemples plus bas.
Déclarez le compteur avec let, pas var. Avec let, chaque tour a sa propre copie, donc les callbacks créés dans la boucle voient le bon nombre.
Préférez const dans for...of et for...in quand vous ne réassignez pas la variable : chaque tour reçoit une nouvelle liaison.
forEach n'attend pas les callbacks async. Pour attendre chaque élément l'un après l'autre, utilisez for...of avec await dans une fonction async.
Assurez-vous que la condition d'une boucle while peut devenir fausse. Modifiez la variable testée dans le corps, sinon l'onglet se figera.
Questions fréquentes
Quelle est la différence entre for...of et for...in ?
for...of vous donne les valeurs de tout ce qui est itérable, comme les éléments d'un tableau ou les caractères d'une chaîne. for...in vous donne les noms de propriétés sous forme de chaînes, y compris les propriétés énumérables héritées. Sur un tableau, for...in produit '0', '1', '2' au lieu des éléments.
Comment sortir d'une boucle forEach ?
C'est impossible, sauf en levant une erreur. Passez à for...of, qui prend en charge break, ou à some, every, find ou findIndex, qui s'arrêtent d'eux-mêmes dès qu'ils ont une réponse.
Comment parcourir un objet en JavaScript ?
Utilisez for (const [key, value] of Object.entries(obj)). Cela ne couvre que les clés propres de l'objet et vous donne les deux parties. Utiliser for...of directement sur un objet simple lève TypeError: obj is not iterable.
Comment sortir de deux boucles imbriquées à la fois ?
Placez une étiquette avant la boucle externe et utilisez-la avec break : outer: for (...) { for (...) { if (found) break outer; } }. continue outer passe plutôt au tour suivant de la boucle externe.
Comment parcourir une boucle à l'envers ?
Commencez au dernier index et décomptez : for (let i = arr.length - 1; i >= 0; i--). C'est aussi la manière sûre de supprimer des éléments avec splice pendant la boucle, car les positions qu'il vous reste à visiter ne se décalent pas.
Lire les trois parties d'une boucle for
La première partie s'exécute une fois avant tout le reste et crée généralement le compteur. La deuxième est vérifiée avant chaque tour, et la boucle s'arrête dès qu'elle est fausse. La troisième s'exécute après chaque tour, généralement pour faire avancer le compteur.
Chaque partie peut rester vide. for (;;) est une boucle qui ne se termine que par break ou return, ce qui sert parfois pour une logique de nouvelle tentative avec une sortie claire à l'intérieur.
break, continue et étiquettes
break quitte immédiatement la boucle la plus interne. continue saute le reste du tour en cours et passe au suivant. Les deux fonctionnent dans for, for...of, for...in, while et do...while, mais pas dans un callback de forEach, où return ne termine que cet appel.
Une étiquette est un nom suivi de deux-points placé devant une instruction. break label et continue label ciblent alors cette instruction externe, ce qui vous évite de gérer un indicateur found entre des boucles imbriquées.
Modèles de boucles à copier
for classique, en avant, en arrière et par pas
Modifiez le départ, la condition ou le pas pour compter comme vous voulez.
for...of avec l'index
entries() associe chaque valeur à sa position, vous obtenez donc les deux sans compteur.
while et do...while
do...while vérifie sa condition après le corps, donc le corps s'exécute une fois même si la condition est fausse au départ.
Sortir de boucles imbriquées avec une étiquette
break grid arrête les deux boucles dès que la première correspondance est trouvée.
Attendre chaque élément dans l'ordre
for...of marque une pause à chaque await. Le même code dans forEach lancerait toutes les requêtes en même temps sans attendre.
Exécuteur de boucles
Choisissez une boucle et des données. La boucle s'exécute vraiment, et chaque tour est listé ci-dessous.
Boucle
Données
Tableau
Chaîne
Objet simple
Map
break après le troisième tour
Ce qui s'exécute
Résultat
Tour {n} : {v}
forEach n'a pas de break. Le return dans le callback ne termine que cet appel, donc tous les tours s'exécutent quand même.