JavaScript-ohjelma JS-objektin kloonaamiseksi

Tässä esimerkissä opit kirjoittamaan ohjelman, joka kloonaa objektin.

Tämän esimerkin ymmärtämiseksi sinulla on oltava tieto seuraavista JavaScript-ohjelmoinnin aiheista:

JavaScript-objektit
JavaScript Object.ignment ()

JavaScript-objekti on monimutkainen tietotyyppi, joka voi sisältää erilaisia tietotyyppejä. Esimerkiksi,

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

Tässä personon esine. Nyt et voi kloonata kohdetta tekemällä jotain tällaista.

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

Yllä olevassa ohjelmassa copymuuttujalla on sama arvo kuin personobjektilla. Jos kuitenkin muutat copyobjektin arvoa, myös objektin arvo personmuuttuu. Esimerkiksi,

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

Muutos näkyy molemmissa kohteissa, koska objektit ovat viitetyyppejä . Ja molemmat copyja personosoittavat samaan esineeseen.

Esimerkki 1. Kloonaa objekti käyttämällä 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);

Tuotos

 (nimi: "John", ikä: 21) Peter John

Object.assign()Menetelmä on osa ES6 standardin. Object.assign()Menetelmä suorittaa syvä kopioida ja kopioi kaikki ominaisuudet yhdestä tai useammasta esineitä.

Huomaa : Tyhjä ()ensimmäisenä argumenttina varmistaa, että et muuta alkuperäistä objektia.

Esimerkki 2: Kloonaa objekti Spread-syntaksilla

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

Tuotos

 (nimi: "John", ikä: 21) Peter John

Leviämissyntakse … otettiin käyttöön uudemmassa versiossa (ES6).

Leviämisen syntaksia voidaan käyttää matalan kopion tekemiseen objektista. Tämä tarkoittaa, että se kopioi objektin. Syvempiin kohteisiin viitataan kuitenkin. Esimerkiksi,

 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

Tässä, kun sisempi kohteen arvo mathon muuttunut 100 ja clonePersonkohteen, arvo mathavaimen personkohde muuttuu myös.

Esimerkki 3: Kloonaa objekti käyttämällä 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);

Tuotos