Iterable-protokollen og for...of
Lær iterable-protokollen: Symbol.iterator, iterator.next() og bruk av for...of, spread og Array.from med små egendefinerte eksempler.
Iterable-protokollen og for...of er en gratis leksjon i JavaScript Academy på CoddyKit. Dette er leksjon 1 av 3. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i JavaScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i JavaScript Academy inneholder totalt 3 leksjoner.
Oversikt
Mål: Lese og bygge små iterables.
- Hva iterable betyr
- Symbol.iterator og iterator.next()
- for...of, spread, Array.from
- Bygge et telleeksempel fra 0 til N
for...of på innebygde typer
for...of fungerer på innebygde iterables som arrayer og strenger, og gir elementene i riktig rekkefø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);
}
Egendefinert iterable
En iterable har [Symbol.iterator](), som returnerer en iterator der next() gir { 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);
}
Manuell iterasjon
Under panseret kaller for...of next() gjentatte ganger til 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 bruker også iterable-protokollen til å samle verdier.
// 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:
- Returner en ny iterator hver gang i [Symbol.iterator].
- Avslutt alltid med done: true for å unngå uendelige løkker.
- Hold tilstanden lokal inne i iteratorens closure.
Quiz om iterable-protokollen
Rask sjekk: Gjøre et objekt iterable.
Oppsummering
Oppsummering: Innebygde typer som arrayer er iterable. For å lage en egen iterable legger De til [Symbol.iterator](), som returnerer en iterator med next(). Bruk for...of, spread eller Array.from for å hente ut verdier.
Lær deg JavaScript med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 59
- Leksjoner
- 200
Ofte stilte spørsmål
Er leksjonen «Iterable-protokollen og for...of» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien JavaScript Academy, inkludert «Iterable-protokollen og for...of», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i JavaScript Academy inneholder totalt 3 leksjoner.
Hva lærer jeg i «Iterable-protokollen og for...of»?
Lær iterable-protokollen: Symbol.iterator, iterator.next() og bruk av for...of, spread og Array.from med små egendefinerte eksempler. Du øver på JavaScript Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med JavaScript Academy?
Ingen tidligere erfaring er nødvendig. JavaScript Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 3.
Hvor lang tid tar leksjonen «Iterable-protokollen og for...of»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne JavaScript Academy-leksjonen?
Ja. Alle JavaScript Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Iterable-protokollen og for...of
- Generatorfunksjoner, yield og små pipelines
- Asynkrone iteratorer — for await...of og async-generatorer