5 надежных способов копирования массивов в JavaScript без ошибок

Для кого эта статья:

• JavaScript-разработчики, включая начинающих и опытных
• Учащиеся и студенты, изучающие веб-разработку и JavaScript

• Инженеры-программисты, работающие с крупными проектами и сложными структурами данных

  Разработчику JavaScript едва ли удастся долго избегать ловушек копирования по ссылке. "Но ведь я просто скопировал массив..." — типичная фраза перед часами отладки кода. Вы меняете элемент в "новом" массиве, а исходный тоже меняется — классика жанра! Неожиданные мутации данных превращают код в минное поле, особенно в крупных проектах. Пора разобраться с этим раз и навсегда, вооружившись пятью безотказными методами создания настоящих копий массивов. Эта статья — ваш щит от "призрачных" изменений данных. 🛡️

Погружение в тонкости копирования массивов — один из ключевых навыков профессионального JavaScript-разработчика. На курсе Обучение веб-разработке от Skypro вы не только изучите эти и другие важнейшие концепции языка, но и примените их в реальных проектах под руководством практикующих разработчиков. Наши студенты не просто знают теорию — они умеют решать реальные проблемы с данными и создавать надежный, безопасный код.

Проблема копирования по ссылке в JavaScript и её решения

В отличие от примитивных типов данных (строк, чисел, булевых значений), массивы в JavaScript передаются по ссылке, а не по значению. Когда мы присваиваем массив новой переменной, мы создаём указатель на существующий массив, а не его копию.

Рассмотрим классический сценарий:

const originalArray = [1, 2, 3];
const supposedCopy = originalArray;
supposedCopy.push(4);

console.log(originalArray); // [1, 2, 3, 4] – Ой! 😱

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

Александр Петров, старший фронтенд-разработчик

Я хорошо помню свой первый проект с React. Клиенту требовалось приложение для управления списками задач с возможностью сортировки и фильтрации. Всё работало гладко, пока не появилась странная ошибка — при сортировке задач в одном компоненте, они неожиданно менялись местами в другом!

После нескольких часов отладки я обнаружил, что передавал один и тот же массив в несколько компонентов. Когда один компонент сортировал свою "копию", он фактически изменял исходный массив. Решение оказалось простым — использование spread-оператора для создания настоящей копии. Это был ценный урок о том, насколько коварным может быть копирование по ссылке.

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

• Поверхностное копирование (shallow copy) — создаёт новый массив, но сохраняет ссылки на вложенные объекты/массивы
• Глубокое копирование (deep copy) — полностью дублирует массив вместе со всеми вложенными структурами

Давайте рассмотрим оба подхода и конкретные методы их реализации. 🔍

Метод spread-оператор (...) для простых массивов

Spread-оператор, представленный в ES6, стал настоящим спасением для JavaScript-разработчиков. Этот элегантный синтаксис позволяет создавать поверхностные копии массивов с минимумом кода.

const originalArray = [1, 2, 3, 4, 5];
const copiedArray = [...originalArray];

copiedArray.push(6);
console.log(originalArray); // [1, 2, 3, 4, 5]
console.log(copiedArray); // [1, 2, 3, 4, 5, 6]

Spread-оператор распаковывает элементы исходного массива и помещает их в новый массив. Это создаёт подлинную копию на верхнем уровне. Однако помните о важном ограничении: это поверхностное копирование.

Когда мы работаем с вложенными структурами данных, spread-оператор копирует только ссылки на вложенные объекты:

const nestedArray = [1, 2, [3, 4]];
const copiedNested = [...nestedArray];

copiedNested[2][0] = 99;
console.log(nestedArray); // [1, 2, [99, 4]] – Вложенный массив изменился! ⚠️

Тем не менее, для массивов, содержащих только примитивные значения, spread-оператор — идеальный выбор благодаря сочетанию читаемости и производительности.

Преимущества spread-оператора:

• Лаконичный и современный синтаксис
• Отличная читаемость кода
• Высокая производительность для одномерных массивов
• Интуитивно понятный для разработчиков, знакомых с ES6+

Еще одно изящное применение spread-оператора — комбинирование его с другими операциями:

