Програма JavaScript за клониране на JS обект

В този пример ще се научите да пишете програма, която клонира обект.

За да разберете този пример, трябва да имате познанията по следните теми за програмиране на JavaScript:

  • Обекти на JavaScript
  • JavaScript Object.assign ()

Обектът на JavaScript е сложен тип данни, който може да съдържа различни типове данни. Например,

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

Ето, personима обект. Сега не можете да клонирате обект, като правите нещо подобно.

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

В горната програма copyпроменливата има същата стойност като personобекта. Ако обаче промените стойността на copyобекта, стойността в personобекта също ще се промени. Например,

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

Промяната се вижда и в двата обекта, тъй като обектите са референтни типове . И двете, copyи personсочат към един и същ обект.

Пример 1. Клонирайте обекта с помощта на 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);

Изход

 (име: "Йоан", възраст: 21) Питър Джон

В Object.assign()метода е част от ES6 стандарт. На Object.assign()това осъществява метод дълбоко копират и копия на всички имоти предлагани от един или повече обекти.

Забележка : Празното ()като първи аргумент гарантира, че няма да промените оригиналния обект.

Пример 2: Клонирайте обекта, използвайки синтаксис на разпространение

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

Изход

 (име: "Йоан", възраст: 21) Питър Джон

Синтаксисът на разпространението е въведен в по-късната версия (ES6).

Разпространеният синтаксис може да се използва за плитко копиране на обект. Това означава, че ще копира обекта. Въпреки това, по-дълбоките обекти са посочени. Например,

 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

Тук, когато вътрешната стойност на обекта mathсе промени на 100 на clonePersonобекта, стойността на mathключа на personобекта също се променя.

Пример 3: Клонирайте обекта с помощта на 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);

Изход

 (име: "Йоан", възраст: 21) Питър Джон

В горната програма JSON.parse()методът се използва за клониране на обект.

Забележка : JSON.parse()работи само с Numberи Stringлитерал на обект. Той не работи с обектен литерал със functionили symbolсвойства.

Интересни статии...