Was ist der Unterschied zwischen den Schleifen for...in und for...of?

Die Schleife for...in iteriert über die Schlüssel (Eigenschaften) der aufzählbaren Eigenschaften eines Objekts, einschließlich der Eigenschaften seiner Prototyp-Kette.

Die Schleife for...of iteriert über die Werte von iterierbaren Objekten (Array, Map, Set, String, arguments usw.). Sie iteriert nicht über die Eigenschaften des Prototyps.

	for...in	for...of
Iteriert über	Schlüssel (Eigenschaften) von Objekten	Werte von iterierbaren Objekten
Verwendet mit	Objekten	Arrays, Strings, Map, Set und andere iterierbare Objekte
Prototyp	Iteriert über die Eigenschaften des Prototyps	Iteriert nicht über die Eigenschaften des Prototyps
Reihenfolge	Nicht garantiert für nicht-ganzzahlige Schlüssel	Garantiert für Arrays (nach Index)

Beispiel for...in:

const obj = { a: 1, b: 2 };
for (const key in obj) {
  console.log(key, obj[key]); // Gibt aus: "a 1", "b 2"
}

Beispiel for...of:

const arr = [1, 2, 3];
for (const value of arr) {
  console.log(value); // Gibt aus: 1, 2, 3
}

Im Allgemeinen ist es besser, for...of zum Durchlaufen von Arrays und ähnlichen Strukturen zu verwenden, und for...in zum Durchlaufen von Objekt-Eigenschaften (oft in Kombination mit hasOwnProperty, um Eigenschaften des Prototyps auszuschließen).