Как клонировать объект в JavaScript

1️⃣ Как кратко ответить

Для клонирования объекта в JavaScript можно использовать Object.assign() для поверхностного копирования или JSON.parse(JSON.stringify()) для глубокого копирования. Также можно использовать оператор распространения {...obj} для поверхностного копирования. Для сложных объектов с методами и прототипами лучше использовать библиотеки, такие как Lodash.

2️⃣ Подробное объяснение темы

Клонирование объекта в JavaScript — это процесс создания нового объекта, который является копией существующего. Это может быть полезно, когда нужно создать независимую копию объекта, чтобы изменения в одном объекте не влияли на другой.

Поверхностное копирование

Поверхностное копирование создает новый объект, но копирует только значения верхнего уровня. Если объект содержит вложенные объекты, они не будут клонированы, а будут ссылаться на те же объекты, что и в оригинале.

Object.assign()

const original = { a: 1, b: { c: 2 } };
const copy = Object.assign({}, original);

• Object.assign({}, original) создает новый объект и копирует в него все перечисляемые свойства из original.
• copy — это новый объект, но copy.b все еще ссылается на тот же объект, что и original.b.

Оператор распространения

const original = { a: 1, b: { c: 2 } };
const copy = { ...original };

• { ...original } создает новый объект и копирует все свойства из original.
• Как и в случае с Object.assign(), вложенные объекты не клонируются.

Глубокое копирование

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

JSON.parse(JSON.stringify())

const original = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(original));

• JSON.stringify(original) преобразует объект в строку JSON.
• JSON.parse(...) преобразует строку JSON обратно в объект.
• deepCopy — это новый объект, включая все вложенные объекты.

Ограничения: Этот метод не работает с функциями, undefined, символами и объектами, содержащими циклические ссылки.

Использование библиотек

Для сложных объектов, которые содержат методы, прототипы или циклические ссылки, лучше использовать специализированные библиотеки, такие как Lodash.

Пример с Lodash

const _ = require('lodash');
const original = { a: 1, b: { c: 2 } };
const deepCopy = _.cloneDeep(original);

• _.cloneDeep(original) создает глубокую копию объекта, включая все вложенные структуры данных.

Применение

Клонирование объектов полезно в ситуациях, когда нужно сохранить состояние объекта перед изменениями, работать с копиями данных в тестах или при передаче данных между компонентами в приложениях, например, на React.