Iteration über Objekte in JavaScript: Vollständige Analyse für Anfänger

Wie man Eigenschaften eines Objekts in JavaScript durchläuft: Vom Anfänger zum Profi

Jeder Entwickler, der in JavaScript schreibt, steht früher oder später vor der Aufgabe: „Wie durchlaufe ich alle Eigenschaften eines Objekts?“. Wenn Sie es gewohnt sind, mit Arrays zu arbeiten, wo es for, forEach und map gibt, können Objekte widerspenstig erscheinen. Aber keine Sorge! In diesem Artikel werden wir alle Methoden der Iteration über ein Objekt in JavaScript behandeln – vom klassischen for...in bis zu den modernen Object.keys(), Object.values() und Object.entries().

Wir zeigen nicht nur die Syntax. Wir analysieren, welche Methode für eine bestimmte Aufgabe geeignet ist, welche Fallstricke es gibt und wie man nicht in die Falle mit geerbten Eigenschaften tappt. Los geht's!

Was ist ein Objekt in JavaScript und warum muss man es durchlaufen?

Ein Objekt ist eine Sammlung von „Schlüssel: Wert“-Paaren. Im Gegensatz zu einem Array, wo Elemente nach Index geordnet sind, ist die Reihenfolge der Eigenschaften in einem Objekt nicht garantiert (obwohl moderne Engines versuchen, sie beizubehalten).

Stellen Sie sich vor, Sie haben ein Objekt mit Benutzerdaten:

const user = {\n  name: 'Anna',\n  age: 28,\n  city: 'Moskau',\n  isAdmin: false\n};

Sie müssen alle Daten auf dem Bildschirm anzeigen, an den Server senden oder einfach etwas berechnen. Ohne Iteration müssten Sie user.name, user.age usw. schreiben – das ist unflexibel und nicht skalierbar. Und wenn das Objekt 50 Eigenschaften hat? Hier kommen die Iterationsmethoden ins Spiel.

Methode Nr. 1: Der klassische for...in

Die älteste und direkteste Methode, um Eigenschaften eines Objekts zu durchlaufen, ist die Verwendung der for...in-Schleife. Sie wurde speziell für Objekte entwickelt.

const user = {\n  name: 'Anna',\n  age: 28,\n  city: 'Moskau'\n};\n\nfor (let key in user) {\n  console.log(key + ': ' + user[key]);\n}\n// Ausgabe:\n// name: Anna\n// age: 28\n// city: Moskau

Hier ist key der Name der Eigenschaft (ein String-Wert) und user[key] ihr Wert.

Wichtig! for...in durchläuft nicht nur die eigenen Eigenschaften des Objekts, sondern auch die, die über die Prototypenkette vererbt wurden. Dies kann zu unerwarteten Ergebnissen führen, insbesondere wenn Sie die Prototypen eingebauter Objekte erweitert haben (was man nicht tun sollte, aber man weiß ja nie).

Um dies zu vermeiden, verwenden Sie die Methode hasOwnProperty:

for (let key in user) {\n  if (user.hasOwnProperty(key)) {\n    console.log(key + ': ' + user[key]);\n  }\n}

Eine moderne Alternative ist Object.hasOwn() (ES2022):

for (let key in user) {\n  if (Object.hasOwn(user, key)) {\n    console.log(key + ': ' + user[key]);\n  }\n}

Wann sollte man for...in verwenden? Wenn Sie die Namen der Eigenschaften (Schlüssel) benötigen und sicher sind, dass Sie nicht auf geerbte Eigenschaften stoßen. Oder wenn Sie mit einfachen Objekten arbeiten, die mit dem Literal {} erstellt wurden.

Methode Nr. 2: Object.keys() – wir erhalten ein Array von Schlüsseln

Die Methode Object.keys() gibt ein Array der eigenen (nicht geerbten) aufzählbaren Eigenschaften eines Objekts zurück. Dies ist die heute beliebteste und sicherste Methode der Iteration.

const user = {\n  name: 'Anna',\n  age: 28,\n  city: 'Moskau'\n};\n\nconst keys = Object.keys(user);\nconsole.log(keys); // ['name', 'age', 'city']\n\n// Jetzt können wir forEach oder for...of verwenden\nkeys.forEach(key => {\n  console.log(key + ': ' + user[key]);\n});

Vorteil: Sie erhalten ein normales Array, mit dem Sie alles machen können – filtern, mappen, sortieren.

Beispiel mit Filterung:

const filteredKeys = Object.keys(user).filter(key => key !== 'isAdmin');\nfilteredKeys.forEach(key => console.log(user[key]));

Wann sollte man Object.keys() verwenden? Praktisch im