У цьому прикладі ви навчитеся писати програму, яка клонує об’єкт.
Щоб зрозуміти цей приклад, ви повинні знати такі теми програмування 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об'єктом literal. Він не працює з об'єктом-літералом functionабо symbolвластивостями.
