Copie en profondeur d'un objet en JavaScript à l'aide de structuralClone

Si vous êtes ici, je parie que vous avez utilisé JSON.parse()+ JSON.stringify()astuce des centaines de fois pour créer une copie complète d'un objet en JavaScript. Vous n'en avez plus besoin, le natif structuredClone()est là pour vous aider.

Copie superficielle vs copie profonde

Tout d'abord, rappelons-nous quelle est la différence entre une copie superficielle et une copie approfondie :

• Copie superficielle : signifie que seul le premier niveau de l'objet est copié . Des niveaux plus profonds sont référencés. Vous pouvez y parvenir en JavaScript en utilisant l'opérateur Spread ( …) ou en utilisant Object.assign().
• Copie en profondeur : signifie que tous les niveaux de l'objet sont copiés . Il s'agit d'une copie fidèle de l'objet. Vous pouvez le faire en utilisant JSON.parse()+ JSON.stringify(), et maintenant, vous pouvez également le faire avec le native structuredClone().

Copie en profondeur à l'aide d'un clone structuré

La méthode globale structuredClone()crée une copie complète d'une valeur donnée à l'aide de l' algorithme de clonage structuré .

Comme vous pouvez le voir dans cet extrait de code :

• Après la mise à jour d'une propriété au premier niveau des objets clonés, la propriété d'origine n'est pas mise à jour .
• Après la mise à jour d'une propriété à un niveau plus profond, la propriété d'origine n'est ni mise à jour . Cela se produit car, dans ce cas, des niveaux plus profonds sont également copiés.

Bon codage !