Dalam contoh ini, Anda akan belajar menulis program yang mengkloning objek.
Untuk memahami contoh ini, Anda harus memiliki pengetahuan tentang topik pemrograman JavaScript berikut:
- Objek JavaScript
- JavaScript Object.assign ()
Objek JavaScript adalah tipe data kompleks yang bisa berisi berbagai tipe data. Sebagai contoh,
const person = ( name: 'John', age: 21, )
Di sini, personadalah sebuah objek. Sekarang, Anda tidak dapat mengkloning objek dengan melakukan hal seperti ini.
const copy = person; console.log(copy); // (name: "John", age: 21)
Pada program di atas, copyvariabel memiliki nilai yang sama dengan personobjeknya. Namun, jika Anda mengubah nilai copyobjek, nilai personobjek juga akan berubah. Sebagai contoh,
copy.name = 'Peter'; console.log(copy.name); // Peter console.log(person.name); // Peter
Perubahan terlihat di kedua objek karena objek adalah tipe referensi . Dan kedua copydan personyang menunjuk ke objek yang sama.
Contoh 1. Kloning Objek Menggunakan 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);
Keluaran
(nama: "John", umur: 21) Peter John
The Object.assign()metode adalah bagian dari ES6 standar. The Object.assign()Metode Melakukan mendalam copy dan salinan semua properti dari satu atau lebih objek.
Catatan : Kosong ()sebagai argumen pertama memastikan bahwa Anda tidak mengubah objek aslinya.
Contoh 2: Mengkloning Objek Menggunakan Sintaksis Spread
// 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);
Keluaran
(nama: "John", umur: 21) Peter John
Sintaks penyebaran … diperkenalkan di versi yang lebih baru (ES6).
Sintaks penyebaran dapat digunakan untuk membuat salinan dangkal suatu objek. Artinya itu akan menyalin objek. Namun, objek yang lebih dalam dirujuk. Sebagai contoh,
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
Di sini, ketika nilai objek batin mathberubah menjadi 100 dari clonePersonobjek, nilai mathkunci dari personobjek juga berubah.
Contoh 3: Menggandakan Objek Menggunakan 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);
Keluaran
(nama: "John", umur: 21) Peter John
Dalam program di atas, JSON.parse()metode ini digunakan untuk mengkloning objek.
Catatan : JSON.parse()hanya bekerja dengan Numberdan Stringobjek literal. Ini tidak bekerja dengan literal objek dengan functionatau symbolproperti.
