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
Libérer: 2024-12-25 16:22:13
original
778 Les gens l'ont consulté

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

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

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!

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