Клонирование объектов — еще одна часто встречающаяся операция в разработке, особенно во фронтенде. При клонировании создается копия исходного объекта — то есть новый объект, наполненный теми же данными.
В JavaScript клонирование можно эмулировать с помощью Object.assign(). Для этого нужно первым параметром передать пустой объект, а вторым — тот, который нужно клонировать:
const user = { name: 'Tirion', email: 'support@hexlet.io', age: 44 };
// Данные из user копируются во вновь созданный объект
const copyOfUser = Object.assign({}, user);
user === copyOfUser; // false
В результате получаются два разных объекта с одним и тем же содержимым. Объекты разные, поэтому изменения в одном не меняют данные в другом.
Клонирование также выполняют с помощью функции clone() библиотеки lodash. Результат выполнения этой функции идентичен примерам выше, но благодаря своему имени, она лучше выражает смысл операции:
import _ from 'lodash';
const user = { name: 'Tirion', email: 'support@hexlet.io', age: 44 };
const copyOfUser = _.clone(user);
Клонирование способами выше не затрагивает вложенные объекты. Они оказываются в новом объекте по ссылке из старого:
const user = { company: { name: 'Hexlet' } };
const copyOfUser = Object.assign({}, user);
// Это тот же объект
user.company === copyOfUser.company; // true
user.company.createdAt = 2012;
console.log(copyOfUser.company.createdAt); // 2012
Такое клонирование называется поверхностным (shallow copying). Очень важно запомнить, что именно это имеют ввиду в JavaScript, когда употребляют термин «клонирование». Поверхностное клонирование подходит для многих ситуаций, но иногда его недостаточно. В таких случаях нужно использовать полное или глубокое клонирование (deep copying).
В JavaScript есть встроенный метод structuredClone(), c помощью которого можно выполнить глубокое копирование объектов:
const user = { company: { name: 'Hexlet' } };
const copyOfUser = structuredClone(user);
user.company === copyOfUser.company; // false
Библиотека lodash также предоставляет готовую функцию cloneDeep(). Она была распространенным решением проблемы глубокого копирования, пока не появился метод structuredClone().
У полного клонирования есть один серьезный недостаток. Если мы работаем с большим объектом со сложной структурой, то полное клонирование может сильно влиять на производительность. Это одна из причин, почему такое клонирование не выполняется по умолчанию.
Дополнительные материалы
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты
- Статья «Как учиться и справляться с негативными мыслями»
- Статья «Ловушки обучения»
- Статья «Сложные простые задачи по программированию»
- Урок «Как эффективно учиться на Хекслете»
- Вебинар «Как самостоятельно учиться»
Для полного доступа к курсу нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
