Différences : copies superficielles et profondes en JavaScript

Avez-vous déjà essayé de créer une copie d’un objet en JavaScript, mais le résultat n’était pas celui que vous attendiez ? Si tel est le cas, cet article abordera les différentes techniques de clonage et comment les utiliser correctement. Cette connaissance vous aidera à garantir que vous obtenez les bons résultats chaque fois que vous utilisez la commande clone.

En JavaScript, nous pouvons également créer des copies superficielles et des copies profondes d’objets. Plongeons-nous dans la signification de chacun de ces concepts en JavaScript.

Copie superficielle

Une copie superficielle en JavaScript crée un nouvel objet qui contient des références aux mêmes emplacements de mémoire que l’objet d’origine. Cela signifie que si des modifications sont apportées à l’objet copié, l’objet d’origine est également affecté.

En JavaScript, il existe plusieurs manières de créer une copie superficielle :

Objet.assign()

Le Object.assign() La méthode copie toutes les propriétés énumérables d’un objet dans un nouvel objet. Il prend un ou plusieurs objets source et un objet cible. L’objet cible est l’objet qui sera modifié et renvoyé. Voici un exemple :

let originalObj = { name: "John", age: 30 };
let copiedObj = Object.assign({}, originalObj);

copiedObj.age = 40;

console.log(originalObj.age); // Output: 40

Comme vous pouvez le voir, changer le age propriété de l’objet copié modifie également la age propriété de l’objet d’origine.

Opérateur de propagation

L’opérateur de propagation (...) peut également être utilisé pour créer une copie superficielle d’un objet. Cet opérateur répartit les propriétés d’un objet dans un nouvel objet. Voici un exemple :

let originalObj = { name: "John", age: 30 };
let copiedObj = { ...originalObj };

copiedObj.age = 40;

console.log(originalObj.age); // Output: 40

Encore une fois, changer le age propriété de l’objet copié modifie également la age propriété de l’objet d’origine.

Copie en profondeur

Une copie complète crée un nouvel objet avec toutes les propriétés et sous-propriétés de l’objet d’origine. Cela signifie que toute modification apportée à l’objet copié n’affectera pas l’objet d’origine.

En JavaScript, il existe plusieurs manières de créer une copie complète :

JSON.parse() et JSON.stringify()

Le moyen le plus simple de créer une copie complète d’un objet consiste à utiliser JSON.parse() et JSON.stringify(). Voici un exemple :

let originalObj = { name: "John", age: 30, address: { city: "New York", state: "NY" } };
let copiedObj = JSON.parse(JSON.stringify(originalObj));

copiedObj.address.city = "Los Angeles";

console.log(originalObj.address.city); // Output: New York

Comme vous pouvez le voir, changer le city propriété de l’objet copié n’affecte pas la city propriété de l’objet d’origine.

Récursivité

Une autre façon de créer une copie complète consiste à utiliser la récursivité pour copier toutes les propriétés de l’objet d’origine et de tous les sous-objets. Voici un exemple :

function deepCopy(obj) {
  let copiedObj = Array.isArray(obj) ? [] : {};

  for (let key in obj) {
    if (typeof obj[key] === "object" && obj[key] !== null) {
      copiedObj[key] = deepCopy(obj[key]);
    } else {
      copiedObj[key] = obj[key];
    }
  }

  return copiedObj;
}

let originalObj = { name: "John", age: 30, address: { city: "New York", state: "NY" } };
let copiedObj = deepCopy(originalObj);

copiedObj.address.city = "Los Angeles";

console.log(originalObj.address.city); // Output: New York

Dans cet exemple, le deepCopy() La fonction copie récursivement toutes les propriétés et sous-propriétés de l’objet d’origine. Toute modification apportée à l’objet copié n’affecte pas l’objet d’origine.

Conclusion

En conclusion, comprendre la différence entre une copie superficielle et une copie profonde en JavaScript est important pour une manipulation d’objet et une gestion de la mémoire appropriées.

Une copie superficielle crée un nouvel objet qui partage les mêmes références de mémoire que l’objet d’origine. Toute modification apportée à la copie superficielle ou à l’objet d’origine affectera les deux objets. Une copie superficielle peut être utile pour créer des références à des objets existants sans consommer plus de mémoire.

D’autre part, une copie complète crée un nouvel objet entièrement indépendant de l’objet d’origine. Toute modification apportée à la copie complète n’affectera pas l’objet d’origine et vice versa. Une copie complète peut être utile pour créer des objets entièrement nouveaux qui ne dépendent pas de l’objet d’origine.

Le choix entre copie superficielle et copie profonde dépend des exigences du code et du résultat souhaité. Une copie superficielle est utile lorsqu’il s’agit d’objets volumineux qui doivent être référencés plusieurs fois, tandis qu’une copie profonde est utile lors de la création de nouveaux objets indépendants qui ne dépendent pas de l’objet d’origine.