Protocole itérable et for...of
Découvrez le protocole itérable : Symbol.iterator, iterator.next() et l’utilisation de for...of, spread et Array.from avec de petits exemples personnalisés
Protocole itérable et for...of est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 3. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 3 leçons au total.
Vue d’ensemble
Objectif : lire et créer de petits objets itérables.
- Ce que signifie iterable
- Symbol.iterator et iterator.next()
- for...of, spread, Array.from
- Créer un compteur de 0 à N
for...of sur les éléments intégrés
for...of fonctionne sur les objets itérables intégrés, comme les tableaux et les chaînes, en fournissant les éléments dans l’ordre.
// Arrays and strings are iterable
const arr = [10, 20, 30];
for (const n of arr) {
console.log("arr item:", n);
}
const word = "JS";
for (const ch of word) {
console.log("char:", ch);
}
Objet itérable personnalisé
Un objet iterable possède [Symbol.iterator](), qui renvoie un itérateur dont next() fournit { value, done }.
// A tiny iterable that counts 0..max-1
const Counter = {
make: function (max) {
return {
max: max,
// Symbol.iterator returns an iterator object
[Symbol.iterator]: function () {
let i = 0;
return {
next: function () {
if (i < max) {
const out = { value: i, done: false };
i = i + 1;
return out;
}
return { value: undefined, done: true };
}
};
}
};
}
};
for (const x of Counter.make(3)) {
console.log("count:", x);
}
Itération manuelle
En interne, for...of appelle next() à plusieurs reprises jusqu’à obtenir done: true.
// You can drive the iterator manually
const iterable = Counter.make(2);
const it = iterable[Symbol.iterator]();
console.log(it.next()); // { value: 0, done: false }
console.log(it.next()); // { value: 1, done: false }
console.log(it.next()); // { value: undefined, done: true }
Spread et Array.from
Spread et Array.from utilisent également le protocole des objets itérables pour rassembler les valeurs.
// Spread (...) and Array.from consume iterables
const small = Counter.make(4);
const a1 = [...small];
const a2 = Array.from(Counter.make(3));
console.log("spread:", a1);
console.log("from :", a2);
Bonnes habitudes
Conseils :
- Renvoyez un nouvel itérateur à chaque appel dans [Symbol.iterator].
- Terminez toujours par done: true pour éviter les boucles infinies.
- Gardez l’état local dans la fermeture de l’itérateur.
Quiz sur le protocole des objets itérables
Vérification rapide : rendre un objet itérable.
Récapitulatif
Récapitulatif : les éléments intégrés comme les tableaux sont itérables. Pour créer votre propre objet, ajoutez [Symbol.iterator](), qui renvoie un itérateur muni de next(). Utilisez for...of, spread ou Array.from pour parcourir les valeurs.
Questions Fréquemment Posées
La leçon « Protocole itérable et for...of » est-elle gratuite ?
Oui — le texte complet de « Protocole itérable et for...of » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 3 leçons au total.
Qu'est-ce que j'apprendrai dans « Protocole itérable et for...of » ?
Découvrez le protocole itérable : Symbol.iterator, iterator.next() et l’utilisation de for...of, spread et Array.from avec de petits exemples personnalisés Tu pratiques JavaScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer JavaScript Academy ?
Aucune expérience préalable n'est requise. JavaScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 3.
Combien de temps prend la leçon « Protocole itérable et for...of » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon JavaScript Academy ?
Oui. Chaque leçon JavaScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Protocole itérable et for...of
- Fonctions génératrices, yield et petits pipelines
- Itérateurs asynchrones — for await...of et générateurs asynchrones