// Копирование с одновременным добавлением элементов
const extendedCopy = [...originalArray, 6, 7, 8];

// Комбинирование массивов
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const combined = [...array1, ...array2]; // [1, 2, 3, 4, 5, 6]

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

Функциональные методы: slice(), concat() и Array.from()

До появления spread-оператора JavaScript-разработчики полагались на встроенные методы массивов для создания копий. Эти подходы не только по-прежнему актуальны, но иногда даже предпочтительнее благодаря своей кроссбраузерной совместимости и функциональному стилю.

Екатерина Соколова, техлид фронтенд-команды

В крупном банковском проекте моя команда столкнулась с интересной проблемой. В новой версии приложения для отображения финансовой статистики мы использовали spread-оператор для копирования массивов с данными. Но неожиданно начали поступать сообщения об ошибках от пользователей Internet Explorer 11, который всё ещё использовался во внутренней сети банка.

Spread-оператор не поддерживался в IE11, и нам пришлось быстро переписать код с использованием метода slice(). Этот опыт напомнил нам о важности учёта среды запуска приложения. С тех пор я всегда проверяю требования к браузерам перед выбором метода копирования массивов. slice() спас нас в той ситуации, и мы смогли быстро вернуть приложение в рабочее состояние без необходимости включать полифиллы.

Рассмотрим три основных функциональных метода:

slice()

Метод slice() создаёт новый массив, содержащий копию части исходного массива. Без аргументов он копирует весь массив:

const original = [1, 2, 3, 4, 5];
const copy = original.slice();
copy.push(6);

console.log(original); // [1, 2, 3, 4, 5]
console.log(copy); // [1, 2, 3, 4, 5, 6]

concat()

Метод concat() объединяет массивы и/или значения, возвращая новый массив. Его можно использовать для создания копии, объединяя исходный массив с пустым:

const original = [1, 2, 3, 4, 5];
const copy = original.concat();

copy[0] = 99;
console.log(original); // [1, 2, 3, 4, 5]
console.log(copy); // [99, 2, 3, 4, 5]

Array.from()

Метод Array.from() создаёт новый массив из массивоподобного или итерируемого объекта. Он идеально подходит для копирования массивов:

const original = [1, 2, 3, 4, 5];
const copy = Array.from(original);

copy.pop();
console.log(original); // [1, 2, 3, 4, 5]
console.log(copy); // [1, 2, 3, 4]

Все эти методы создают поверхностные копии, как и spread-оператор. Они отлично работают с одномерными массивами примитивов, но не копируют вложенные объекты.

Array.from() предлагает дополнительную гибкость, позволяя трансформировать элементы в процессе копирования:

// Копируем и преобразуем каждый элемент
const numbers = [1, 2, 3, 4, 5];
const doubled = Array.from(numbers, x => x * 2); // [2, 4, 6, 8, 10]

Выбор между этими методами часто зависит от контекста использования и стиля кода:

• Предпочитаете функциональный подход? Используйте slice() или concat()
• Нужна дополнительная трансформация элементов? Array.from() будет лучшим выбором
• Требуется максимальная совместимость со старыми браузерами? slice() и concat() — надёжные варианты

Однако для работы со сложными структурами данных потребуются методы глубокого копирования. 🔄

Глубокое копирование с JSON.parse/JSON.stringify

Когда дело касается многоуровневых структур данных, поверхностного копирования недостаточно. Тут на помощь приходит комбинация методов JSON.stringify() и JSON.parse() — распространённый трюк для глубокого копирования объектов и массивов.

const complexArray = [1, 2, {a: 3, b: 4}, [5, 6]];
const deepCopy = JSON.parse(JSON.stringify(complexArray));

// Изменяем вложенные структуры
deepCopy[2].a = 99;
deepCopy[3][0] = 100;

console.log(complexArray); // [1, 2, {a: 3, b: 4}, [5, 6]] – Исходный массив не изменился ✅
console.log(deepCopy); // [1, 2, {a: 99, b: 4}, [100, 6]]

Этот подход работает следующим образом: сначала JSON.stringify() преобразует JavaScript-структуру данных в JSON-строку, полностью разрывая все ссылки. Затем JSON.parse() преобразует эту строку обратно в абсолютно новую структуру данных.

