JavaScript Shallow Copy vs Deep Copy : exemples et bonnes pratiques

Lorsque vous travaillez avec des objets et des tableaux en JavaScript, créer des copies de structures de données est une tâche courante. Cependant, les développeurs sont souvent confrontés à des difficultés lorsqu'ils doivent choisir entre une copie superficielle et une copie approfondie. Une mauvaise compréhension des différences peut entraîner des effets secondaires involontaires dans votre code. Examinons ces concepts, leurs différences et quand les utiliser.

? Télécharger eBook - JavaScript : de ES2015 à ES2023

Qu'est-ce qu'une copie superficielle ?

Une copie superficielle crée un nouvel objet avec des copies des propriétés de niveau supérieur de l'objet d'origine. Pour les propriétés qui sont des primitives (par exemple, nombres, chaînes, booléens), la valeur elle-même est copiée. Cependant, pour les propriétés qui sont des objets (comme des tableaux ou des objets imbriqués), seule la référence est copiée, pas les données réelles.

Cela signifie que même si le nouvel objet possède sa propre copie des propriétés de niveau supérieur, les objets ou tableaux imbriqués restent partagés entre l'original et la copie.

Exemple de copie superficielle

const original = {
  name: "Alice",
  details: {
    age: 25,
    city: "Wonderland"
  }
};

// Shallow copy
const shallowCopy = { ...original };

// Modify the nested object in the shallow copy
shallowCopy.details.city = "Looking Glass";

// Original object is also affected
console.log(original.details.city); // Output: "Looking Glass"

Comment créer une copie superficielle

1. Utilisation de l'opérateur Spread (...) :

   const shallowCopy = { ...originalObject };

1. Utilisation d'Object.assign() :

   const shallowCopy = Object.assign({}, originalObject);

Bien que ces méthodes soient rapides et simples, elles ne conviennent pas aux objets profondément imbriqués.

Qu'est-ce qu'une copie approfondie ?

Une copie complète duplique chaque propriété et sous-propriété de l'objet d'origine. Cela garantit que la copie est complètement indépendante de l'original et que les modifications apportées à la copie n'affectent pas l'objet original.

La copie approfondie est essentielle lorsqu'il s'agit de structures de données complexes telles que des objets ou des tableaux imbriqués, en particulier dans les scénarios où l'intégrité des données est critique.

Exemple de copie approfondie

const original = {
  name: "Alice",
  details: {
    age: 25,
    city: "Wonderland"
  }
};

// Shallow copy
const shallowCopy = { ...original };

// Modify the nested object in the shallow copy
shallowCopy.details.city = "Looking Glass";

// Original object is also affected
console.log(original.details.city); // Output: "Looking Glass"

Comment créer une copie approfondie

1. Utilisation de JSON.stringify() et JSON.parse() :
   • Convertit l'objet en chaîne JSON, puis l'analyse à nouveau en un nouvel objet.
   • Limites :
     • Impossible de gérer les références circulaires.
     • Ignore les propriétés telles que les fonctions, non définies ou Symbole.

   const shallowCopy = { ...originalObject };

1. Utiliser les bibliothèques :
   • Les bibliothèques comme Lodash fournissent des méthodes robustes de clonage profond.

   const shallowCopy = Object.assign({}, originalObject);

1. Fonction récursive personnalisée :
   • Pour un contrôle total, vous pouvez écrire une fonction récursive pour cloner des objets imbriqués.

Comparaison de la copie superficielle et de la copie approfondie

Quand utiliser la copie superficielle

• Objets plats : lorsqu'il s'agit d'objets simples sans propriétés imbriquées.
• Performance : lorsque la vitesse est cruciale et que vous n'avez pas besoin de gérer des données profondément imbriquées.
• Modifications temporaires : lorsque vous avez l'intention de modifier les propriétés de niveau supérieur mais de partager des données imbriquées.

Exemple de cas d'utilisation

Copier l'objet des paramètres d'un utilisateur pour effectuer des ajustements rapides :

const original = {
  name: "Alice",
  details: {
    age: 25,
    city: "Wonderland"
  }
};

// Shallow copy
const shallowCopy = { ...original };

// Modify the nested object in the shallow copy
shallowCopy.details.city = "Looking Glass";

// Original object is also affected
console.log(original.details.city); // Output: "Looking Glass"

Quand utiliser la copie approfondie

• Structures complexes : Pour les objets avec plusieurs niveaux d'imbrication.
• Éviter les effets secondaires : lorsque vous devez vous assurer que les modifications apportées à la copie n'affectent pas l'original.
• Gestion de l'état : dans des frameworks comme React ou Redux, où l'immuabilité est critique.

Exemple de cas d'utilisation

Dupliquer l'état d'un jeu ou d'une application :

   const shallowCopy = { ...originalObject };

Erreurs et pièges courants

1. En supposant qu'une copie superficielle soit toujours suffisante :

   • Les développeurs utilisent souvent par erreur des méthodes de copie superficielle pour les objets imbriqués, ce qui entraîne des modifications involontaires des données d'origine.

2. Utilisation excessive des méthodes JSON :

   • Bien que JSON.stringify/JSON.parse soit simple, il ne fonctionne pas pour tous les objets (par exemple, ceux contenant des méthodes ou des références circulaires).

3. Négliger les performances :

   • Les méthodes de copie approfondie peuvent être plus lentes, en particulier pour les objets volumineux, alors utilisez-les judicieusement.

Conclusion

Comprendre la différence entre la copie superficielle et la copie profonde est essentiel pour écrire du code JavaScript sans bug. Les copies superficielles sont efficaces pour les structures plates, tandis que les copies profondes sont indispensables pour les objets complexes et imbriqués. Choisissez la méthode appropriée en fonction de votre structure de données et des besoins de votre application, et évitez les pièges potentiels en connaissant les limites de chaque approche.

? Télécharger eBook - JavaScript : de ES2015 à ES2023

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!