Seltsames Verhalten mit Objekten und console.log [duplicate]

Lesezeit: 3 Minuten

Seltsames Verhalten mit Objekten und consolelog duplicate
Dan-Klasse

Dieser Code:

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);

Erzeugt die folgende Ausgabe in Chrome:

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]

Geige: http://jsfiddle.net/2kpnV/

Warum ist das so?

  • Siehe auch console.log() async oder sync?

    – Bergi

    14. Februar 2020 um 21:30 Uhr

  • @Bergi Hätten Sie einen starken Einwand dagegen, die verknüpfte Frage in ein Duplikat dieser Frage umzuwandeln und nicht umgekehrt? Ich denke, die oberste Antwort hier ist deutlich besser. (Prägnante, empfohlene Methode, die die tiefe Objektstruktur ordnungsgemäß protokolliert.) Antwort-Stimmen pro Frage-Stimme und pro Besucher scheinen ebenfalls zu stimmen. Ich würde mich freuen, bei Bedarf über Meta für längere Diskussionen und Beiträge von anderen zu sprechen

    – Bestimmte Leistung

    23. Februar 2020 um 7:30 Uhr

  • @CertainPerformance Das aktuelle Canonical ist älter, hat einen besseren Titel und einen besseren Fragetext (mit einfachem Beispiel und einschließlich Screenshot). Ich stimme zu, dass die akzeptierte Antwort hier eine bessere Erklärung und eine Lösung gibt (obwohl keine Lösung für Arrays, um die es in diesen Fragen geht). Wie würden Sie sich fühlen, wenn Sie die Fragen zusammenführen würden?

    – Bergi

    23. Februar 2020 um 16:03 Uhr

  • @Bergi Nein, nicht zusammenführen. Der Titel der Frage ist nicht großartig, aber genau der Titel bringt Benutzer zu dieser Frage. Der Link zu der anderen doppelten Frage ist in Ordnung.

    – dan-classon

    23. Februar 2020 um 19:07 Uhr

Seltsames Verhalten mit Objekten und consolelog duplicate
zzzzov

Untersuchung von Objekten über console.log geschieht asynchron. Die Konsole empfängt synchron einen Verweis auf das Objekt, zeigt die Eigenschaften des Objekts jedoch erst an, wenn es erweitert wird (in einigen Fällen abhängig vom Browser und davon, ob Sie Entwicklungstools geöffnet haben, wenn das Protokoll ausgeführt wird). Wenn das Objekt geändert wurde, bevor es in der Konsole untersucht wurde, weisen die angezeigten Daten die aktualisierten Werte auf.

Zum Beispiel zeigt Chrome ein wenig i in einer Box, die, wenn man darüber schwebt, sagt:

Der Objektwert links wurde beim Protokollieren aufgenommen, der Wert unten wurde gerade ausgewertet.

damit Sie wissen, was Sie gerade sehen.

Ein Trick für das Logging in diesen Fällen ist, die einzelnen Werte zu loggen:

console.log(obj.foo, obj.bar, obj.baz);

Oder codieren Sie die Objektreferenz in JSON:

console.log(JSON.stringify(obj));

  • Wie in einer anderen Antwort angegeben, JSON.parse(JSON.stringify(obj)) Möglicherweise ist es viel besser, das Protokoll als JSON-Objekt anstelle einer Zeichenfolge anzuzeigen

    – Yasin Okumus

    7. April 2017 um 12:51 Uhr


  • oder: console.log( Object.assign({}, obj) ); – Dadurch wird eine neue Kopie des Objekts erstellt.

    – cimak

    21. Juli 2017 um 11:59 Uhr

  • Was ist der Grund dafür, dass Chrome dies tut, anstatt den Wert so anzuzeigen, wie er zum Zeitpunkt der Protokollierung war? Wäre das nicht sinnvoller?

    – BSG

    31. Mai 2018 um 4:53 Uhr

  • @cimak, aus irgendeinem Grund bekomme ich immer noch ein Objekt, das bei der Verwendung die letzten Werte seiner Eigenschaften anzeigt console.log(Object.assign({}, obj)). Verwenden console.log( JSON.parse(JSON.stringify(obj)) ) zeigt die Werte zum Zeitpunkt der Ausgabe.

    – Petrus

    3. Oktober 2018 um 14:03 Uhr

  • @Peter – ich habe mich teilweise geirrt, Object.assign funktioniert nur für Objekte, die nur primitive Werte enthalten (weil Object.assign erstellt eine flache Kopie, keine tiefe Kopie). Wenn obj ein anderes Objekt enthalten, dann wird der Wert dieses verschachtelten Objekts separat “ausgewertet”.

    – cimak

    3. Oktober 2018 um 16:50 Uhr


Seltsames Verhalten mit Objekten und consolelog duplicate
Latpfote

Neu definieren console.log wird das Problem lösen.

var originalLog = console.log;
console.log = function(obj) {
    originalLog(JSON.parse(JSON.stringify(obj)));
};

  • Es ist nicht so nützlich, weil es in der Konsole die Nummer der Zeile anzeigt, in der diese Funktion definiert ist, anstelle der tatsächlichen Zeile, in der ich console.log aufrufe

    – Avael Kross

    4. September 2017 um 10:28 Uhr

981010cookie-checkSeltsames Verhalten mit Objekten und console.log [duplicate]

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy