In questo esempio imparerai a scrivere un programma che clona un oggetto.
Per comprendere questo esempio, è necessario conoscere i seguenti argomenti di programmazione JavaScript:
- Oggetti JavaScript
- JavaScript Object.assign ()
Un oggetto JavaScript è un tipo di dati complesso che può contenere vari tipi di dati. Per esempio,
const person = ( name: 'John', age: 21, )
Ecco personun oggetto. Ora, non puoi clonare un oggetto facendo qualcosa del genere.
const copy = person; console.log(copy); // (name: "John", age: 21)
Nel programma precedente, la copyvariabile ha lo stesso valore persondell'oggetto. Tuttavia, se si modifica il valore copydell'oggetto, personcambierà anche il valore nell'oggetto. Per esempio,
copy.name = 'Peter'; console.log(copy.name); // Peter console.log(person.name); // Peter
Il cambiamento è visibile in entrambi gli oggetti perché gli oggetti sono tipi di riferimento . Ed entrambi copye personstanno puntando allo stesso oggetto.
Esempio 1. Clonare l'oggetto utilizzando 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);
Produzione
(nome: "John", età: 21) Peter John
Il Object.assign()metodo fa parte dello standard ES6 . Il Object.assign()metodo esegue una copia completa e copia tutte le proprietà da uno o più oggetti.
Nota : il vuoto ()come primo argomento garantisce di non modificare l'oggetto originale.
Esempio 2: clonare l'oggetto utilizzando la sintassi diffusa
// 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);
Produzione
(nome: "John", età: 21) Peter John
La sintassi diffusa è … stata introdotta nella versione successiva (ES6).
La sintassi diffusa può essere utilizzata per creare una copia superficiale di un oggetto. Ciò significa che copierà l'oggetto. Tuttavia, si fa riferimento agli oggetti più profondi. Per esempio,
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
Qui, quando il valore oggetto interno mathviene cambiato in 100 di clonePersonoggetto, il valore della mathchiave del personoggetto cambia anche.
Esempio 3: clonare l'oggetto utilizzando 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);
Produzione
(nome: "John", età: 21) Peter John
Nel programma precedente, il JSON.parse()metodo viene utilizzato per clonare un oggetto.
Nota : JSON.parse()funziona solo con Numbere Stringobject literal. Non funziona con un oggetto letterale con proprietà functiono symbol.
