JavaScript Object.keys, values, entries

Über Objekte in JavaScript iterieren

Einfache Objekte sind die bevorzugte Datenstruktur für Schlüssel-Wert-Paare in JavaScript, aber im Gegensatz zu Arrays sind Objekte nicht direkt iterierbar — sie lassen sich weder mit for...of durchlaufen noch direkt an Array-Methoden wie map und filter übergeben. Um diese Lücke zu schließen, stellt JavaScript drei Hilfsmethoden bereit, die die eigenen Eigenschaften eines Objekts in ein reguläres Array umwandeln:

• Object.keys(obj) — ein array der Eigenschaftsnamen.
• Object.values(obj) — ein array der Eigenschaftswerte.
• Object.entries(obj) — ein array von [key, value]-Paaren.

Sobald eine Eigenschaftsliste ein array ist, stehen alle Array-Werkzeuge zur Verfügung. Eine vierte Methode, Object.fromEntries, kehrt den Prozess um und baut aus einer Liste von Paaren wieder ein object auf. Diese Seite behandelt jede Methode, wie man mit for...of und Destructuring sauber iteriert, die Regeln zur Bestimmung der Eigenschaftsreihenfolge und wie sich diese Methoden von den entsprechenden Methoden einer Map unterscheiden.

Alle drei Methoden geben nur die eigenen (nicht geerbten) und aufzählbaren string-basierten Eigenschaften des Objekts zurück. Geerbte Prototyp-Eigenschaften und Symbol-Schlüssel werden übersprungen.

Object.keys verstehen

Object.keys(obj) gibt ein array der eigenen aufzählbaren Eigenschaftsnamen eines Objekts zurück. Dies ist nützlich, wenn man Eigenschaften zählen, prüfen möchte, ob ein Schlüssel existiert, oder über die Schlüssel iterieren möchte.

Verwendungsbeispiel für Object.keys

---

Object.values erkunden

Object.values(obj) gibt ein array der eigenen aufzählbaren Eigenschaftswerte eines Objekts zurück, in derselben Reihenfolge wie die von Object.keys zurückgegebenen Schlüssel.

Verwendungsbeispiel für Object.values

---

Object.entries nutzen

Object.entries(obj) gibt ein array der eigenen aufzählbaren string-basierten [key, value]-Paare eines Objekts zurück. Es ist die flexibelste der drei Methoden, da jedes Element beide Informationen enthält.

Verwendungsbeispiel für Object.entries

---

Iterieren mit for...of und Destructuring

Da Object.entries ein array zurückgibt, kann man es mit for...of durchlaufen und jedes Paar mithilfe von Destructuring entpacken. Dies ist die sauberste und lesbarste Methode, um über die Eigenschaften eines Objekts zu iterieren:

---

Man kann auch nur über Schlüssel oder Werte iterieren:

---

Tipp: for...of über Object.entries ist einem einfachen for...in-Loop vorzuziehen, da for...in auch geerbte aufzählbare Eigenschaften aus der Prototypenkette durchläuft, während Object.entries das nicht tut.

Objekte mit Object.fromEntries transformieren

Object.fromEntries kehrt Object.entries um: Es nimmt eine Liste von [key, value]-Paaren und baut daraus ein object auf. Zusammen bilden sie einen Rundtrip — ein object in Paare umwandeln, die Paare mit Array-Methoden transformieren und anschließend wieder in ein object zurückwandeln.

Beispiel: Hin- und Rückkonvertierung

---

Object.fromEntries akzeptiert auch beliebige Iterables von Paaren — einschließlich einer Map — und ist damit ein schneller Weg, eine Map in ein einfaches object umzuwandeln. Mehr über Maps erfahren Sie unter Map und Set. Es ermöglicht eine nahtlose Konvertierung zwischen array- und object-Strukturen und sorgt so für eine flexiblere Datenverarbeitung.

Regeln zur Eigenschaftsreihenfolge

Die Reihenfolge der von diesen Methoden zurückgegebenen Schlüssel ist nicht willkürlich — JavaScript folgt einer definierten Regel:

1. Ganzzahlartige Schlüssel (Schlüssel, die wie nicht-negative ganze Zahlen aussehen, z. B. "1", "42") kommen zuerst, in aufsteigender numerischer Reihenfolge sortiert.
2. String-Schlüssel folgen in der Reihenfolge, in der sie eingefügt wurden.
3. Symbol-Schlüssel kommen zuletzt (diese Methoden ignorieren Symbole jedoch ohnehin).

Dieses Verhalten — „ganzzahlartige Schlüssel werden sortiert" — überrascht viele Entwickler:

---

Wenn die Einfügereihenfolge bei numerischen Schlüsseln erhalten bleiben soll, mache die Schlüssel nicht-ganzzahlartig — zum Beispiel durch ein vorangestelltes +, sodass sie nicht mehr als ganzzahlartig gelten:

---

Unterschied zu den Methoden von Map

Eine Map verfügt ebenfalls über keys()-, values()- und entries()-Methoden, die sich jedoch in zwei wichtigen Punkten von den statischen Object.*-Versionen unterscheiden:

• Syntax: Map-Methoden werden auf der Instanz aufgerufen — map.keys() — während object-Methoden statisch sind und das object als Argument entgegennehmen — Object.keys(obj).
• Rückgabetyp: Map-Methoden geben einen Iterator zurück (man kann ihn mit for...of durchlaufen, aber er ist kein array). Object.*-Methoden geben immer ein echtes array zurück, sodass Array-Methoden wie map, filter und reduce sofort verfügbar sind.

---

Eine Map bewahrt außerdem die Einfügereihenfolge für alle Schlüssel (einschließlich numerischer) und erlaubt Schlüssel jedes Typs, während einfache Objekte Schlüssel in strings umwandeln und ganzzahlartige Schlüssel sortieren. Wenn die Iterationsreihenfolge oder Nicht-string-Schlüssel wichtig sind, ist eine Map vorzuziehen.

Fortgeschrittene Techniken zur Objektbearbeitung

Objekteigenschaften filtern

Die Kombination von Array-Methoden mit Object.entries und Object.fromEntries ermöglicht leistungsstarke Transformationen — beispielsweise das Behalten nur der Eigenschaften, die einen Test bestehen.

Filterbeispiel

---

Objekteigenschaften abbilden

Ebenso ermöglicht Object.entries in Kombination mit map die Transformation jedes Werts (oder Schlüssels) und den anschließenden Wiederaufbau des Objekts.

Mapping-Beispiel

---

Fazit

Object.keys, Object.values und Object.entries sind die Brücke zwischen einfachen Objekten und der umfangreichen Sammlung an Array-Werkzeugen in JavaScript, während Object.fromEntries den Kreis schließt, indem Paare wieder in Objekte umgewandelt werden. Zusammen mit for...of und Destructuring machen sie das Iterieren, Filtern und Transformieren von Objektdaten sauber und lesbar. Behalte die Regeln zur Eigenschaftsreihenfolge im Hinterkopf und greife auf eine Map zurück, wenn garantierte Einfügereihenfolge oder Nicht-string-Schlüssel benötigt werden.

Übungen