Wie man ein Objekt in JavaScript durchläuft: 5 Methoden mit Beispielen

Wie man ein Objekt in JavaScript durchläuft: vom Anfänger zum Profi

Jeder Entwickler steht früher oder später vor der Aufgabe: „Wie durchlaufe ich alle Eigenschaften eines Objekts?“. Die Frage ist so beliebt, dass sie auf Stack Overflow tausende Aufrufe und hunderte Antworten gesammelt hat. Und das ist kein Wunder – Objekte in JavaScript sind die Grundlage von allem: von Konfigurationen bis zu Daten vom Server.

In diesem Tutorial behandeln wir alle grundlegenden Methoden zum Durchlaufen eines Objekts in JavaScript, von der Klassik bis zu modernen Ansätzen. Sie erfahren, wann Sie for...in verwenden, was Object.keys besser macht und wie Object.entries das Leben vereinfacht. Los geht's!

Vorbereitung: Erstellen eines Testobjekts

Damit die Beispiele anschaulich sind, nehmen wir ein einfaches Benutzerobjekt:

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

Unsere Aufgabe ist es, alle Schlüssel und Werte auszugeben. Schauen wir uns an, welche Werkzeuge im Arsenal von JavaScript vorhanden sind.

1. Die for...in-Schleife – der Klassiker

Der älteste und grundlegendste Weg zum Durchlaufen von Objekteigenschaften. Er existiert seit ES3 und funktioniert in allen Browsern.

for (let key in user) {\n  console.log(key + ': ' + user[key]);\n}\n// name: Anna\n// age: 28\n// city: Moskau\n// isAdmin: false

Wichtiger Hinweis: for...in durchläuft nicht nur eigene Eigenschaften, sondern auch geerbte über die Prototypenkette. Um diese zu filtern, verwenden Sie hasOwnProperty:

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

Moderne Objekte haben selten zusätzliche Prototyp-Eigenschaften, aber die Gewohnheit, hasOwnProperty zu prüfen, schützt vor Fehlern bei der Arbeit mit Bibliotheken.

2. Object.keys() – der moderne Ansatz

Die Methode Object.keys() gibt ein Array der eigenen Schlüssel eines Objekts zurück. Das vermeidet Probleme mit Prototypen und gibt Zugriff auf alle Array-Methoden.

const keys = Object.keys(user);\nconsole.log(keys); // ['name', 'age', 'city', 'isAdmin']\n\nkeys.forEach(key => {\n  console.log(key + ': ' + user[key]);\n});

Vorteile:

\n
• Funktioniert nur mit eigenen Eigenschaften (nicht geerbt)
\n
• Gibt ein Array zurück – forEach, map, filter können verwendet werden
\n
• Lesbarer und vorhersagbarer Code
\n

Dies ist meine bevorzugte Methode, wenn ich einfach eine Liste von Schlüsseln benötige und damit arbeiten möchte.

3. Object.values() – wenn nur Werte benötigt werden

Manchmal interessieren uns nur die Werte der Eigenschaften, ohne die Schlüssel. Zum Beispiel zum Summieren oder Anzeigen von Daten.

const values = Object.values(user);\nconsole.log(values); // ['Anna', 28, 'Moskau', false]\n\nvalues.forEach(value => {\n  console.log(value);\n});

Die Methode wurde in ES2017 eingeführt und eignet sich hervorragend für die Arbeit mit Datensammlungen, bei denen die Schlüssel keine Rolle spielen.

4. Object.entries() – der König unter den Methoden

Object.entries() gibt ein Array von Arrays zurück, wobei jedes innere Array ein Paar [Schlüssel, Wert] ist. Dies ist ein universelles Werkzeug zum Durchlaufen eines Objekts in JavaScript.

const entries = Object.entries(user);\nconsole.log(entries);\n// [\n//   ['name', 'Anna'],\n//   ['age', 28],\n//   ['city', 'Moskau'],\n//   ['isAdmin', false]\n// ]\n\nentries.forEach(([key, value]) => {\n  console.log(`${key}: ${value}`);\n});

Beachten Sie die Destrukturierung in den Parametern von forEach: ([key, value]). Dies macht den Code sauber und prägnant.

Wann verwenden:

\n
• Wenn sowohl Schlüssel als auch Werte benötigt werden
\n
• Wenn Sie ein Objekt in eine andere Struktur umwandeln möchten (z. B. in eine Map)
\n
• Wenn Sie eine funktionale