I det här exemplet lär du dig att skriva ett program som klonar ett objekt.
För att förstå detta exempel bör du ha kunskap om följande JavaScript-programmeringsämnen:
- JavaScript-objekt
- JavaScript Object.assign ()
Ett JavaScript-objekt är en komplex datatyp som kan innehålla olika datatyper. Till exempel,
const person = ( name: 'John', age: 21, )
Här personär ett objekt. Nu kan du inte klona ett objekt genom att göra något liknande detta.
const copy = person; console.log(copy); // (name: "John", age: 21)
I ovanstående program har copyvariabeln samma värde som personobjektet. Om du ändrar copyobjektets värde ändras dock också värdet i objektet person. Till exempel,
copy.name = 'Peter'; console.log(copy.name); // Peter console.log(person.name); // Peter
Förändringen syns i båda objekten eftersom objekt är referenstyper . Och båda copyoch personpekar på samma objekt.
Exempel 1. Klona objektet med 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
(namn: "John", ålder: 21) Peter John
Den Object.assign()metod är en del av ES6 standarden. De Object.assign()metod utför djupa kopiera och kopierar alla egenskaper från ett eller flera objekt.
Obs! Det tomma ()som det första argumentet säkerställer att du inte ändrar det ursprungliga objektet.
Exempel 2: Klona objektet med hjälp av 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
(namn: "John", ålder: 21) Peter John
Spridningssyntaxen … introducerades i den senare versionen (ES6).
Spridningssyntaxen kan användas för att göra en grund kopia av ett objekt. Det betyder att det kommer att kopiera objektet. Emellertid hänvisas till de djupare objekten. Till exempel,
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
Här, när det inre objektvärdet mathändras till 100 av clonePersonobjektet, ändras också värdet på objektets mathnyckel person.
Exempel 3: Klona objektet med 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
(namn: "John", ålder: 21) Peter John
I ovanstående program används JSON.parse()metoden för att klona ett objekt.
Obs : JSON.parse()fungerar bara med Numberoch Stringbokstavligen objekt. Det fungerar inte med ett föremål bokstavligt med functioneller symbolegenskaper.
