En JavaScript, une deep copy (copie profonde) crée une nouvelle structure indépendante des objets imbriqués, contrairement à une shallow copy (copie superficielle) qui copie uniquement les références des objets imbriqués.
Voici quelques méthodes pour réaliser une deep copy en JavaScript :
Cette méthode simple convertit l'objet en chaîne JSON, puis le reconvertit en objet. Cependant, elle a quelques limitations : elle ne fonctionne pas bien avec les fonctions, undefined, et les objets complexes comme les dates ou les objets DOM.
const original = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(original));
console.log(deepCopy); // { a: 1, b: { c: 2 } }- Les fonctions ne sont pas copiées.
- Les valeurs
undefinedne sont pas préservées. - Les objets comme les dates ou les maps sont convertis en chaînes JSON, perdant ainsi leurs propriétés originales.
L'API structuredClone() est une méthode native moderne qui réalise une deep copy en tenant compte des objets complexes tels que les dates, les Map, les Set, et même des structures récursives.
const original = { a: 1, b: { c: 2 }, d: new Date() };
const deepCopy = structuredClone(original);
console.log(deepCopy); // Copie profonde de l'objet, incluant la dateSi vous préférez une solution plus robuste qui gère tous les types de données complexes (par exemple, fonctions, objets DOM, etc.), vous pouvez utiliser une librairie externe comme Lodash :
npm install lodashEnsuite, vous pouvez utiliser la fonction cloneDeep de Lodash :
const _ = require('lodash');
const original = { a: 1, b: { c: 2 } };
const deepCopy = _.cloneDeep(original);
console.log(deepCopy); // { a: 1, b: { c: 2 } }Si vous ne souhaitez pas utiliser de bibliothèque externe et que vous avez besoin d'une solution personnalisée, vous pouvez implémenter une fonction de copie profonde récursive :
function deepCopy(obj) {
if (obj === null || typeof obj !== 'object') {
return obj; // Retourner la valeur primitive ou null
}
// Gérer les tableaux
if (Array.isArray(obj)) {
return obj.map(item => deepCopy(item));
}
// Gérer les objets
const copy = {};
for (let 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);
console.log(deepCopyObj); // { a: 1, b: { c: 2 } }JSON.stringify()etJSON.parse(): simple mais avec des limitations.structuredClone(): une méthode native, plus fiable et moderne.- Lodash (
cloneDeep) : idéal si vous voulez une solution prête à l'emploi avec toutes les fonctionnalités. - Fonction récursive : une solution manuelle pour plus de contrôle.