Wie man “[object Object]” in JavaScript behebt (Beste Methoden zur Anzeige von Objekten)

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Einführung

Beim Erstellen von Programmen in JavaScript kann es vorkommen, dass Sie beim Versuch, ein Objekt anzuzeigen, die Zeichenkette „[object Object]“ sehen. Dies ist eine häufige Situation, die auftritt, wenn JavaScript‑Objekte direkt ohne Formatierung ausgegeben werden.

In diesem Artikel erklären wir, was „[object Object]“ tatsächlich bedeutet und wie man den Inhalt eines Objekts lesbar darstellen kann.

Dieser Leitfaden richtet sich an Anfänger bis hin zu fortgeschrittenen Entwicklern und enthält praktische Beispiele sowie Code‑Snippets, um das Thema tiefer zu verstehen.

2. Was ist ‚[object Object]‘?

In JavaScript führt der Versuch, ein Objekt in eine Zeichenkette zu konvertieren, häufig zu „[object Object]“. Diese Ausgabe stellt Typinformationen über den Wert dar, zeigt jedoch nicht den eigentlichen Inhalt des Objekts.

Warum erscheint ‚[object Object]‘?

JavaScript‑Objekte besitzen eine standardmäßige toString()‑Methode. Diese Methode wird aufgerufen, sobald ein Objekt als Zeichenkette behandelt wird. Laut der JavaScript‑Standard‑Spezifikation geben Objekte jedoch standardmäßig das folgende Format zurück, wenn sie in eine Zeichenkette konvertiert werden.

console.log({}); // Output: [object Object]

Dieses Verhalten zeigt nur die Typinformation als „object“ und enthält keine Details zu Schlüsseln oder Werten im Objekt. Deshalb müssen Entwickler andere Methoden verwenden, um Objektdaten korrekt zu untersuchen und anzuzeigen.

3. Warum ‚[object Object]‘ erscheint

Die Rolle der toString()-Methode

Alle JavaScript‑Objekte erben die Object.prototype.toString()‑Methode. Diese Methode wird automatisch aufgerufen, wenn ein Objekt in eine Zeichenkette konvertiert wird.

Um das Standardverhalten zu bestätigen, schauen Sie sich den folgenden Code an:

const obj = { key: "value" };
console.log(obj.toString()); // Output: [object Object]

Wie Sie sehen können, gibt toString() standardmäßig für einfache Objekte „[object Object]“ zurück.

Beispiele, die durch implizite Typumwandlung entstehen

Das gleiche Verhalten tritt auf, wenn ein Objekt mit einer Zeichenkette verkettet wird.

const obj = { key: "value" };
console.log("Data: " + obj); // Output: Data: [object Object]

In diesem Beispiel wird obj in eine Zeichenkette konvertiert und toString() intern aufgerufen – was die Ausgabe „[object Object]“ erzeugt.

4. Wie man ‚[object Object]‘ vermeidet

4.1. Objekte mit JSON.stringify() in Zeichenketten umwandeln

Der einfachste und gebräuchlichste Ansatz ist die Verwendung von JSON.stringify(), um ein Objekt in eine JSON‑formatierte Zeichenkette zu konvertieren.

Beispiel: Grundlegende Verwendung von JSON.stringify

const obj = { key: "value", id: 123 };
console.log(JSON.stringify(obj)); // Output: {"key":"value","id":123}

In diesem Code werden die Schlüssel und Werte des Objekts korrekt im JSON‑Format angezeigt.

Schönes Ausgeben (mit Einrückungen)

Sie können auch formatiertes JSON mit Einrückungen ausgeben, um die Lesbarkeit zu verbessern.

console.log(JSON.stringify(obj, null, 2));

Ausgabe:

{
  "key": "value",
  "id": 123
}

Da JSON.stringify() komplexe Objekte und verschachtelte Strukturen sauber formatieren kann, ist es äußerst nützlich zum Debuggen.

4.2. Objekte detailliert mit console.dir() untersuchen

Mit console.dir() können Sie die Eigenschaften und Methoden eines Objekts in einer hierarchischen Struktur untersuchen.

Beispiel: Verwendung von console.dir

const obj = { key: "value", nested: { a: 1, b: 2 } };
console.dir(obj);

Diese Ausgabe wird in einem Format dargestellt, das es ermöglicht, die Objektstruktur in den DevTools zu erweitern und zu untersuchen.

