Heim >Web-Frontend >js-Tutorial >Warum zeigt „console.log' asynchrones Objektverhalten an?

Warum zeigt „console.log' asynchrones Objektverhalten an?

Barbara Streisand
Barbara StreisandOriginal
2024-12-20 03:28:14115Durchsuche

Why Does `console.log` Show Asynchronous Object Behavior?

Asynchrones Verhalten von Objekten in Console.log

Beim Untersuchen von Objekten mithilfe von console.log ist es wichtig, sich seiner asynchronen Natur bewusst zu sein. Die Konsole empfängt synchron eine Objektreferenz, zeigt ihre Eigenschaften jedoch nur an, wenn sie erweitert ist. Dies kann zu Unstimmigkeiten führen, wenn das Objekt vor der Untersuchung geändert wird.

Bedenken Sie den folgenden 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);

In Chrome erzeugt dies die folgende 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]

Zunächst erhält console.log eine Referenz auf das Objekt foo. Die Eigenschaften werden jedoch später angezeigt, nachdem das Objekt durch foo.splice(2, 1) geändert wurde. Daher zeigt die Ausgabe die aktualisierten Werte.

Um dieses Problem zu mildern, gibt es mehrere alternative Protokollierungsansätze:

  • Einzelne Objektwerte protokollieren:
console.log(foo.id, foo.name, foo.age);
  • JSON-kodieren Sie das Objekt als string:
console.log(JSON.stringify(foo));
  • JSON kodiert das Objekt neu, um die Prüfbarkeit zu gewährleisten:
console.log(JSON.parse(JSON.stringify(foo)));

Diese Methoden Stellen Sie sicher, dass die protokollierte Ausgabe den Zustand des Objekts zum Zeitpunkt der Protokollierung widerspiegelt.

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

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn