In dit voorbeeld leer je een programma te schrijven dat een object kloont.
Om dit voorbeeld te begrijpen, moet u kennis hebben van de volgende JavaScript-programmeeronderwerpen:
- JavaScript-objecten
- JavaScript Object.assign ()
Een JavaScript-object is een complex gegevenstype dat verschillende gegevenstypen kan bevatten. Bijvoorbeeld,
const person = ( name: 'John', age: 21, )
Hier personis een object. Nu kun je een object niet klonen door zoiets als dit te doen.
const copy = person; console.log(copy); // (name: "John", age: 21)
In het bovenstaande programma heeft de copyvariabele dezelfde waarde als het personobject. Als u echter de waarde van het copyobject wijzigt, verandert de waarde in het personobject ook. Bijvoorbeeld,
copy.name = 'Peter'; console.log(copy.name); // Peter console.log(person.name); // Peter
De verandering is zichtbaar in beide objecten omdat objecten referentietypes zijn . En beide copyen personwijzen naar hetzelfde object.
Voorbeeld 1. Kloon het object met 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);
Uitvoer
(naam: "John", leeftijd: 21) Peter John
De Object.assign()methode maakt deel uit van de ES6- standaard. De Object.assign()methode voert een diepe kopie uit en kopieert alle eigenschappen van een of meer objecten.
Opmerking : Het lege ()als eerste argument zorgt ervoor dat u het originele object niet verandert.
Voorbeeld 2: het object klonen met de spreidingssyntaxis
// 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);
Uitvoer
(naam: "John", leeftijd: 21) Peter John
De spread-syntaxis … is geïntroduceerd in de latere versie (ES6).
De spread-syntaxis kan worden gebruikt om een oppervlakkige kopie van een object te maken. Dit betekent dat het het object zal kopiëren. Er wordt echter verwezen naar de diepere objecten. Bijvoorbeeld,
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
Hier, wanneer de waarde van het binnenste object mathwordt gewijzigd in 100 van clonePersonobject, verandert ook de waarde van de mathsleutel van het personobject.
Voorbeeld 3: het object klonen met 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);
Uitvoer
(naam: "John", leeftijd: 21) Peter John
In het bovenstaande programma wordt de JSON.parse()methode gebruikt om een object te klonen.
Let op : JSON.parse()werkt alleen met Numberen Stringobject letterlijk. Het werkt niet met een object letterlijk met functionof symboleigenschappen.
