Iterable-Protokoll und for...of
Das Iterable-Protokoll kennenlernen: Symbol.iterator und iterator.next() sowie die Verwendung von for...of, spread und Array.from anhand kleiner eigener Beispiele
Iterable-Protokoll und for...of ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 3 Lektionen.
Das große Ganze
Ziel: Kleine iterierbare Objekte lesen und erstellen.
- Was iterierbar bedeutet
- Symbol.iterator und iterator.next()
- for...of, Spread-Syntax, Array.from
- Ein Zählerbeispiel von 0 bis N erstellen
for...of bei integrierten Objekten
for...of funktioniert mit integrierten iterierbaren Objekten wie Arrays und Zeichenketten und liefert die Elemente der Reihe nach.
// 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);
}
Benutzerdefiniertes iterierbares Objekt
Ein iterierbares Objekt verfügt über [Symbol.iterator](), das einen Iterator zurückgibt, dessen next() { value, done } liefert.
// 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);
}
Manuelle Iteration
Intern ruft for...of wiederholt next() auf, bis done: true erreicht ist.
// 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-Syntax und Array.from
Spread-Syntax und Array.from verwenden ebenfalls das Protokoll für iterierbare Objekte, um Werte zu sammeln.
// 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);
Gute Gewohnheiten
Tipps:
- Geben Sie in [Symbol.iterator] jedes Mal einen neuen Iterator zurück.
- Beenden Sie immer mit done: true, um Endlosschleifen zu vermeiden.
- Halten Sie den Zustand innerhalb der Iterator-Closure lokal.
Quiz zum Protokoll für iterierbare Objekte
Kurze Überprüfung: Ein Objekt iterierbar machen.
Zusammenfassung
Zusammenfassung: Integrierte Objekte wie Arrays sind iterierbar. Fügen Sie für eigene iterierbare Objekte [Symbol.iterator]() hinzu, das einen Iterator mit next() zurückgibt. Verwenden Sie for...of, Spread-Syntax oder Array.from, um Werte zu verarbeiten.
Häufig gestellte Fragen
Ist die Lektion „Iterable-Protokoll und for...of“ kostenlos?
Ja — der vollständige Text von „Iterable-Protokoll und for...of“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 3 Lektionen.
Was lerne ich in „Iterable-Protokoll und for...of“?
Das Iterable-Protokoll kennenlernen: Symbol.iterator und iterator.next() sowie die Verwendung von for...of, spread und Array.from anhand kleiner eigener Beispiele Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um JavaScript Academy zu starten?
Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 3.
Wie lange dauert die Lektion „Iterable-Protokoll und for...of“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?
Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Iterable-Protokoll und for...of
- Generatorfunktionen, yield und kleine Pipelines
- Asynchrone Iteratoren – for await...of und asynchrone Generatoren