Maison > interface Web > js tutoriel > Pourquoi `console.log()` affiche-t-il les valeurs de tableau modifiées avant que les modifications ne soient appliquées ?

Pourquoi `console.log()` affiche-t-il les valeurs de tableau modifiées avant que les modifications ne soient appliquées ?

Linda Hamilton
Libérer: 2024-12-22 13:31:43
original
351 Les gens l'ont consulté

Why Does `console.log()` Show Altered Array Values Before the Changes Are Applied?

Console.log() affiche prématurément les valeurs de tableau modifiées

En programmation, nous manipulons fréquemment les variables et enregistrons leurs valeurs dans la console pour suivre changements. Cependant, dans le cas des tableaux, nous rencontrons un comportement inattendu où console.log() affiche les valeurs modifiées du tableau avant même que les modifications ne soient apportées.

Ce phénomène peut être observé dans l'extrait de code suivant :

var A = [2, 1];
var C = A;
console.log(C); // [1, 2]
A.sort();
console.log(C); // [1, 2]
Copier après la connexion

Dans cet exemple, nous avons un tableau A avec deux éléments qui est affecté à une autre variable C. Lorsque nous enregistrons C, il affiche initialement les valeurs d'origine [1, 2]. Cependant, lorsque nous appelons la méthode sort() sur A, nous voyons que C affiche également les valeurs triées [1, 2], même si les modifications ont été appliquées à A.

Comprendre le comportement

Ce comportement se produit car console.log() reçoit une référence à l'objet au lieu d'une copie de sa valeur. Lorsque vous enregistrez un tableau, la console affiche une référence au tableau en mémoire, qui est mise à jour à mesure que le tableau change.

Pour illustrer cela, considérons le code modifié suivant :

var A = [2, 1];
var C = JSON.parse(JSON.stringify(A));
console.log(C); // [1, 2]
A.sort();
console.log(C); // [2, 1]
Copier après la connexion

En convertissant le tableau A en chaîne JSON puis de nouveau en tableau, nous créons un nouvel objet en mémoire. Cela signifie que C détient désormais une copie des valeurs originales de A. Lorsque nous trions A, C reste inchangé car il s'agit d'un objet distinct.

Avertissement de MDN

Ce comportement est particulièrement pertinent dans les versions modernes des navigateurs comme Chrome et Firefox :

MDN warns: ... at the moment you open the console.
Copier après la connexion

Cela signifie que la valeur enregistrée affichée dans la console peut ne pas représenter la valeur réelle de l'objet au moment où il a été enregistré. Au lieu de cela, il peut afficher la valeur à partir de la première ouverture de la console, ce qui peut prêter à confusion.

Conclusion

Lorsque vous travaillez avec des tableaux, il est important d'être conscient du comportement de transmission de références de console.log(). Si vous souhaitez enregistrer les valeurs réelles des tableaux sans risque de modifications prématurées, envisagez d'utiliser les méthodes JSON.parse() et JSON.stringify() pour créer d'abord une copie complète du tableau.

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