Unterschied zwischen console.dir und console.log:

• console.log(obj) zeigt das Objekt in einer einzeiligen Darstellung, was für die Untersuchung komplexer Strukturen nicht ideal ist.
• console.dir(obj) bewahrt die hierarchische Struktur, was es für verschachtelte Objekte und Arrays nützlich macht.

4.3. Eine benutzerdefinierte toString()-Methode implementieren

Sie können die standardmäßige „[object Object]“-Ausgabe anpassen, indem Sie eine eigene toString()‑Methode für ein Objekt definieren.

Beispiel: Benutzerdefinierte toString‑Implementierung

const obj = {
  key: "value",
  id: 123,
  toString() {
    return `Key: ${this.key}, ID: ${this.id}`;
  },
};
console.log(obj.toString()); // Output: Key: value, ID: 123

Mit diesem Ansatz, wenn das Objekt als Zeichenkette behandelt wird, gibt es Ihr benutzerdefiniertes Format anstelle des Standardwerts aus.

4.4. Objektinhalte mit einer for…in‑Schleife ausgeben

Eine weitere Möglichkeit besteht darin, die Schlüssel und Werte eines Objekts zu durchlaufen und sie manuell auszugeben.

Beispiel: Verwendung einer for…in‑Schleife

const obj = { key: "value", id: 123 };
for (const key in obj) {
  console.log(`${key}: ${obj[key]}`);
}

Ausgabe:

key: value
id: 123

Dieser Ansatz ist einfach und leicht anzupassen, wodurch er sich gut für die schnelle Inspektion kleiner Objekte eignet.

4.5. Verwenden von Object.entries() oder Object.keys()

Ab ES6 stellt JavaScript Methoden bereit, um Schlüssel und Werte als Arrays zu extrahieren.

Beispiel: Verwendung von Object.entries

const obj = { key: "value", id: 123 };
console.log(Object.entries(obj));

Ausgabe:

[ [ 'key', 'value' ], [ 'id', 123 ] ]

Indem Sie Schlüssel‑Wert‑Paare als Arrays erhalten, können Sie Array‑Methoden für die weitere Verarbeitung nutzen.

5. Fortgeschrittene Beispiele: Anzeige komplexer Objekte und Arrays

5.1. Anzeige verschachtelter Objekte

Wenn ein Objekt andere Objekte enthält, schauen wir uns eine einfache Möglichkeit an, die Inhalte klar darzustellen.

Beispiel: Anzeige eines verschachtelten Objekts

const data = {
  user: {
    name: "John",
    age: 30,
    address: {
      city: "Tokyo",
      country: "Japan",
    },
  },
  hobbies: ["reading", "traveling"],
};

console.log(JSON.stringify(data, null, 2));

Ausgabe:

{
  "user": {
    "name": "John",
    "age": 30,
    "address": {
      "city": "Tokyo",
      "country": "Japan"
    }
  },
  "hobbies": [
    "reading",
    "traveling"
  ]
}

Wie oben gezeigt, erleichtert die Verwendung von JSON.stringify() die Struktur verschachtelter Objekte zu verstehen.

5.2. Anzeige von Objekten, die Arrays enthalten

Wenn ein Objekt ein Array enthält, können Sie es auf ähnliche Weise behandeln.

Beispiel: Anzeige eines Objekts mit einem Array

const order = {
  id: 101,
  items: [
    { name: "Apple", price: 150 },
    { name: "Banana", price: 100 },
    { name: "Cherry", price: 200 },
  ],
  total: 450,
};

console.table(order.items);

Ausgabe:

In diesem Beispiel zeigt console.table() Array‑Elemente im Tabellenformat an. Das erleichtert die visuelle Inspektion der Datenstruktur und verbessert die Debugging‑Effizienz.

5.3. Umgang mit Objekten mit zirkulären Referenzen

In JavaScript führt ein zirkulärer Verweis in einem Objekt dazu, dass die direkte Verwendung von JSON.stringify() einen Fehler auslöst.

Beispiel: Fehler bei zirkulärer Referenz

const objA = {};
const objB = { a: objA };
objA.b = objB;

console.log(JSON.stringify(objA)); // TypeError: Converting circular structure to JSON

In diesem Fall können Sie das Problem lösen, indem Sie eine Drittanbieter‑Bibliothek verwenden oder eine benutzerdefinierte Funktion implementieren, um zirkuläre Referenzen zu verarbeiten.

Lösungsbeispiel: Verwendung der flatted‑Bibliothek

const { stringify } = require("flatted");

console.log(stringify(objA));

Dieser Ansatz ermöglicht es Ihnen, Objekte, die zirkuläre Referenzen enthalten, sicher zu stringifizieren.

5.4. Nur Schlüssel aus Objekten oder Arrays erhalten

Beim Erkunden einer Datenstruktur kann es auch nützlich sein, nur die Schlüssel oder Werte zu extrahieren und anzuzeigen.

Eine Liste von Schlüsseln erhalten:

const obj = { id: 101, name: "Alice", age: 25 };
console.log(Object.keys(obj)); // Output: [ 'id', 'name', 'age' ]

Eine Liste von Werten erhalten:

console.log(Object.values(obj)); // Output: [ 101, 'Alice', 25 ]

Schlüssel‑Wert‑Paare erhalten:

console.log(Object.entries(obj)); // Output: [ [ 'id', 101 ], [ 'name', 'Alice' ], [ 'age', 25 ] ]

Diese Methoden sind hilfreich, um Daten zu analysieren und spezifische Informationen effizient zu extrahieren.

6. Häufige Fehler und Lösungen

6.1. Kreisreferenz‑Fehler: „Converting circular structure to JSON“

Fehlermeldung:

TypeError: Converting circular structure to JSON

Ursache:
Dies geschieht, wenn eine Objekteigenschaft dasselbe Objekt erneut referenziert und dadurch eine Kreisstruktur entsteht.

Beispiel:

const objA = {};
const objB = { parent: objA };
objA.child = objB;

console.log(JSON.stringify(objA)); // Error occurs

Lösung 1: Verwenden einer benutzerdefinierten Serialisierungsfunktion

function safeStringify(obj) {
  const seen = new WeakSet();
  return JSON.stringify(obj, (key, value) => {
    if (typeof value === "object" && value !== null) {
      if (seen.has(value)) return "[Circular]";
      seen.add(value);
    }
    return value;
  });
}

console.log(safeStringify(objA)); 
// Output: {"child":{"parent":"[Circular]"}}

Lösung 2: Verwenden einer Drittanbieter‑Bibliothek

Wenn Sie eine Bibliothek verwenden, die für Kreisreferenzen entwickelt wurde, wie z. B. flatted, können Sie diesen Fehler leichter vermeiden.

const { stringify } = require("flatted");
console.log(stringify(objA));

Dieser Ansatz ermöglicht es Ihnen, komplexe Kreisstrukturen mithilfe einer Bibliothek sicher zu verarbeiten.

6.2. Fehler beim Umgang mit undefined oder null

Fehlerbeispiel:

const obj = undefined;
console.log(obj.key); // TypeError: Cannot read properties of undefined

Ursache:
Der Versuch, auf eine Eigenschaft von undefined oder null zuzugreifen, führt zu einem Fehler.

Lösung: Optionalen Verkettungsoperator verwenden

const obj = undefined;
console.log(obj?.key); // Output: undefined (no error)

Optionaler Verkettungsoperator (?.) ermöglicht einen sicheren Zugriff, selbst wenn das Objekt nicht existiert.

6.3. Fehler bei undefinierter Eigenschaft

Fehlerbeispiel:

const obj = {};
console.log(obj.value.toString()); // TypeError: Cannot read properties of undefined

Ursache:
Dies tritt auf, wenn Sie versuchen, auf eine nicht vorhandene Eigenschaft zuzugreifen.

Lösung 1: Einen Standardwert festlegen

console.log((obj.value || "default").toString()); // Output: default

Lösung 2: Optionalen Verkettungsoperator und Nullish Coalescing kombinieren

console.log(obj.value?.toString() ?? "default"); // Output: default

Damit wird der Zugriff auf Eigenschaften sicherer und verhindert Laufzeitfehler.

6.4. Fehler bei der Verwendung von Object.assign()

Fehlerbeispiel:

const target = null;
Object.assign(target, { key: "value" }); // TypeError: Cannot convert undefined or null to object

Ursache:
Object.assign() erfordert ein Objekt als erstes Argument; das Übergeben von null oder undefined führt zu einem Fehler.

Lösung:
Übergeben Sie ein leeres Objekt als Anfangswert.

const target = Object.assign({}, { key: "value" });
console.log(target); // Output: { key: "value" }

6.5. JSON.parse‑Fehler: „Unexpected token“

Fehlerbeispiel:

const jsonString = "{key: 'value'}";
console.log(JSON.parse(jsonString)); // SyntaxError: Unexpected token k in JSON

Ursache:
JSON hat strenge Syntaxregeln. Die Verwendung von einfachen Anführungszeichen oder das Weglassen von Anführungszeichen um Schlüssel macht das JSON ungültig.

Lösung:
Korrigieren Sie die Zeichenkette zu einem gültigen JSON‑Format.

const jsonString = '{"key": "value"}';
console.log(JSON.parse(jsonString)); // Output: { key: 'value' }

7. Zusammenfassung

In diesem Artikel haben wir das häufige Anzeigeproblem „[object Object]“ in JavaScript behandelt, einschließlich der Ursachen und praktischer Lösungen. Lassen Sie uns die wichtigsten Punkte noch einmal durchgehen und das Gelernte zusammenfassen.

7.1. Was „[object Object]“ wirklich bedeutet

• JavaScript‑Objekte werden standardmäßig mit der toString() ‑Methode in Zeichenketten umgewandelt.
• Infolgedessen werden einfache Objekte im Format „[object Object]“ angezeigt.

7.2. Wie man Objektinhalte korrekt anzeigt

Wir haben mehrere praktische Ansätze vorgestellt, um Objektdaten klarer zu inspizieren und anzuzeigen.

1. JSON.stringify() zum Konvertieren von Objekten in lesbare Zeichenketten:

• Zeigt Objekte im JSON‑Format an und unterstützt Pretty‑Printing (formatierte Ausgabe).

1. console.dir() zur hierarchischen Objektinspektion:

• Ermöglicht es Ihnen, detaillierte Objektstrukturen visuell in den DevTools zu erkunden.

1. Implementierung einer benutzerdefinierten toString()‑Methode:

• Erlaubt Ihnen, ein eigenes Anzeigeformat für Objekte zu definieren.

1. Verwendung von Schleifen und Object.entries():

• Extrahiert Schlüssel und Werte, um sie manuell auszugeben.

7.3. Fortgeschrittene Anwendungsfälle und Umgang mit komplexen Objekten

• Verschachtelte Objekte und Arrays: JSON.stringify() und console.table() helfen, Daten in einem sauberen und lesbaren Format darzustellen.
• Umgang mit zirkulären Referenzfehlern:
• Verwenden Sie benutzerdefinierte Funktionen oder Drittanbieter‑Bibliotheken, um Fehler zu vermeiden.
• Effiziente Datenauswertung:
• Nutzen Sie Object.keys() , Object.values() und Object.entries() , um Informationen effizient abzurufen.

7.4. Fehlervermeidung und Debugging‑Tipps

Wir haben außerdem häufige Fehler im Zusammenhang mit Objektoperationen erklärt und gezeigt, wie man sie behebt.

1. Zirkuläre Referenzfehler:

• Behandeln Sie sie mit benutzerdefinierten Serialisierern oder Bibliotheken.

1. Fehler beim Zugriff auf undefined oder null:

• Verwenden Sie optionale Verkettung und setzen Sie Standardwerte.

1. JSON.parse‑Fehler:

• Stellen Sie sicher, dass der String ein gültiges JSON‑Format hat.

Durch die Anwendung dieser Techniken können Sie Fehler im Vorfeld verhindern und das Debugging deutlich reibungsloser gestalten.

7.5. Abschließende Gedanken

JavaScript‑Objekte sind ein leistungsstarkes Werkzeug, um Daten flexibel zu verwalten. Ohne ein Verständnis dafür, wie Objekte sich verhalten, können jedoch Anzeigeprobleme wie „[object Object]“ oder unerwartete Laufzeitfehler auftreten.

Nutzen Sie die in diesem Artikel vorgestellten Techniken und Fehlerbehandlungsstrategien, um saubereren, sichereren und effizienteren Code zu schreiben.

Nächste Schritte:

• Vertiefen Sie Ihr Verständnis der Objektverarbeitung, indem Sie verwandte Artikel und die offizielle Dokumentation prüfen.
• Schreiben und führen Sie echten Code aus, um das Verhalten zu bestätigen und Ihre Fähigkeiten zu stärken.

Damit ist unsere Erklärung des JavaScript‑Objektanzeigeproblems abgeschlossen. Danke fürs Lesen!