Guinguette Marais Poitevin

Dans ce post, vous trouverez 3 façons faciles d’effectuer un clone superficiel (aka copie) d’objets en JavaScript.

En bonus, je vais montrer comment vous pouvez également mettre à jour, ajouter ou supprimer des propriétés en place sur le clone. C’est utile lorsque vous voulez effectuer une mise à jour sur l’objetde manière immuable.

Note

Les 3 façons de cloner des objets décrites dans ce billet effectuent une copie superficielle.

Une copie peu profonde signifie que seul l’objet réel est copié. Si l’objet copié contient des objets imbriqués – ces objets imbriqués ne sont pas clonés.

1. Clonage à l’aide de l’étalement d’objet

La façon la plus simple de cloner un objet JavaScript ordinaire est d’invoquer l’opérateur d’étalement d’objet :

const clone = { ...object};

Où object est l’objet que vous souhaitez copier, et clone est la copie superficielle de object.

Par exemple, créons une copie superficielle de l’objet hero :

const hero = { name: 'Batman', city: 'Gotham'};const heroClone = { ...hero};heroClone; // { name: 'Batman', city: 'Gotham' }hero === heroClone; // => false

heroClone est un objet clone de hero, ce qui signifie qu’il contient toutes les propriétés de hero.

hero === heroClone s’évalue à falsehero et heroClone sont néanmoins des instances d’objets différents.

1.1 Bonus de l’étalement d’objet : ajouter ou mettre à jour les props clonés

Un avantage immédiat de l’utilisation de l’étalement d’objet est que vous pouvez mettre à jour ou ajouter de nouvelles propriétés à l’objet cloné en place si vous en avez besoin.

Clonons l’objet hero, mais mettons à jour la propriété name à une valeur différente et ajoutons une nouvelle propriété realName :

const hero = { name: 'Batman', city: 'Gotham'};const heroEnhancedClone = { ...hero, name: 'Batman Clone', realName: 'Bruce Wayne'};heroEnhancedClone; // { name: 'Batman Clone', city: 'Gotham', realName: 'Bruce Wayne' }

2. Clonage à l’aide de l’objet rest

Une autre bonne façon de cloner superficiellement des objets est d’utiliser l’opérateur object rest :

const { ...clone } = object;

De nouveau, utilisons l’opérateur rest pour faire une copie de hero objet :

const hero = { name: 'Batman', city: 'Gotham'};const { ...heroClone } = hero;heroClone; // { name: 'Batman', city: 'Gotham' }hero === heroClone; // => false

Après avoir appliqué l’opérateur rest const { ...heroClone } = hero, la variable heroClone contient une copie de l’objet hero.

2.1 Bonus du repos d’objet : sauter les props clonés

Un bonus agréable lors de l’utilisation du repos d’objet est la possibilité de sauter certaines propriétés lors du clonage.

Par exemple, créons un clone de l’objet hero, mais sautons la propriété city dans le clone:

const hero = { name: 'Batman', city: 'Gotham'};const { city, ...heroClone } = hero;heroClone; // { name: 'Batman' }

2.2 Super bonus : combiner l’étalement et le repos des objets

L’étalement des objets apporte le bonus de la mise à jour ou de l’ajout de nouvelles propriétés, tandis que le repos des objets présente l’avantage de sauter des propriétés dans le clone résultant.

Pouvez-vous combiner object spread et rest en une seule instruction pour hériter de tous ces avantages ? Oui, vous le pouvez !

Clonons l’objet hero, en ajoutant également une nouvelle propriété realName et en sautant la propriété city :

const hero = { name: 'Batman', city: 'Gotham'};const { city, ...heroClone } = { ...hero, realName: 'Bruce Wayne'};heroClone; // { name: 'Batman', realName: 'Bruce Wayne' }

Combiner l’étalement de l’objet et le reste pour cloner les objets et effectuer la manipulation des propriétés en une seule déclaration est génial !

3. cloner en utilisant Object.assign()

Enfin, Object.assign(target, ...sources) vous permet de peformer le même clone d’objet :

const clone = Object.assign({}, object);

Utilisons Object.assign() en pratique et créons un objet clone de hero objet :

const hero = { name: 'Batman', city: 'Gotham'};const heroClone = Object.assign({}, hero);heroClone; // { name: 'Batman', city: 'Gotham' }hero === heroClone; // => false

Object.assign({}, hero) crée un clone de hero. en fusionnant le deuxième argument hero dans le premier argument {}.

Bonus de 3.1 Object.assign() : ajouter ou mettre à jour les props clonés

Object.assign() permet également de mettre à jour ou d’ajouter de nouvelles propriétés au clone.

Copions l’objet hero, mais mettons en même temps à jour la propriété name :

const hero = { name: 'Batman', city: 'Gotham'};const heroClone = Object.assign({}, hero, { name: 'Batman Clone' });heroClone; // { name: 'Batman Clone', city: 'Gotham' }

Object.assign({}, hero, { name: 'Batman Clone' }) crée l’objet en 2 étapes.

D’abord, le deuxième argument hero est fusionné avec le premier argument {}. Cela équivaut à { name: 'Batman', city: 'Gotham' }.

Deuxièmement, le troisième argument { name: 'Batman Clone' } est fusionné au résultat de l’étape précédente, écrasant la propriété name. Finalement, on obtient l’objet { name: 'Batman Clone', city: 'Gotham' }.

4. Résumé

JavaScript fournit 3 bonnes façons de cloner des objets : en utilisant l’opérateur spread, l’opérateur rest et la fonction Object.assign().

A part le simple clonage d’objets, l’utilisation de l’opérateur spread et de la fonction Object.assign() permet d’ajouter ou de mettre à jour des propriétés lors de la création du clone.

L’opérateur de repos donne également l’avantage de sauter certaines propriétés lors du clonage.

Et ce qui est génial, c’est que vous pouvez combiner l’objet spread et rest dans une seule déclaration, de sorte que vous pouvez cloner l’objet, et en même temps ajouter, mettre à jour ou sauter des propriétés d’être cloné.

C’est utile si vous souhaitez embrasser l’immuabilité et être en mesure de manipuler les propriétés de l’objet cloné en place.

Quels autres bons moyens de cloner des objets en JavaScript connaissez-vous ?