Клонирование объекта в 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.
