Клонирование массива объектов в JavaScript: обход проблем

Быстрый ответ

Для глубокого копирования массива объектов (когда создаются дубликаты всех вложенных объектов) используйте комбинацию JSON.parse и JSON.stringify:

const скопированныйМассив = JSON.parse(JSON.stringify(исходныйМассив));

Для поверхностного копирования (новый массив, но идентичные объекты) используйте оператор расширения ...:

const скопированныйМассив = [...исходныйМассив];

В случае присутствия в массиве функций или циклических ссылок обратитесь к функции _.cloneDeep из библиотеки Lodash:

const скопированныйМассив = _.cloneDeep(исходныйМассив);

Профессиональное уровень копирования

Циклические ссылки: копируем с осторожностью!

Для массивов с циклическими ссылками рекомендуется использовать функцию structuredClone:

const скопированныйМассив = structuredClone(исходныйМассив);

Этот метод является новым API, поэтому для поддержки старых браузеров потребуется полифилл.

Подробнее об этом расскажет наш спикер на видео

Производительность в приоритете

Если вас волнует скорость и производительность при глубоком копировании, рассмотрите применение structuredClone и методов JSON. Для быстрого копирования объектов, изменения которых поверхностные, можете использовать оператор расширения и .map():

const скопированныйМассив = исходныйМассив.map(obj => ({ ...obj }));

Object.assign: скорость на поверхности

Для копирования массива объектов, изменения которых поверхностные, идеально подойдет комбинированный вариант применения Object.assign и .map():

const скопированныйМассив = исходныйМассив.map(obj => Object.assign({}, obj));

Для очень быстрого копирования можете использовать метод .slice(0):

const скопированныйМассив = исходныйМассив.slice(0);

Библиотеки и индивидуальные решения

При работе с сложными структурами данных может пригодиться библиотека Immutable.js или собственные функции копирования, учитывающие рекурсию и другие особенности данных.

Мастерство быстрого и глубокого копирования

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

Выбор подходящего метода копирования

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

Визуализация

Копирование массива объектов в JavaScript можно сравнить с клонированием денежных купюр💵:

Исходный массив: [💵1, 💵2, 💵3]

Процесс копирования напоминает копировальный аппарат, создающий идентичный набор:

let скопированныйМассив = исходныйМассив.map(banknote => ({ ...banknote }));

Копирование приводит к появлению независимой, но подобной коллекции:

Скопированный массив:  [💵1*, 💵2*, 💵3*]

* означает идеальную копию, созданную независимо.

Предотвращаем путаницу в копиях

Будьте осмотрительны при копировании ссылочных типов данных. Несоответствие может привести к ошибкам, когда изменение одной копии затрагивает другую. Минимизируйте риски, связанные с большой рекурсией и копированием сложных структур данных.

Специальные методы копирования

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

Поверхностное копирование для статичных клонов

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

Полезные материалы

1. [Глубокое копирование – Глоссарий MDN Web Docs] — подробное объяснение сути глубокого копирования.
2. [Array.prototype.slice() – JavaScript] — детальный разбор метода .slice() для поверхностного копирования массивов.
3. [Документация Lodash] — руководство по методу cloneDeep из библиотеки Lodash для глубокого копирования.
4. [Глубокое копирование в JavaScript с помощью structuredClone] — знакомство с методом structuredClone для современных подходов к глубокому копированию.
5. [Immutable.js] — погружение в библиотеку Immutable.js для работы со сложными структурами данных и их неизменяемостью.