Copie superficielle vs copie approfondie en JavaScript

Lorsque vous travaillez avec JavaScript, comprendre la différence entre la copie superficielle et la copie profonde est essentiel pour une manipulation efficace des objets et des tableaux. Voyons ce que signifient ces termes et comment implémenter chaque type de copie dans votre code.

Copie superficielle
Une copie superficielle crée un nouvel objet ou tableau contenant les mêmes valeurs que l'original. Toutefois, si l'original contient des objets ou des tableaux imbriqués, la copie superficielle copie uniquement les références à ces structures imbriquées, pas les structures elles-mêmes. Cela signifie que les modifications apportées aux objets ou aux tableaux imbriqués dans la structure copiée affecteront également l'original.

Exemples de méthodes de copie superficielle :

1. Opérateur de spread ({...})

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

Ici, ShallowCopy est un nouvel objet, mais ShallowCopy.b fait toujours référence au même objet que original.b.

2.Object.assign()

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

1. Méthode de tranche de tableau

const originalArray = [1, 2, 3];
const shallowCopyArray = originalArray.slice();

Copie approfondie
Une copie complète crée un nouvel objet ou tableau qui est un clone complet et indépendant de l'original, y compris tous les objets et tableaux imbriqués. Les modifications apportées à la copie complète n'affectent pas l'original et vice versa.

Exemples de méthodes de copie approfondie :

1. JSON.stringify() et JSON.parse()

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

Cette méthode sérialise l'objet en une chaîne JSON, puis l'analyse en un nouvel objet. Cependant, il ne gère pas les fonctions, les références non définies ou circulaires.

2.Fonction récursive

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

  const copy = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      copy[key] = deepCopy(obj[key]);
    }
  }
  return copy;
}

1. StructuredClone() (dans les environnements JavaScript modernes)

const deepCopy = structuredClone(original);

Quand les utiliser

• Copie superficielle : Convient aux objets simples ou aux tableaux sans structures imbriquées. C'est plus rapide et utilise moins de mémoire. Utilisez-le lorsque vous avez besoin d'une copie rapide où les modifications apportées aux objets imbriqués doivent être reflétées à la fois dans l'original et dans la copie.

• Deep Copy : Nécessaire pour les objets complexes ou les tableaux avec des structures imbriquées. Cela garantit que les modifications apportées à la copie n’affectent pas l’original. Utilisez-le lorsque vous avez besoin de clones complètement indépendants.

Comprendre ces différences permet d'éviter les bugs résultant de références partagées involontaires et garantit l'intégrité des données dans vos applications

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!