Maison >interface Web >js tutoriel >Pourquoi « console.log » affiche-t-il des valeurs d'objet inattendues après une modification ?

Pourquoi « console.log » affiche-t-il des valeurs d'objet inattendues après une modification ?

Linda Hamilton
Linda Hamiltonoriginal
2024-12-25 16:22:13848parcourir

Why Does `console.log` Show Unexpected Object Values After Modification?

Objets et Console.log : une bizarrerie dévoilée

Lorsque vous travaillez avec des objets et console.log, vous pouvez rencontrer un comportement particulier. Dévoilons ce mystère en analysant cet extrait de 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);

Dans Chrome, cela produit le résultat inattendu :

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]

L'examen asynchrone

La clé pour comprendre ce comportement réside dans la nature asynchrone de l'examen des objets via console.log. Bien que la console reçoive une référence à l'objet de manière synchrone, elle n'affiche pas ses propriétés tant que vous ne l'avez pas développé manuellement.

La surprise de la variable d'instance

Lorsque vous développez un objet une fois modifié, vous voyez les valeurs mises à jour au lieu de l'état d'origine. Cela se produit de manière asynchrone, conduisant à une sortie apparemment illogique.

Techniques de débogage

Pour éviter cette incohérence, envisagez ces techniques de débogage :

  • Enregistrer les valeurs individuelles : Enregistrer les propriétés de l'objet séparément (par exemple, console.log(obj.foo, obj.bar, obj.baz);)
  • Encodage JSON : Transformez l'objet en chaîne à l'aide de JSON.stringify(obj)
  • Copie approfondie intelligente : Utilisez une fonction de copie approfondie sur mesure pour préserver les propriétés non sérialisables et les références circulaires lors de l'encodage JSON. (par exemple, console.log(JSON.parse(JSON.stringify(obj)));)

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!

Déclaration:
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