Iterable-protokollen og for...of
Lær iterable-protokollen: Symbol.iterator, iterator.next() og brugen af for...of, spread og Array.from med små tilpassede eksempler.
Iterable-protokollen og for...of er en gratis JavaScript Academy-lektion på CoddyKit. Dette er lektion 1 af 3. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i JavaScript Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. JavaScript Academy-kurset indeholder 3 lektioner i alt.
Det store billede
Mål: Læs og opbyg små itererbare objekter.
- Hvad det vil sige at være itererbar
- Symbol.iterator og iterator.next()
- for...of, spread, Array.from
- Byg et 0..N-tællereksempel
for...of på indbyggede objekter
for...of fungerer på indbyggede itererbare objekter som arrays og strenge og giver elementerne i rækkefølge.
// 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);
}
Et brugerdefineret itererbart objekt
Et itererbart objekt har [Symbol.iterator](), som returnerer en iterator, hvis next() giver { 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);
}
Manuel iteration
Under overfladen kalder for...of next() gentagne gange, indtil 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 og Array.from
Spread og Array.from bruger også den itererbare protokol til at samle værdier.
// 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);
Gode vaner
Tips:
- Returnér en ny iterator hver gang i [Symbol.iterator].
- Afslut altid med done: true for at undgå uendelige løkker.
- Hold tilstanden lokal inde i iteratorens closure.
Quiz om den itererbare protokol
Hurtigt tjek: Gør et objekt itererbart.
Opsummering
Opsummering: Indbyggede objekter som arrays er itererbare. Hvis du vil lave dit eget, skal du tilføje [Symbol.iterator](), som returnerer en iterator med next(). Brug for...of, spread eller Array.from til at hente værdierne.
Lær JavaScript med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 59
- Lektioner
- 200
Ofte stillede spørgsmål
Er lektionen “Iterable-protokollen og for...of” gratis?
Ja — alle 3 lektioner i læringssporet JavaScript Academy, inklusive “Iterable-protokollen og for...of”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. JavaScript Academy-kurset indeholder 3 lektioner i alt.
Hvad lærer jeg i “Iterable-protokollen og for...of”?
Lær iterable-protokollen: Symbol.iterator, iterator.next() og brugen af for...of, spread og Array.from med små tilpassede eksempler. Du øver dig i JavaScript Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på JavaScript Academy?
Der kræves ingen tidligere erfaring. JavaScript Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 3.
Hvor lang tid tager lektionen “Iterable-protokollen og for...of”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne JavaScript Academy-lektion?
Ja. Alle JavaScript Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Iterable-protokollen og for...of
- Generatorfunktioner, yield og små pipelines
- Async-iteratorer — for await...of og async-generatorer