Comprendre les références et la copie d'objets JavaScript - Brève explication

Lorsque vous travaillez avec des objets en JavaScript, il est crucial de comprendre la différence entre les références d'objet et la copie d'objet. Voici un aperçu détaillé :

---

Références d'objets

1. Les objets sont des types référence :
   • Lorsque vous affectez un objet à une variable, vous attribuez une référence à l'emplacement mémoire où l'objet est stocké, et non une copie de l'objet lui-même.
   • La modification de l'objet via une référence affecte toutes les références au même objet.

   let obj1 = { name: "Alice" };
   let obj2 = obj1; // obj2 now references the same object as obj1
   obj2.name = "Bob";
   console.log(obj1.name); // Output: "Bob"

1. Contrôles d'égalité :
   • Deux variables sont égales si elles référencent le même objet en mémoire, pas si leur contenu est identique.

   let a = { key: "value" };
   let b = { key: "value" };
   console.log(a === b); // Output: false (different references)
   let c = a;
   console.log(a === c); // Output: true (same reference)

---

Copie d'objet

Il existe deux principaux types de copie d'objets : la copie superficielle et la copie approfondie.

1. Copie superficielle

• Une copie superficielle crée un nouvel objet, mais elle ne copie que le premier niveau de propriétés. Les objets ou tableaux imbriqués sont toujours référencés et non dupliqués.

Techniques de copie superficielle :

• Object.assign() :
  

   let original = { name: "Alice", details: { age: 25 } };
   let copy = Object.assign({}, original);
   copy.details.age = 30;
   console.log(original.details.age); // Output: 30 (shared reference)
  

• Opérateur de spread (...):
  

   let original = { name: "Alice", details: { age: 25 } };
   let copy = { ...original };
   copy.details.age = 30;
   console.log(original.details.age); // Output: 30 (shared reference)
  

• Les deux méthodes créent une copie superficielle, ce qui signifie que les objets imbriqués sont toujours liés.

2. Copie approfondie

• Une copie complète duplique l'intégralité de l'objet, y compris les structures imbriquées. Le nouvel objet est totalement indépendant de l'original.

Techniques de copie approfondie :

• JSON.parse() et JSON.stringify() :
  

   let original = { name: "Alice", details: { age: 25 } };
   let copy = JSON.parse(JSON.stringify(original));
   copy.details.age = 30;
   console.log(original.details.age); // Output: 25
  

  • Limitation : Cette méthode ne gère pas les fonctions, non définies, Infinity ou les objets spéciaux comme Date ou RegExp.

• StructuredClone() (JavaScript moderne) :
  

   let original = { name: "Alice", details: { age: 25 } };
   let copy = structuredClone(original);
   copy.details.age = 30;
   console.log(original.details.age); // Output: 25
  

  • Cette méthode gère la plupart des cas extrêmes (par exemple, les références circulaires) mais n'est pas prise en charge dans les environnements plus anciens.

• Bibliothèques personnalisées :

  • Utilisez des bibliothèques comme lodash :

     let obj1 = { name: "Alice" };
     let obj2 = obj1; // obj2 now references the same object as obj1
     obj2.name = "Bob";
     console.log(obj1.name); // Output: "Bob"
  

---

Tableau récapitulatif

Action	Result
Assignment (=)	Creates a reference. Changes to one variable affect the other.
Shallow Copy	Creates a new object but retains references for nested objects.
Deep Copy	Creates a completely independent object, including nested structures.

Action

Résultat

ête> Affectation (=) Crée une référence. Les modifications apportées à une variable affectent l'autre. Copie superficielle Crée un nouvel objet mais conserve les références pour les objets imbriqués. Copie approfondie Crée un objet complètement indépendant, y compris des structures imbriquées.

Comprendre ces concepts vous aide à éviter les effets secondaires involontaires lorsque vous travaillez avec des objets en JavaScript !

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!