Преимущества этого метода:

• Обеспечивает настоящее глубокое копирование
• Простой синтаксис — всего одна строка кода
• Не требует внешних библиотек
• Работает с произвольной глубиной вложенности

Однако у этого подхода есть существенные ограничения:

• Не поддерживает циклические ссылки (вызывает ошибку)
• Теряет методы и функции объектов
• Не сохраняет специальные JavaScript-типы (Map, Set, Date и др.)
• Значения undefined превращаются в null или пропадают

// Пример с ограничениями
const arrayWithSpecialTypes = [
new Date(), // Станет строкой
undefined, // Будет преобразовано в null
function() { return "Hello"; }, // Функция будет потеряна
new Map([[1, "one"]]) // Map будет преобразован в пустой объект {}
];

const copy = JSON.parse(JSON.stringify(arrayWithSpecialTypes));
console.log(copy);
// [строка с датой, null, null, {}] – Много информации потеряно! ⚠️

Этот метод подходит для относительно простых структур данных, состоящих из объектов, массивов, строк, чисел и логических значений. Он широко используется в проектах, где данные соответствуют такому формату (например, при работе с API).

Производительность также стоит учитывать: для больших массивов преобразование в JSON и обратно может потреблять значительные ресурсы. При работе с массивами, содержащими тысячи элементов, этот метод может создавать заметные задержки. 🐢

Современные API: structuredClone() и библиотеки клонирования

Копирование сложных структур данных долгое время оставалось проблемой в JavaScript, требуя либо собственных реализаций, либо использования внешних библиотек. К счастью, современные браузеры и Node.js теперь предлагают встроенное решение — метод structuredClone(). 🚀

Метод structuredClone() разработан специально для глубокого клонирования и преодолевает большинство ограничений подхода с JSON:

// Пример использования structuredClone()
const complexArray = [
{ nested: { data: 42 } },
new Date(),
new Map([[1, "one"]]),
new Set([1, 2, 3])
];

// Создаем глубокую копию
const deepClone = structuredClone(complexArray);

// Модифицируем копию
deepClone[0].nested.data = 100;

console.log(complexArray[0].nested.data); // 42 – Оригинал не изменился
console.log(deepClone[0].nested.data); // 100

Ключевые преимущества structuredClone():

• Поддержка циклических ссылок (в отличие от JSON.parse/stringify)
• Сохранение встроенных типов данных (Map, Set, Date, RegExp, ArrayBuffer и др.)
• Оптимизированная производительность по сравнению с JSON-методом
• Нативная реализация без необходимости подключения библиотек

Однако есть и ограничения:

• Не поддерживает клонирование функций
• Не работает с DOM-элементами
• Относительно новый API (не поддерживается в очень старых браузерах)

Для случаев, когда structuredClone() недоступен или его возможностей недостаточно, существует множество специализированных библиотек:

Пример использования lodash:

// Установка: npm install lodash
import cloneDeep from 'lodash/cloneDeep';

const complexArray = [{ a: 1 }, [2, 3], new Map()];
const deepCopy = cloneDeep(complexArray);

deepCopy[0].a = 99;
console.log(complexArray[0].a); // 1 – Оригинал не изменился

При выборе между нативным structuredClone() и библиотеками учитывайте следующие факторы:

• Совместимость с браузерами — если требуется поддержка IE или устаревших браузеров, выбирайте библиотеку
• Размер бандла — для небольших приложений лучше использовать нативные методы
• Функциональные требования — если нужно клонировать функции, structuredClone() не подойдёт
• Производительность — при частом клонировании больших структур данных стоит сравнить скорость работы разных решений

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

Копирование массивов в JavaScript — это не просто техническая деталь, а фундаментальный навык, защищающий целостность данных приложения. Выбор правильного метода зависит от структуры ваших данных и конкретных требований: используйте spread-оператор и функциональные методы для простых массивов, JSON.parse/stringify для серверного взаимодействия, и structuredClone() или специализированные библиотеки для сложных структур. Помните, что предотвращение непреднамеренных мутаций данных избавит вас от бесчисленных часов отладки и непредсказуемого поведения приложения — инвестируйте время в понимание этих концепций сейчас, чтобы сохранить его в будущем.