for...of et for...in
Avec for et while, vous gériez le compteur vous-même. Souvent les données sont déjà une liste ou un objet — vous voulez chaque valeur ou chaque clé, pas un index maison. for...of vous donne la valeur suivante d'un itérable. for...in vous donne la clé suivante d'un objet. Même famille de répétition ; autre chose dans la variable de boucle.
Que fait for...of ?
Il exécute le corps une fois par valeur d'un itérable. Pour débuter, tableaux et chaînes sont le quotidien. Vous écrivez for (const item of list) — à chaque tour, item est la valeur suivante. N'écrivez i < list.length que si vous voulez volontairement une boucle d'index.
for...of, for...in et boucles classiques
📊 Formes de parcours du quotidien
| Forme | Ce que détient la variable de boucle | Usage courant |
|---|---|---|
for...of |
une valeur d'un itérable | chaque fruit dans un tableau ; chaque caractère dans une chaîne |
for...in |
une clé (nom de propriété) sur un objet | chaque nom de champ sur un objet simple |
for classique |
un index que vous contrôlez | quand le nombre 0, 1, 2… compte |
while |
ce que vous mettez à jour dans le corps | continuer tant qu'une règle tient |
Commencez par les tableaux pour for...of. Passez à for...in quand l'histoire est « chaque nom de propriété sur cet objet ». Gardez le for classique quand l'index lui-même importe.
const colors = ["red", "green", "blue"];
for (const color of colors) {
console.log(color);
}
Parcourir les valeurs d'un tableau
Chaque tour affiche une chaîne : red, puis green, puis blue. La variable de boucle est la valeur elle-même — pas 0, 1, 2. Si vous ne voulez que les éléments, for...of reste plus court que gérer un index.
const word = "hi";
for (const ch of word) {
console.log(ch);
}
Parcourir les caractères d'une chaîne
Les chaînes sont aussi itérables. Cela affiche h, puis i. Traitez chaque caractère comme une valeur — utile pour un travail lettre par lettre avant des API de chaînes plus lourdes.
const user = { name: "Ada", role: "dev" };
for (const key in user) {
console.log(key + "=" + user[key]);
}
Parcourir les clés avec for...in
Ici key devient "name", puis "role". Vous lisez la valeur avec user[key]. Préférez for...in pour les clés énumérables d'objets simples. Ne l'utilisez pas en premier outil pour les valeurs de tableau — c'est le rôle de for...of.
Gardez la règle courte : of → valeurs, in → clés. Les confondre est le piège classique du débutant.
const parts = ["A", "B", "C"];
let msg = "";
for (const p of parts) {
msg = msg + p + "-";
}
console.log(msg.slice(0, -1));
Construire un message à partir des valeurs
Chaque tour ajoute une lettre et un tiret. Après la boucle, slice retire le tiret final : vous voyez A-B-C. Même idée de collage que dans les leçons de boucles précédentes — le parcours utilise maintenant les valeurs directement.
const nums = [10, 20, 30];
for (let i = 0; i < nums.length; i++) {
console.log("i=" + i + " value=" + nums[i]);
}
for (const n of nums) {
console.log("value=" + n);
}
Quand la boucle d'index aide encore
Le for classique affiche index et valeur. Le for...of n'affiche que les valeurs. Besoin du numéro de position ? Gardez un for indexé. Seulement les éléments ? Préférez for...of.
Afficher for...of sur la page
Parcourez un tableau avec for...of, construisez une courte ligne, écrivez-la dans la page.
<!DOCTYPE html>
<html>
<head>
<title>for...of — page list</title>
</head>
<body>
<p id="out">…</p>
<script>
const items = ["tea", "milk", "honey"];
let line = "";
for (const item of items) {
line = line + item + " ";
}
let box = document.getElementById("out");
box.textContent = "list=" + line.trim();
</script>
</body>
</html>
La page montre list=tea milk honey. Changez une entrée du tableau, rechargez, lisez la nouvelle ligne. for...of pour les valeurs, for...in pour les clés d'objet, for classique quand l'index compte. Ensuite : break et continue pour diriger les boucles en cours de route.
À vous de jouer
- Avec
for...of, journalisez chaque valeur de["a", "b", "c"]. - Avec
for...of, journalisez chaque caractère de"ok". - Avec
for...insur{ x: 1, y: 2 }, affichezkey=value. - Joignez
["1", "2", "3"]en1-2-3avecfor...of. - Écrivez un
forindexé qui affiche index et valeur côte à côte. - Dans la démo HTML, changez seulement le tableau, rechargez, lisez
list=.
Erreurs fréquentes
- Écrire
for...inalors que vous vouliez des valeurs de tableau (for...of) - Utiliser
for...ofsur un objet simple (pas itérable ainsi pour un débutant) - Attendre les index
0,1,2defor...of— il donne des valeurs, pas des index - Oublier
user[key]aprèsfor...inet n'afficher que les clés alors que les valeurs comptaient aussi - Une longue boucle d'index alors qu'un
for...ofclair se lit mieux
En bref
for...ofparcourt les valeurs d'itérables (tableaux, chaînes)for...inparcourt les clés d'objets- Le
forclassique reste utile quand le numéro d'index compte whilereste utile pour une condition continue- Construisez des messages en collant des valeurs dans le corps
- Ensuite : break et continue — arrêter ou sauter un tour
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut