5 лет назад
Копирование объектов в JS
Перевод этой статьи. В этой статье мы рассмотрим разные способы поверхностного и глубокого копирования объектов в JavaScript. Для начала стоит освежить пару базовых принципов. Объекты в JavaScript – это просто ссылки на участок в памяти. Эти ссылки мутабельны, т.е. их можно переназначить. Когда мы делаем копию такой ссылки, мы просто получаем 2 ссылки, которые указывают на один и тот же участок в памяти: В примере выше обе переменные – foo и bar – будут меняться при изменении одной из них. Это яркий...
👩‍💻 Копирования объектов в 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(), которая выполняет глубокую копию объекта.