Pourquoi « console.log » affiche-t-il des informations sur les objets obsolètes après une modification en JavaScript ?

Dévoilement des secrets de console.log et de la manipulation d'objets

Lorsque vous travaillez avec des tableaux et des objets en JavaScript, le comportement de console.log peut être parfois déroutant. 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);

Dans les navigateurs comme Chrome, ce code produit le résultat déroutant suivant :

foo1 [Object, Object, Object, Object, Object]  5
foo2 [Object, Object, Object, Object]  4

Pourquoi foo2 affiche-t-il la longueur du tableau mis à jour (4) mais affiche toujours cinq objets ?

Examen des objets dans Console.log

La raison réside dans comment console.log gère les objets. Lors de la journalisation d'un objet, la console reçoit une référence de manière synchrone. Cependant, l'affichage réel des propriétés de l'objet se produit de manière asynchrone, souvent après que l'objet a été modifié.

Par conséquent, vous pouvez voir des informations obsolètes lors du développement de l'objet enregistré dans la console. Pour éviter cette confusion, la console affiche un petit « i » dans une case indiquant que la valeur affichée a été capturée au moment de la journalisation, même si l'objet a pu changer depuis.

Stratégies de journalisation

Pour contourner ce problème, envisagez d'utiliser l'une des techniques suivantes :

• Enregistrez les valeurs d'objet individuelles : console.log(obj.foo, obj.bar, obj.baz);
• JSON encode l'objet sous forme de chaîne : console.log(JSON.stringify(obj));
• Re -encoder l'objet avec JSON pour maintenir l'inspectabilité : console.log(JSON.parse(JSON.stringify(obj)));

Notez que JSON a ses limites, car il supprime les propriétés non sérialisables et échoue sur les références circulaires. Pour des scénarios plus complexes, envisagez d'utiliser des mécanismes personnalisés de copie approfondie.

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!