Dans cet exemple, vous apprendrez à écrire un programme qui clone un objet.
Pour comprendre cet exemple, vous devez avoir la connaissance des sujets de programmation JavaScript suivants:
- Objets JavaScript
- JavaScript Object.assign ()
Un objet JavaScript est un type de données complexe qui peut contenir différents types de données. Par exemple,
const person = ( name: 'John', age: 21, )
Voici personun objet. Maintenant, vous ne pouvez pas cloner un objet en faisant quelque chose comme ça.
const copy = person; console.log(copy); // (name: "John", age: 21)
Dans le programme ci-dessus, la copyvariable a la même valeur que l' personobjet. Cependant, si vous modifiez la valeur de l' copyobjet, la valeur de l' personobjet changera également. Par exemple,
copy.name = 'Peter'; console.log(copy.name); // Peter console.log(person.name); // Peter
Le changement est visible dans les deux objets car les objets sont des types de référence . Et les deux copyet personpointent vers le même objet.
Exemple 1. Cloner l'objet à l'aide d'Object.assign ()
// program to clone the object // declaring object const person = ( name: 'John', age: 21, ) // cloning the object const clonePerson = Object.assign((), person); console.log(clonePerson); // changing the value of clonePerson clonePerson.name = 'Peter'; console.log(clonePerson.name); console.log(person.name);
Production
(nom: "John", 21 ans) Peter John
La Object.assign()méthode fait partie de la norme ES6 . La Object.assign()méthode effectue une copie complète et copie toutes les propriétés d'un ou plusieurs objets.
Remarque : le vide ()comme premier argument garantit que vous ne modifiez pas l'objet d'origine.
Exemple 2: cloner l'objet à l'aide de la syntaxe Spread
// program to clone the object // declaring object const person = ( name: 'John', age: 21, ) // cloning the object const clonePerson = (… person) console.log(clonePerson); // changing the value of clonePerson clonePerson.name = 'Peter'; console.log(clonePerson.name); console.log(person.name);
Production
(nom: "John", 21 ans) Peter John
La syntaxe de diffusion a … été introduite dans la version ultérieure (ES6).
La syntaxe de diffusion peut être utilisée pour faire une copie superficielle d'un objet. Cela signifie qu'il copiera l'objet. Cependant, les objets plus profonds sont référencés. Par exemple,
const person = ( name: 'John', age: 21, // the inner objects will change in the shallow copy marks: ( math: 66, english: 73) ) // cloning the object const clonePerson = (… person) console.log(clonePerson); // (name: "John", age: 21, marks: (… )) // changing the value of clonePerson clonePerson.marks.math = 100; console.log(clonePerson.marks.math); // 100 console.log(person.marks.math); // 100
Ici, lorsque la valeur de l'objet interne mathest modifiée à 100 de l' clonePersonobjet, la valeur de la mathclé de l' personobjet change également.
Exemple 3: cloner l'objet à l'aide de JSON.parse ()
// program to clone the object // declaring object const person = ( name: 'John', age: 21, ) // cloning the object const clonePerson = JSON.parse(JSON.stringify(person)); console.log(clonePerson); // changing the value of clonePerson clonePerson.name = 'Peter'; console.log(clonePerson.name); console.log(person.name);
Production
(nom: "John", 21 ans) Peter John
Dans le programme ci-dessus, la JSON.parse()méthode est utilisée pour cloner un objet.
Remarque : JSON.parse()fonctionne uniquement avec Numberet Stringobject literal. Il ne fonctionne pas avec un objet littéral avec des propriétés functionou symbol.
