for.
Parcourt les valeurs successives d’un objet itérable : tableau, chaîne, Map, Set et autres.
Exemple
#const skills = ['HTML', 'CSS', 'JavaScript']
for (const skill of skills) {
console.log(`J’apprends : ${skill}`)
}Définition et utilisation
#La boucle for...of fournit à chaque tour la valeur suivante d’un objet itérable. Vous n’avez pas besoin de gérer un compteur ni d’accéder à l’élément par un indice, donc le code est plus court et il est plus difficile de faire une erreur « de décalage ».
Elle fonctionne avec les tableaux, les chaînes (caractère par caractère, sans couper les emoji en deux), les objets Map et Set, les listes de querySelectorAll() ou les générateurs. Un objet ordinaire {} n’est pas itérable, donc pour parcourir son contenu, utilisez Object.keys(), Object.values() ou Object.entries().
Contrairement à forEach(), dans for...of vous pouvez utiliser break, continue, return et await. Quand vous avez aussi besoin de l’indice, utilisez array.entries() avec la déstructuration : for (const [index, value] of array.entries()).
Syntaxe
#for (const element of iterable) {
// instructions
}Plus d’exemples
#const tasks = ['Variables', 'Boucles', 'Fonctions']
for (const [index, task] of tasks.entries()) {
console.log(index, task)
}const scores = { Léa: 120, Lucas: 95 }
for (const [name, points] of Object.entries(scores)) {
console.log(`${name} a ${points} pts`)
}const word = 'Code👾'
for (const char of word) {
console.log(char)
}
console.log(word.length)for...of parcourt des caractères Unicode entiers, c’est pourquoi l’emoji est un seul élément, bien que length le compte comme 2.
Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#for...ofdonne des valeurs, etfor...indes clés. Pour les tableaux, vous voulez presque toujoursfor...of.- Avec
awaità l’intérieur de la boucle, les opérations s’exécutent les unes après les autres. Pour les lancer en parallèle, rassemblez les promesses dans un tableau et utilisezPromise.all(). - Déclarez la variable de boucle avec
const. Chaque tour reçoit une nouvelle variable, et un écrasement accidentel signalera immédiatement une erreur.
Entrées associées
#- for...in vs for...offor...of fournit les valeurs successives d’un objet itérable, tandis que for...in fournit les noms successifs des propriétés d’un objet sous forme de chaînes.
- for...inParcourt les noms des propriétés énumérables d’un objet, y compris celles héritées du prototype.
- forUne boucle avec compteur : initialisation, condition et étape. Répète un bloc de code tant que la condition est vraie.
- Object.entries()Renvoie un tableau des paires [clé, valeur] d’un objet.
- DéstructurationLa déstructuration (destructuring) extrait des valeurs de tableaux et d’objets directement vers des variables séparées.
- MapUne collection de paires clé-valeur dans laquelle la clé peut être n’importe quelle valeur, et où l’ordre d’ajout est conservé.
- SetUne collection de valeurs uniques : chaque valeur ne peut apparaître qu’une fois dans l’ensemble.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.