JavaScript-program til at klone et JS-objekt

I dette eksempel lærer du at skrive et program, der kloner et objekt.

For at forstå dette eksempel skal du have kendskab til følgende JavaScript-programmeringsemner:

  • JavaScript-objekter
  • JavaScript Object.assign ()

Et JavaScript-objekt er en kompleks datatype, der kan indeholde forskellige datatyper. For eksempel,

 const person = ( name: 'John', age: 21, )

Her personer et objekt. Nu kan du ikke klone et objekt ved at gøre noget som dette.

 const copy = person; console.log(copy); // (name: "John", age: 21)

I ovenstående program har copyvariablen den samme værdi som personobjektet. Men hvis du ændrer copyobjektets værdi, ændres værdien i personobjektet også. For eksempel,

 copy.name = 'Peter'; console.log(copy.name); // Peter console.log(person.name); // Peter

Ændringen ses i begge objekter, fordi objekter er referencetyper . Og både copyog personpeger på det samme objekt.

Eksempel 1. Klon objektet ved hjælp af 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);

Produktion

 (navn: "John", alder: 21) Peter John

Den Object.assign()fremgangsmåde er en del af ES6 standard. De Object.assign()udfører metode dybe kopiere og kopierer alle egenskaber fra et eller flere objekter.

Bemærk : Det tomme ()som det første argument sikrer, at du ikke ændrer det originale objekt.

Eksempel 2: Klon objektet ved hjælp af Spread Syntax

 // 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);

Produktion

 (navn: "John", alder: 21) Peter John

Spread-syntaksen blev introduceret i den senere version (ES6).

Den spredte syntaks kan bruges til at lave en lav kopi af et objekt. Dette betyder, at det vil kopiere objektet. Imidlertid henvises der til de dybere objekter. For eksempel,

 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

Her mathændres værdien af objektets nøgle , når den indre objektværdi ændres til 100 af clonePersonobjektet .mathperson

Eksempel 3: Klon objektet ved hjælp af 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);

Produktion

 (navn: "John", alder: 21) Peter John

I ovenstående program JSON.parse()bruges metoden til at klone et objekt.

Bemærk : JSON.parse()fungerer kun med Numberog Stringobjekt bogstaveligt. Det fungerer ikke med et objekt, der er bogstaveligt med functioneller symbolegenskaber.

Interessante artikler...