Maison > interface Web > js tutoriel > Pourquoi « console.log » affiche-t-il l'état final de l'objet et comment puis-je voir son état initial ?

Pourquoi « console.log » affiche-t-il l'état final de l'objet et comment puis-je voir son état initial ?

Linda Hamilton
Libérer: 2024-12-12 20:27:10
original
572 Les gens l'ont consulté

Why Does `console.log` Show the Final Object State, and How Can I See its Initial State?

Dépannage de Console.Log Output pour l'état de l'objet

Dans de nombreux navigateurs, y compris Safari sans modules complémentaires, console.log affiche l'état de l'objet en fin d'exécution plutôt qu'au moment de l'appel de la fonction. Cela peut prêter à confusion lors du débogage.

Comprendre le problème

Lors de l'utilisation de console.log avec un objet, il enregistre uniquement une référence à l'objet. Étant donné que les objets sont mutables, toutes les modifications apportées à l'objet après l'appel console.log seront reflétées dans la sortie affichée.

Solution : Utilisation de console.dir()

La fonction console.dir() apporte une solution à ce problème. Il imprime un répertoire des propriétés de l'objet au moment où la fonction est appelée, donnant une représentation précise de son état.

Exemple :

var test = {a: true}
console.dir(test); // {a: true}
test.a = false; 
console.dir(test); // {a: false}
Copier après la connexion

Solution alternative : conversion de chaîne JSON

Une autre approche consiste à convertir l'objet en chaîne JSON à l'aide de JSON.stringify(). Cette chaîne peut ensuite être enregistrée à l'aide de console.log, puis analysée dans un objet à l'aide de JSON.parse(). Cette méthode fournit des fonctionnalités similaires à console.dir().

Exemple de code :

console.log(JSON.parse(JSON.stringify(obj)));
Copier après la connexion

En utilisant console.dir() ou la technique de conversion de chaîne JSON , les développeurs peuvent afficher avec précision l'état actuel d'un objet lorsqu'ils utilisent console.log. Cela élimine le problème des données obsolètes et améliore l'efficacité du débogage.

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