for...of und for...in
Bei for und while steuerst du den Zähler selbst. Oft liegen die Daten schon als Liste oder Objekt bereit — du willst jeden Wert oder jeden Schlüssel, keinen selbstgebauten Index. for...of liefert den nächsten Wert einer iterierbaren Quelle. for...in liefert den nächsten Schlüssel eines Objekts. Gleiche Idee vom Wiederholen; im Schleifenvariablen steckt etwas anderes.
Was macht for...of?
Der Rumpf läuft einmal pro Wert einer iterierbaren Quelle. Für Einsteiger sind Arrays und Strings der Alltag. Du schreibst for (const item of list) — jede Runde ist item der nächste Wert. i < list.length brauchst du nur, wenn du bewusst eine Indexschleife willst.
for...of, for...in und klassische Schleifen
📊 Alltägliche Lauf-Formen
| Form | Was die Schleifenvariable hält | Alltagstauglich |
|---|---|---|
for...of |
ein Wert aus einer iterierbaren Quelle | jede Frucht im Array; jedes Zeichen im String |
for...in |
ein Schlüssel (Eigenschaftsname) am Objekt | jeder Feldname an einem einfachen Objekt |
klassisches for |
ein Index, den du steuerst | wenn die Zahl 0, 1, 2… nötig ist |
while |
was du im Rumpf aktualisierst | weiterlaufen, solange eine Regel gilt |
Starte bei for...of mit Arrays. Greife zu for...in, wenn die Geschichte „jeder Eigenschaftsname an diesem Objekt“ ist. Behalte klassisches for, wenn der Index selbst zählt.
const colors = ["red", "green", "blue"];
for (const color of colors) {
console.log(color);
}
Array-Werte ablaufen
Jede Runde druckt einen String: red, dann green, dann blue. Die Schleifenvariable ist der Wert selbst — nicht 0, 1, 2. Brauchst du nur die Einträge, bleibt for...of kürzer als Indexverwaltung.
const word = "hi";
for (const ch of word) {
console.log(ch);
}
Zeichen in einem String ablaufen
Strings sind ebenfalls iterierbar. Es erscheint h, dann i. Behandle jedes Zeichen als einen Wert — nützlich für einfache Buchstabenarbeit, bevor schwerere String-APIs kommen.
const user = { name: "Ada", role: "dev" };
for (const key in user) {
console.log(key + "=" + user[key]);
}
Schlüssel mit for...in ablaufen
Hier wird key zuerst "name", dann "role". Den Wert liest du mit user[key]. Bevorzuge for...in für aufzählbare Schlüssel einfacher Objekte. Nutze es nicht als erstes Werkzeug für Array-Werte — dafür ist for...of da.
Merke die Kurzregel: of → Werte, in → Schlüssel. Die beiden zu vertauschen ist der klassische Anfängerfehler.
const parts = ["A", "B", "C"];
let msg = "";
for (const p of parts) {
msg = msg + p + "-";
}
console.log(msg.slice(0, -1));
Aus Werten eine Meldung bauen
Jede Runde hängt einen Buchstaben und einen Bindestrich an. Nach der Schleife entfernt slice den letzten Bindestrich — du siehst A-B-C. Dieselbe Klebe-Idee wie in früheren Schleifenlektionen — jetzt läuft die Tour direkt über Werte.
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);
}
Wann die Indexschleife noch hilft
Das klassische for druckt Index und Wert. for...of nur Werte. Brauchst du die Positionsnummer? Behalte ein indexiertes for. Nur die Einträge? Bevorzuge for...of.
for...of auf der Seite zeigen
Lauf mit for...of über ein Array, baue eine kurze Zeile, schreibe sie in die Seite.
<!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>
Die Seite zeigt list=tea milk honey. Ändere einen Array-Eintrag, lade neu, lies die neue Zeile. for...of für Werte, for...in für Objektschlüssel, klassisches for wenn der Index zählt. Als Nächstes steuern break und continue Schleifen mitten im Flug.
Selbst ausprobieren
- Logge mit
for...ofjeden Wert in["a", "b", "c"]. - Logge mit
for...ofjedes Zeichen von"ok". - Nutze
for...inauf{ x: 1, y: 2 }und loggekey=value. - Füge
["1", "2", "3"]mitfor...ofzu1-2-3zusammen. - Schreibe ein indexiertes
for, das Index und Wert nebeneinander druckt. - Ändere im HTML-Demo nur das Array, lade neu, lies
list=.
Typische Fehler
for...inschreiben, wenn Array-Werte gemeint waren (for...of)for...ofauf ein einfaches Objekt anwenden (für Einsteiger so nicht iterierbar)- von
for...ofIndizes0,1,2erwarten — es liefert Werte, keine Indizes - nach
for...inuser[key]vergessen und nur Schlüssel loggen, obwohl Werte nötig waren - lange Indexschleife, obwohl klares
for...oflesbarer wäre
Kurzfassung
for...ofläuft über Werte iterierbarer Quellen (Arrays, Strings)for...inläuft über Schlüssel an Objekten- Klassisches
forbleibt, wenn die Indexnummer nötig ist whilebleibt für eine laufende Bedingung- Baue Meldungen, indem du Werte im Rumpf anhängst
- Als Nächstes: break und continue — Runde stoppen oder überspringen
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt