Warum zeigt „console.log' nach der Änderung unerwartete Objektwerte an?

Objekte und Console.log: Eine enträtselte Kuriosität

Bei der Arbeit mit Objekten und console.log kann es zu seltsamem Verhalten kommen. Lassen Sie uns dieses Rätsel lösen, indem wir dieses Code-Snippet analysieren:

foo = [{id: 1},{id: 2},{id: 3},{id: 4}, {id: 5}, ];
console.log('foo1', foo, foo.length);
foo.splice(2, 1);
console.log('foo2', foo, foo.length);

In Chrome erzeugt dies die unerwartete Ausgabe:

foo1 
[Object, Object, Object, Object, Object]  5
    0: Object
    1: Object
    2: Object
    3: Object
    length: 4
    __proto__: Array[0]
     5 (index):23
foo2 
[Object, Object, Object, Object]  4
    0: Object
    1: Object
    2: Object
    3: Object
    length: 4
    __proto__: Array[0]

The Asynchronous Examination

Der Schlüssel zum Verständnis dieses Verhaltens liegt in der asynchronen Natur der Objektprüfung über console.log. Während die Konsole synchron einen Verweis auf das Objekt empfängt, zeigt sie dessen Eigenschaften erst an, wenn Sie es manuell erweitern.

Die Instanzvariable überrascht

Wenn Sie ein Objekt erweitern Nachdem es geändert wurde, sehen Sie die aktualisierten Werte anstelle des Originalzustands. Dies geschieht asynchron und führt zu einer scheinbar unlogischen Ausgabe.

Debugging-Techniken

Um diese Inkonsistenz zu vermeiden, ziehen Sie die folgenden Debugging-Techniken in Betracht:

• Einzelwerte protokollieren: Die Eigenschaften des Objekts separat protokollieren (z. B. console.log(obj.foo, obj.bar, obj.baz);)
• JSON-Kodierung: Verwandeln Sie das Objekt in einen String mit JSON.stringify(obj)
• Intelligentes Deep Copy: Verwenden Sie eine maßgeschneiderte Deep Copy-Funktion, um nicht serialisierbare Eigenschaften und Zirkelverweise bei der JSON-Codierung beizubehalten (z. B. console.log(JSON.parse(JSON.stringify(obj)));)

Das obige ist der detaillierte Inhalt vonWarum zeigt „console.log' nach der Änderung unerwartete Objektwerte an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!