👩‍💻 Копирования объектов в JavaScript

В JavaScript существует несколько способов создания копий объектов. Различают два основных типа копирования:

1. Поверхностная копия (Shallow Copy) При поверхностной копии создаются новые объекты, но ссылки на вложенные объекты остаются прежними. Это означает, что изменения во вложенных объектах будут отражаться и в исходном объекте, и в его копии.

Примеры:

a) С использованием оператора spread (...) `const obj = { a: 1, b: { c: 2 } }; const copyObj = { ...obj }; console.log(copyObj); // { a: 1, b: { c: 2 } }Здесь copyObj будет иметь те же значения свойств, что и obj, однако свойство b останется ссылкой на тот же объект.

b) С использованием метода Object.assign() `const obj = { a: 1, b: { c: 2 } }; const copyObj = Object.assign({}, obj); console.log(copyObj); // { a: 1, b: { c: 2 } }Метод Object.assign() создает новый объект и копирует свойства из переданных аргументов. Однако, как и в случае с оператором spread, ссылки на вложенные объекты сохраняются.


2. Глубокая копия (Deep Copy)

Глубокое копирование подразумевает создание полностью независимых копий всех уровней вложенности объекта. Изменения в одной структуре не влияют на другую.

a) Ручное рекурсивное копирование `function deepCopy(obj) { if (typeof obj !== 'object' || obj === null) return obj;

let newObj = Array.isArray(obj) ? [] : {};

for (let key in obj) { if (obj.hasOwnProperty(key)) { newObj[key] = deepCopy(obj[key]); } }

return newObj; }

const obj = { a: 1, b: { c: 2 } }; const deepCopyObj = deepCopy(obj); console.log(deepCopyObj); // { a: 1, b: { c: 2 } } deepCopyObj.b.c = 10; console.log(obj); // { a: 1, b: { c: 2 } }Этот метод использует рекурсию для глубокого копирования каждого уровня вложенного объекта.

b) Использование библиотеки lodash.cloneDeep() `import _ from 'lodash';

const obj = { a: 1, b: { c: 2 } }; const deepCopyObj = _.cloneDeep(obj); console.log(deepCopyObj); // { a: 1, b: { c: 2 } } deepCopyObj.b.c = 10; console.log(obj); // { a: 1, b: { c: 2 } }Библиотека Lodash предоставляет функцию cloneDeep(), которая выполняет глубокую копию объекта.````

repost

27

input message

напишите коммент

· 08.02

Для глубокого копирования есть structuredClone(), а лучше всего старый добрый JSON.parse(JSON.stringify(data)) 😎

ответить

еще контент в этом сообществе

еще контент в этом соообществе

войдите, чтобы увидеть

и подписаться на интересных профи

в приложении больше возможностей

пока в веб-версии есть не всё — мы вовсю работаем над ней

сетка — cоциальная сеть для нетворкинга от hh.ru

пересекайтесь с теми, кто повлияет на ваш профессиональный путь