Поверхневе vs глибоке копіювання об'єкта
Коротко
| Тип копіювання | Що робить | Вкладені об'єкти |
|---|---|---|
| Поверхневе (shallow copy) | Копіює тільки верхній рівень властивостей | Зберігаються посилання на оригінальні об'єкти |
| Глибоке (deep copy) | Копіює все дерево цілком (включно з вкладеними об'єктами) | Створює нові копії всіх вкладених структур |
Приклад поверхневого копіювання
javascript
const user = {
name: 'Tim',
address: { city: 'Kyiv' }
};
const clone = { ...user }; // поверхнева копія
clone.address.city = 'Lviv';
console.log(user.address.city); // "Lviv"Чому так сталося:
{ ...user }копіює тільки перший рівень властивостей;address- це об'єкт, і в копії зберігається те саме посилання на нього;- зміна
clone.address.cityзачепила оригінал.
Приклад глибокого копіювання
javascript
const user = {
name: 'Tim',
address: { city: 'Kyiv' }
};
const clone = structuredClone(user); // глибока копія
clone.address.city = 'Lviv';
console.log(user.address.city); // "Kyiv"Тут створюється повністю незалежна копія: усі вкладені об'єкти теж скопійовані заново.
Ілюстрація (проста аналогія)
Уяви:
javascript
user ──► address ──► { city: 'Kyiv' }
clone ─┘ ↑
└── (те саме посилання)У поверхневій копії обидві змінні "вказують" на той самий внутрішній об'єкт.
А при глибокому копіюванні:
javascript
user ──► address1 ─► { city: 'Kyiv' }
clone ─► address2 ─► { city: 'Lviv' }Це два повністю незалежних об'єкти.
Як зробити глибоке копіювання
| Метод | Глибоке копіювання | Особливості |
|---|---|---|
structuredClone(obj) | Так | Сучасний, зберігає типи |
JSON.parse(JSON.stringify(obj)) | Так | Втрачає функції, Date, undefined |
_.cloneDeep(obj) (lodash) | Так | Найнадійніший і крос-платформний |
Підсумок
| Властивість | Поверхневе копіювання | Глибоке копіювання |
|---|---|---|
| Копіює тільки верхній рівень | Так | Ні |
| Копіює вкладені об'єкти | Ні (посилання) | Так |
| Зміни у вкладених даних впливають на оригінал | Так | Ні |
| Приклади | { ...obj }, Object.assign() | structuredClone(), _.cloneDeep() |
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.