Copie superficielle et copie approfondie en JavaScript

Aperçu

En JavaScript, la copie d'objets ou de tableaux peut être classée en copie superficielle et copie profonde. Comprendre la différence est essentiel lorsqu'il s'agit de structures de données complexes, en particulier celles contenant des objets ou des tableaux imbriqués.

Ce guide explique ces concepts, leurs caractéristiques, les méthodes pour les mettre en œuvre et quand les utiliser.

1. Copie superficielle

Définition
Une copie superficielle crée une copie des propriétés de niveau supérieur d'un objet ou d'un tableau. Cependant, pour les objets ou tableaux imbriqués, seules les références sont copiées, pas les données réelles.

Caractéristiques

• Copie uniquement le premier niveau de propriétés ou d'éléments.
• Les objets ou tableaux imbriqués partagent des références avec l'objet/le tableau d'origine.
• Léger et efficace pour les structures simples mais ne convient pas à la duplication indépendante de données imbriquées.

1.1 Utilisation d'Object.assign()

const original = { a: 1, b: { c: 2 } };
const shallowCopy = Object.assign({}, original);

shallowCopy.b.c = 42; 
console.log(original.b.c); // OUTPUT: 42 (The original object also affected due to shared reference)

1.2 Utilisation de l'opérateur Spread (...)

const original = { a: 1, b: { c: 2 } };
const shallowCopy = { ...original };

shallowCopy.b.c = 90;
console.log(original.b.c); // OUTPUT: 90

1.3 Voyons un exemple de copie superficielle sur les méthodes Array (slice, concat)

const original = [1, 2, [3, 4]];
const shallowCopy = original.slice();

shallowCopy[2][0] = 10; 
console.log(original[2][0]); // OUTPUT: 10

2. Copie approfondie

Définition
Une copie complète crée une copie totalement indépendante d'un objet ou d'un tableau. Tous les niveaux, y compris les structures imbriquées, sont copiés de manière récursive. Les modifications apportées à la structure copiée n'affectent pas l'original, et vice versa.

Caractéristiques

• Copie récursivement tous les niveaux de la structure.
• Les objets ou tableaux imbriqués sont indépendants de l'original.
• Plus lourdes en termes de calcul que les copies superficielles.

2.1 Utilisation de JSON.stringify() et JSON.parse()

• Convertit l'objet en chaîne JSON puis à nouveau en un nouvel objet.
• Limitations : ne gère pas les fonctions, la date, la RegExp ou les références circulaires.

const original = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(original));

deepCopy.b.c = 42;
console.log(original.b.c); // OUTPUT: 2 (original remains unaffected)

2.2 Utilisation de structuredClone()
Une méthode moderne de copie approfondie qui prend en charge les références circulaires et les objets spéciaux comme Date.

const original = { a: 1, b: { c: 2 }, date: new Date() };
const deepCopy = structuredClone(original);

deepCopy.b.c = 42;
console.log(original.b.c); // OUTPUT: 2
console.log(original.date === deepCopy.date); // FALSE

2.3 Utilisation d'une fonction récursive personnalisée
Une solution flexible pour traiter manuellement les cas complexes.

function deepCopy(obj) {
  if (obj === null || typeof obj !== "object") return obj; 

  if (Array.isArray(obj)) return obj.map(deepCopy); 

  const copy = {};
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      copy[key] = deepCopy(obj[key]);
    }
  }
  return copy;
}

const original = { a: 1, b: { c: 2 } };
const deepCopyObj = deepCopy(original);

deepCopyObj.b.c = 42;
console.log(original.b.c); // OUTPUT: 2

3. Quand les utiliser ?

Copie superficielle

• Pour les objets plats ou les tableaux sans structures imbriquées.
• Lorsque les performances sont critiques et que les références partagées pour les objets imbriqués sont acceptables.

Copie approfondie

• Pour les objets/tableaux complexes et profondément imbriqués.
• Quand vous avez besoin d'une véritable indépendance entre la copie et l'original.

4. Résumé

Copie superficielle

• Simple et efficace.
• Convient aux structures plates ou lorsque des références partagées sont acceptables.

Copie approfondie

• Robuste et assure une totale indépendance.
• Idéal pour les structures profondément imbriquées ou complexes.

Ceci est une explication détaillée de la copie superficielle et de la copie profonde des objets dans JavaScript. Choisissez la méthode appropriée en fonction de votre cas d'utilisation et de vos exigences de performances.

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!