JavaScript-Objekte und warum du [object Object] siehst
Anleitung zu JavaScript-Objekten
JavaScript-Objekte: Keys, Kopien und [object Object] behoben | We.Inc
Erstelle, lies, durchlaufe und kopiere JavaScript-Objekte und finde heraus, warum deine Seite [object Object] ausgibt und wie du den echten Wert anzeigst. Füge beliebiges JSON ein, um es live zu untersuchen.
Ein JavaScript-Objekt ist eine Sammlung benannter Werte, geschrieben als { key: value }. Einen Wert liest du mit obj.key oder obj['key'], Keys listest du mit Object.keys und Paare mit Object.entries. Der Text [object Object] erscheint, wenn ein Objekt in einen String umgewandelt wird; verwende JSON.stringify(obj), um seinen Inhalt auszugeben.
Objekte sind die Form, in der fast jede API-Antwort, Konfigurationsdatei und React-Prop ankommt. Diese Anleitung behandelt die paar Operationen, die du täglich nutzt, und dann die zwei klassischen Überraschungen: [object Object], das auf der Seite oder in einem Alert auftaucht, und eine Kopie, die heimlich ihre verschachtelten Daten mit dem Original teilt.
Füge im Inspektor JSON ein oder bearbeite es. Es wird in deinem Browser mit JSON.parse geparst.
Jede Zeile zeigt einen gängigen Weg, das Objekt in Text oder eine Liste umzuwandeln, einschließlich desjenigen, der [object Object] erzeugt.
Ändere im Kopier-Experiment einen verschachtelten Wert an einer Spread-Kopie und an einer structuredClone-Kopie und sieh, welche davon auf das Original durchschlägt.
Die Codebeispiele unten kannst du direkt in deinen Editor oder die Browser-Konsole einfügen.
Um ein Objekt in der Konsole zu sehen, gib es allein mit console.log(obj) oder console.table(obj) aus. Wenn du es mit + an einen String hängst, wird es zu [object Object] plattgedrückt.
Object.keys gibt Keys als Strings zurück, auch bei Keys, die wie Zahlen aussehen, und ganzzahlige Keys kommen in aufsteigender Reihenfolge vor den übrigen.
JSON.stringify überspringt Eigenschaften, deren Wert undefined, eine Funktion oder ein Symbol ist, und wirft bei zirkulären Referenzen einen TypeError.
Verwende Object.hasOwn(obj, key), um zu prüfen, ob das Objekt selbst einen Key hat; der Operator in berücksichtigt auch geerbte Eigenschaften.
Häufige Fragen
Warum gibt mein Code [object Object] aus?
Etwas hat das Objekt in einen String umgewandelt: ein + mit Text, ein Template-Literal, ein Alert, element.textContent oder innerText. Das Standard-toString für einfache Objekte gibt den festen Text [object Object] zurück. Gib stattdessen JSON.stringify(obj) aus oder wähle die gemeinte Eigenschaft, etwa obj.name.
Wie durchlaufe ich ein Objekt in JavaScript?
Verwende for (const [key, value] of Object.entries(obj)) { ... }. Ein einfaches Objekt ist nicht iterierbar, daher wirft for...of direkt darauf einen TypeError. for...in funktioniert auch, schließt aber geerbte aufzählbare Keys ein.
Wie kopiere ich ein Objekt, ohne es mit dem Original zu verknüpfen?
Bei einem flachen Objekt reicht { ...obj } oder Object.assign({}, obj). Enthält das Objekt verschachtelte Objekte oder Arrays, verwende structuredClone(obj), das jede Ebene kopiert. Es kommt mit Dates, Maps und Sets zurecht, wirft aber bei Funktionen und DOM-Knoten einen DataCloneError.
Wie wandle ich ein Objekt in ein Array um und zurück?
Object.entries(obj) liefert ein Array aus [key, value]-Paaren. Forme es mit map oder filter um und baue dann mit Object.fromEntries(pairs) wieder ein Objekt. So mappt man üblicherweise über die Werte eines Objekts.
Was ist der Unterschied zwischen einem Objekt und einer Map?
Eine Map akzeptiert jeden Typ als Key, merkt sich die Einfügereihenfolge aller Keys und hat eine size-Eigenschaft. Einfache Objekte verwenden String- oder Symbol-Keys und sind das, was JSON erzeugt. Beachte, dass JSON.stringify eine Map zu {} macht, wandle sie also vorher mit Object.fromEntries(map) um.
Punktnotation oder eckige Klammern
Die Punktnotation ist kürzer und funktioniert, wenn der Key ein gültiger Bezeichner ist, den du beim Schreiben des Codes kennst. Eckige Klammern brauchst du, wenn der Key in einer Variablen steht, ein Leerzeichen oder einen Bindestrich enthält oder mit einer Ziffer beginnt, zum Beispiel headers['content-type'].
Das Lesen eines nicht existierenden Keys liefert undefined statt eines Fehlers. Erst das Lesen einer Eigenschaft dieses undefined wirft einen Fehler, und deshalb ist Optional Chaining (user.address?.city) bei API-Daten so praktisch.
Flache und tiefe Kopien
Spread kopiert nur die oberste Ebene. Das neue Objekt bekommt eigene Plätze, aber wenn ein Platz ein anderes Objekt enthält, zeigen beide Kopien auf dasselbe innere Objekt, und eine Änderung an copy.address.city ändert auch das Original.
structuredClone durchläuft die gesamte Struktur und baut auch neue innere Objekte. Klassen-Prototypen, Getter und Setter bleiben dabei nicht erhalten, daher kommt eine Klasseninstanz als einfaches Objekt mit denselben Daten zurück.
Den echten Wert statt [object Object] anzeigen
Vier Wege, ein Objekt anzuzeigen
Nur die erste Zeile erzeugt [object Object]. Die anderen geben lesbaren Inhalt aus.
Formatiert auf der Seite ausgeben
Ein pre-Element behält die Zeilenumbrüche und Einrückungen bei, die JSON.stringify mit seinem dritten Argument einfügt.
Objekte mit entries und fromEntries umformen
Steuer auf jeden Preis aufschlagen
entries verwandelt das Objekt in Paare, map ändert jeden Wert, fromEntries baut ein neues Objekt.
Spread im Vergleich zu structuredClone
Die Spread-Kopie teilt das innere address-Objekt; der Klon nicht.
Objekt-Inspektor
Bearbeite das JSON und sieh, wie jeder Ansatz es in Text oder eine Liste verwandelt.
Dein Objekt als JSON
Kein gültiges JSON: {v}
Das ist gültiges JSON, aber kein Objekt. Setze es in geschweifte Klammern.
Wege, das Objekt anzuzeigen
Code
Ausgabe
Kopier-Experiment
Ändere die Stadt an einer Kopie und prüfe dann, ob sich das Original ebenfalls geändert hat.