Клонирането на обект в JS не е подобно изживяване като клонирането на променлива в JS.
Ако присвоим един обект на друг обект, тогава данните не се копират, но препратката [място в паметта] се копира.
Проблем при копиране на обекти
let obj = {
name: "sarika",
};
let user = obj;
user.name = "siddanta";
console.log(obj); //siddanta
console.log(user); //siddanta
Плитко копие срещу дълбоко копие
При плитко копиране се копира само първото ниво на обектите. При дълбоко копиране всички нива, т.е. вложени обекти, също се копират.
Плитко копие
Има два начина, по които можем да направим плитко копиране в JS.
- Използване на Object.assign()
- Използване на оператор за разпространение (…)
Използване на object.assign()
let obj = {
name: "sarika",
};
let user = object.assign({}, obj);
user.name = "siddanta";
console.log("object is: ", obj); // Object is sarika
console.log("User is: ", user); // User is siddanta
Използване на оператор за разпространение (…)
let obj = {
name: "sarika",
};
let user = { ...obj };
user.name = "siddanta";
console.log("object is: ", obj); // Object is sarika
console.log("User is: ", user); // User is siddanta
Дълбоко копие
Използваме JSON.parse() и JSON.stringify() за дълбоко копиране в JS. В дълбоко копие JS копира всички членове на стария обект, разпределя отделно място в паметта за новия обект и след това присвоява копираните членове на новия обект.
let obj = {
name: "sarika",
address: {
city: "Pokhara",
},
};
let user = JSON.parse(JSON.stringify(obj));
user.name = "siddanta";
user.address.city = "Kathmandu";
console.log("object is: ", obj); //Object is: name: "sarika", address: "Pokhara"
console.log("User is: ", user); //User is: name: "siddanta", address: "Kathmandu"
Ограничение: Не можете да копирате функции и дати/часове с дълбоко копиране.
Заключение
Следователно плиткото копие не ни помага да копираме вложените обекти, докато дълбокото копие ни помага да копираме вложените обекти и се използва за копиране на обектите в JS.
