Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос нашим менторам. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете
JS: Объекты

Клонирование (копирование)

Клонирование объектов — ещё одна часто встречающаяся операция в разработке, особенно во фронтенде. При клонировании создается копия исходного объекта, то есть новый объект, но наполненный теми же данными.

В 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). Очень важно запомнить, что именно это имеют ввиду в JavaScript, когда употребляют термин "клонирование". Само по себе это не плохо, поверхностное клонирование подходит для многих ситуаций. Там где его недостаточно, нужно использовать полное клонирование, которое называют глубоким (deep).

В JavaScript нет встроенного способа клонировать объекты полностью. Поэтому у разработчиков принято использовать готовую функцию cloneDeep() из библиотеки lodash.

import _ from 'lodash';

const user = { company: { name: 'Hexlet' } };
const copyOfUser = _.cloneDeep(user);

user.company === copyOfUser.company; // false

У полного копирования есть один серьёзный недостаток. Если объект большой и имеет сложную структуру, то полное копирование может сильно влиять на производительность. Это одна из причин, почему такое копирование не выполняется по умолчанию.


<span class="translation_missing" title="translation missing: ru.web.courses.lessons.mentors.mentor_avatars">Mentor Avatars</span>

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят менторы из команды Хекслета или другие студенты.

Для полного доступа к курсу нужна профессиональная подписка

Профессиональная подписка откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, даст возможность обращаться за помощью к менторам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
115
курсов
892
упражнения
2241
час теории
3196
тестов

Зарегистрироваться

или войти в аккаунт

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 115 курсов, 2000+ часов теории
  • 800 практических заданий в браузере
  • 250 000 студентов

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг».

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Rambler
Логотип компании Bookmate
Логотип компании Botmother

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг».