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

Le comportement déroutant des objets et console.log

Lorsque vous utilisez la fonction console.log() pour examiner des objets, vous pouvez rencontrer des problèmes particuliers résultats. Par exemple, si vous enregistrez un tableau d'objets puis le modifiez à l'aide de splice(), vous remarquerez que la console affiche toujours le tableau d'origine.

Pourquoi cela se produit

Console.log inspecte les objets de manière asynchrone. Bien que la console récupère de manière synchrone une référence à l'objet, elle diffère l'affichage de ses propriétés jusqu'à ce que vous l'ayez développé (ce comportement varie selon les navigateurs). Par conséquent, si l'objet est modifié avant l'inspection, les données affichées contiendront les valeurs mises à jour.

Identification de l'écart

Chrome fournit un repère visuel pour vous en avertir comportement. Un petit "i" apparaît dans une case lorsque vous survolez l'objet, affichant ce message : "La valeur de l'objet à gauche a été capturée lors de la connexion, la valeur ci-dessous a été évaluée tout à l'heure."

Résoudre le problème

Pour éviter cet écart, envisagez de consigner les valeurs des propriétés d'objet individuelles :

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

Vous pouvez également convertir l'objet en une chaîne JSON en utilisant JSON.stringify() :

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

Une autre approche consiste à préserver l'inspectabilité des objets en les réencodant avec JSON.parse() :

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

Cependant, notez que JSON supprime les propriétés non sérialisables telles que les fonctions et les éléments DOM. Pour les objets complexes, utilisez un mécanisme de copie approfondie robuste pour préserver ces propriétés.

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!