Источник: Nuances of Programming
Поскольку объекты в JavaScript являются ссылочными значениями, их нельзя просто скопировать с помощью =. Но не беспокойтесь, существует 3 способа клонирования объекта 👍.
Объекты — это ссылочные типы
Почему нельзя использовать =? Посмотрим, что может произойти:
Оба объекта выдают одно и то же. На данный момент никаких проблем. Рассмотрим, что произойдет после редактирования второго объекта:
obj2 был изменен, однако изменения коснулись и obj. Причина заключается в том, что объекты являются ссылочными типами. Поэтому при использовании =, указатель копируется в область занимаемой памяти. Ссылочные типы не содержат значений, они являются указателем на значение в памяти.
Использование Spread
С помощью spread можно клонировать объект. Обратите внимание, что копия будет неглубокой. На момент публикации этого руководства оператор spread для клонирования объектов находился на стадии 4, соответственно официально он не указан в спецификациях. Поэтому для того, чтобы его использовать, нужно выполнить компиляцию с Babel (или чем-то подобным).
Использование Object.assign
Object.assign, выпущенный официально, также создает неглубокую копию объекта.
Использование JSON
Этот способ предоставляет глубокую копию. Стоит упомянуть, что это быстрый и грязный способ глубокого клонирования объекта. В качестве более надежного решения рекомендуется использовать что-то вроде lodash.
Lodash DeepClone или JSON?
- JSON.stringify/parse работает только с литералом Number, String и Object без функции или свойства Symbol.
- deepClone работает со всеми типами, а функция и символ копируются по ссылке.
Пример:
Глубокое или неглубокое клонирование?
При использовании spread для копирования объекта создается неглубокая копия. Если массив является вложенным или многомерным, этот способ не будет работать. Рассмотрим пример:
Таким образом, клонированный объект был изменен с добавлением city. В результате получаем:
Неглубокая копия предполагает копирование первого уровня и ссылается на более глубокие уровни.
Глубокая копия
Возьмем тот же пример, но применим глубокую копию с использованием JSON:
Глубокая копия является копией для вложенных объектов. Однако иногда достаточно использования неглубокой копии.
Производительность
К сожалению, на данный момент нельзя написать тестирование для spread, поскольку официально он не указан в спецификации. Однако результат показывает, что Object.assign намного быстрее, чем JSON. Тест на производительность можно найти здесь.
Object.assign и Spread
Стоит отметить, что Object.assign — это функция, которая модифицирует и возвращает целевой объект. В данном примере при использовании:
const cloneFood = Object.assign({}, food)
{} — это модифицируемый объект. В этой точке на целевой объект не ссылаются никакие переменные, но поскольку Object.assign возвращает целевой объект, то можно сохранить полученный присвоенный объект в переменную cloneFood. Данный пример можно изменить следующим образом:
Очевидно, что значение beef в объекте food неверно, поэтому нужно назначить правильное значение beef с помощью Object.assign. На самом деле мы не используем возвращаемое значение функции, а изменяем целевой объект, на который ссылаемся с помощью константы food.
С другой стороны, Spread — это оператор, который копирует свойства одного объекта в новый объект. При репликации приведенного выше примера с помощью spread для изменения переменной food...
... мы получаем ошибку в результате использования spread для создания новых объектов и, следовательно, присваиваем новый объект для food, который был объявлен с помощью const, что недопустимо. Поэтому можно либо объявить новую переменную для хранения нового объекта, как показано ниже:
Спасибо за внимание!
Читайте также:
Читайте нас в телеграмме и vk
Перевод статьи Samantha Ming: 3 Ways to Clone Objects in JavaScript