Länge eines Objekts in JavaScript: Wie man sie ermittelt und den Code nicht kaputt macht

Länge eines Objekts in JavaScript: Warum gibt es kein einfaches .length und was tun?

Haben Sie sich jemals dabei ertappt zu denken: „Warum hat ein Array eine .length-Eigenschaft, ein Objekt aber nicht?“. Wenn ja, sind Sie nicht allein. Die Frage „Length of a JavaScript object“ gehört zu den beliebtesten auf Stack Overflow mit tausenden Aufrufen. Und das ist nicht verwunderlich: Jeder Anfänger versucht früher oder später obj.length zu schreiben und erhält undefined.

In diesem Artikel werden wir verstehen, warum das so ist, und vor allem – wie man die Länge eines Objekts in JavaScript korrekt berechnet. Sie lernen 4 funktionierende Methoden kennen, verstehen, wann Sie welche verwenden, und vergessen für immer die Verwirrung um die Objektlänge.

Warum haben Objekte keine length-Eigenschaft?

Alles liegt in der Natur von Objekten. Ein Array ist eine geordnete Sammlung mit numerischen Indizes. Die JavaScript-Engine kann leicht sagen: „Das Array hat 5 Elemente“. Ein Objekt hingegen ist eine ungeordnete Sammlung von Schlüssel-Wert-Paaren. Theoretisch können Sie eine Eigenschaft hinzufügen, löschen, wieder hinzufügen – und die Reihenfolge ist nicht garantiert (zumindest in älteren Spezifikationen).

Aus diesem Grund haben einfache Objekte kein eingebautes .length. Aber das bedeutet nicht, dass wir es nicht berechnen können. Schauen wir uns an, wie.

Methode Nr. 1: Object.keys() – der Goldstandard

Die beliebteste und empfohlene Methode ist die Verwendung von Object.keys(). Diese Methode gibt ein Array der eigenen (nicht geerbten) aufzählbaren Eigenschaften eines Objekts zurück. Und ein Array hat, wie wir wissen, .length.

const user = {\n  name: 'Anna',\n  age: 28,\n  city: 'Moskau',\n  isAdmin: false\n};\n\nconst length = Object.keys(user).length;\nconsole.log(length); // 4

Genial einfach! Sie erhalten ein Array von Schlüsseln und nehmen dann dessen Länge. Diese Methode funktioniert in allen modernen Browsern und Node.js.

Was ist in Object.keys() enthalten?

Wichtiger Punkt: Object.keys() gibt nur eigene und aufzählbare Eigenschaften zurück. Das bedeutet:

\n
• Eigene – nicht über den Prototyp geerbte. Wenn Sie ein Objekt über eine Klasse erstellt oder eine Methode zum Prototyp hinzugefügt haben, wird diese nicht im Ergebnis erscheinen.
\n
• Aufzählbare – solche, bei denen das Flag enumerable auf true gesetzt ist. Standardmäßig sind alle Eigenschaften, die durch Zuweisung erstellt wurden, aufzählbar. Wenn Sie jedoch Object.defineProperty() mit enumerable: false verwendet haben, wird diese Eigenschaft ignoriert.
\n

Beispiel mit einer nicht aufzählbaren Eigenschaft:

const car = {\n  brand: 'Toyota',\n  model: 'Camry'\n};\n\nObject.defineProperty(car, 'vin', {\n  value: 'JT2BF22KX00000001',\n  enumerable: false\n});\n\nconsole.log(Object.keys(car).length); // 2 (vin wird nicht berücksichtigt)

Methode Nr. 2: Object.values() und Object.entries()

Manchmal benötigen Sie nicht nur die Anzahl der Schlüssel, sondern die Anzahl der Werte oder Paare. Hier helfen Ihnen zwei Zwillingsbrüder:

\n
• Object.values(obj) – gibt ein Array von Werten zurück
\n
• Object.entries(obj) – gibt ein Array von Arrays [Schlüssel, Wert] zurück
\n

Beide geben Arrays zurück, haben also .length:

const book = {\n  title: 'Der Meister und Margarita',\n  author: 'Bulgakow',\n  year: 1966\n};\n\nconsole.log(Object.values(book).length); // 3\nconsole.log(Object.entries(book).length); // 3

Im Grunde ist es die gleiche Anzahl, aber Object.entries() liefert mehr Daten, falls Sie später sowohl Schlüssel als auch Werte benötigen.

Methode Nr. 3: Die for...in-Schleife (und wie man nicht in die Falle tappt)

Eine klassische, aber weniger bequeme Methode ist die Verwendung der for...in-Schleife und das manuelle Zählen der Eigenschaften:

const person = {\n  name: 'Ivan',\n  age: 30\n};\n\nlet count = 0;\nfor (let key in