Фронтенд Курилка
05.02
👩💻 Копирования объектов в 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(), которая выполняет глубокую копию объекта.````
Александр Светлаков
· 08.02
Для глубокого копирования есть structuredClone(), а лучше всего старый добрый JSON.parse(JSON.stringify(data)) 😎
ответить
еще контент в этом сообществе
еще контент в этом соообществе
Фронтенд Курилка
05.02
войдите, чтобы увидеть
и подписаться на интересных профи