Copier des objets en JavaScript

1. Copie peu profonde d’un objet en JavaScript
2. Copier en profondeur un objet en JavaScript

Divers langages de programmation ont diverses structures de données qui vous permettent d’organiser et de stocker les données en mémoire. Chacune des structures de données fonctionne de manière unique. Par exemple, en C++ et Java, nous avons Hashmap pour stocker les données sous une forme clé-valeur. De même, en JavaScript, nous avons une structure de données appelée objet qui permet de stocker les données dans un format clé-valeur.

Les objets sont utiles pour accéder aux données. Nous pouvons facilement accéder à toutes les données d’un objet à l’aide de sa clé. Dans cet article, nous allons voir les différentes manières dont nous pouvons copier des objets en JavaScript.

Notez que les objets JavaScript sont modifiables et sont stockés en tant que référence. Si vous avez déjà créé un objet et que vous souhaitez l’affecter à un autre objet, cet objet contiendra désormais l’adresse de cet objet. Puisque nous stockons la référence de l’objet dans un autre objet, puis en utilisant ce nouvel objet, nous pouvons facilement modifier les valeurs présentes dans l’objet d’origine.

var a = {'name': 'Adam', 'company': 'Google'}

var b = a;
b.name = 'Sam'

console.log(a.name, b.name);

Production :

Sam Sam

Comme vous pouvez le voir dans l’exemple ci-dessus, l’affectation d’un objet à un autre ne copiera pas l’objet lui-même. Il ne stockera que l’adresse de l’ancien objet dans le nouvel objet.

Il existe deux manières de copier un objet en JavaScript. Une méthode est appelée copie superficielle et une autre est appelée copie profonde. Pour implémenter ces moyens, nous pouvons utiliser certaines méthodes JavaScript comme suit.

Copie peu profonde d’un objet en JavaScript

En copie superficielle, seules les paires clé-valeur présentes au premier niveau de l’objet seront copiées dans le nouvel objet. Et tous les éléments ou propriétés imbriqués, comme un tableau ou un autre objet à l’intérieur, ne seront pas copiés, et à la place, leur référence sera stockée dans cet objet.

Dans la copie superficielle, certaines propriétés de l’objet d’origine sont également affectées. Pour comprendre cela, veuillez consulter l’exemple ci-dessous.

var obj1 = {
  'firstName': 'James',
  'lastName': 'Bond',
  'films': ['No Time To Die', 'Spectre', 'Skyfall', 'Quantum of Solace'],
  'actors':
      {'characters': {'realName': 'Daniel Craig', 'fakeName': 'James Bond'}}
}

Dans cet exemple, nous avons un objet appelé obj1. Pour copier superficiellement cet objet à l’aide de JavaScript, nous pouvons utiliser Object.assign() et l’opérateur de propagation .... Exécutons une copie superficielle sur le obj1 en utilisant les méthodes ci-dessous en JavaScript.

1. Méthode Object.assign()

La méthode Object.assign() prend deux paramètres. Le premier paramètre est l’objet cible qui sera renvoyé une fois la copie effectuée. Le deuxième paramètre est l’objet que l’on veut copier : obj1. Dans notre cas, nous passerons un objet vide {} comme cible. C’est parce que tous les éléments à l’intérieur de obj1 seront copiés dans cet objet vide. Une fois la copie terminée, le Object.assign() renverra le nouvel objet que nous stockerons dans la variable obj2.

var obj2 = Object.assign({}, obj1);

Plus tard, nous modifierons les propriétés de cet objet, et nous verrons pratiquement pourquoi cela s’appelle une copie superficielle.

obj2.firstName = 'Camila';
obj2.films[0] = 'abcccc';
obj2.actors.characters.realName = 'Camila';

console.log(obj1);
console.log(obj2);

Production :

Ici, nous modifions trois valeurs en utilisant l’obj2, firstName, le premier film du tableau films[] et la propriété realName de l’objet actors.characters. Ensuite, nous imprimons les deux objets.

L’image ci-dessus montre que seule la propriété firstName n’est pas modifiée dans les deux objets. Les deux autres propriétés, films[] et realName sont modifiées dans les deux objets. C’est ce qu’on appelle une copie superficielle car la propriété firstName est unique, tandis que les autres propriétés sont communes aux deux objets car nous stockons l’adresse ici. Ici, les propriétés présentes au premier niveau sont uniquement copiées.

2. Opérateur d’étalement (...)

L’opérateur de repos copiera les propriétés de obj1 dans obj2. Ceci est similaire à Object.assign(), où nous copions de manière superficielle les propriétés des objets. Pour copier un objet à l’aide de l’opérateur d’étalement, vous devez écrire le nom de l’objet après le symbole d’étalement.

var obj2 = {...obj1};

obj2.firstName = 'Camila';
obj2.films[0] = 'abcccc';
obj2.actors.characters.realName = 'Camila';

Vous obtiendrez également le même résultat que nous avons obtenu après avoir utilisé la méthode Object.assign().

Copier en profondeur un objet en JavaScript

Dans une copie profonde, toutes les paires clé-valeur seront copiées dans le nouvel objet. Pour effectuer une copie profonde, nous pouvons utiliser les méthodes JSON.parse() et JSON.stringify(). Notez que la copie profonde ne copiera pas les propriétés présentes à l’intérieur de l’objet prototype.

À l’aide du JSON.stringify(), nous allons d’abord convertir l’objet entier, dans ce cas obj1, en une chaîne, puis plus tard, à l’aide de la méthode JSON.parse(), nous allons analyser cette chaîne au format JSON.

let obj2 = JSON.parse(JSON.stringify(obj1));

Ici, vous pouvez modifier toutes les propriétés à l’intérieur de obj2, ce qui n’affectera pas les propriétés à l’intérieur de obj1.

obj2.firstName = 'Camila';
obj2.films[0] = 'abcccc';
obj2.actors.characters.realName = 'Camila';

Production :

Nous modifions les mêmes valeurs que nous modifiions précédemment, et maintenant vous pouvez remarquer que lorsque nous modifions les propriétés de l’obj2, cela n’affecte pas les propriétés de l’obj1.