Maison > interface Web > js tutoriel > Pourquoi « console.log » affiche-t-il le comportement des objets asynchrones ?

Pourquoi « console.log » affiche-t-il le comportement des objets asynchrones ?

Barbara Streisand
Libérer: 2024-12-20 03:28:14
original
162 Les gens l'ont consulté

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

Comportement asynchrone des objets dans Console.log

Lors de l'examen d'objets à l'aide de console.log, il est important d'être conscient de sa nature asynchrone. La console reçoit une référence d'objet de manière synchrone mais affiche ses propriétés uniquement lorsqu'elle est développée. Cela peut entraîner des divergences si l'objet est modifié avant d'être examiné.

Considérez le code suivant :

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);
Copier après la connexion

Dans Chrome, cela produit le résultat suivant :

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]
Copier après la connexion

Initialement, console.log reçoit une référence à l'objet foo. Cependant, les propriétés sont affichées plus tard, après que l'objet a été modifié par foo.splice(2, 1). Par conséquent, la sortie affiche les valeurs mises à jour.

Pour atténuer ce problème, il existe plusieurs approches de journalisation alternatives :

  • Enregistrer les valeurs d'objet individuelles :
console.log(foo.id, foo.name, foo.age);
Copier après la connexion
  • JSON-encode l'objet en tant que string :
console.log(JSON.stringify(foo));
Copier après la connexion
  • JSON réencode l'objet pour maintenir l'inspectabilité :
console.log(JSON.parse(JSON.stringify(foo)));
Copier après la connexion

Ces méthodes assurez-vous que la sortie enregistrée reflète l'état de l'objet au moment de la journalisation.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal