5 надежных методов копирования массивов в JavaScript: полное руководство

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

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

• Программисты, сталкивающиеся с проблемами в коде из-за неправильного копирования массивов

  Массивы — основа управления данными в JavaScript, а их копирование — задача, с которой разработчики сталкиваются ежедневно. Досадные ошибки вроде непреднамеренного изменения оригинала при модификации копии могут превратить стабильное приложение в источник загадочных багов. Зная правильные способы копирования массивов, вы не только улучшите качество кода, но и застрахуетесь от многих распространённых ошибок. Разберём пять надёжных методов копирования элементов из одного массива в другой и выясним, какой подход оптимален для конкретных сценариев. 🚀

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

Что такое глубокое и поверхностное копирование массивов

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

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

const original = [{ name: 'John' }, { name: 'Jane' }];
const shallowCopy = [...original];

shallowCopy[0].name = 'Mike'; // Меняем имя в копии
console.log(original[0].name); // Выводит 'Mike', оригинал тоже изменился

Глубокое копирование, напротив, создаёт полностью независимую копию, включая все вложенные структуры:

const original = [{ name: 'John' }, { name: 'Jane' }];
const deepCopy = JSON.parse(JSON.stringify(original));

deepCopy[0].name = 'Mike'; // Меняем имя в копии
console.log(original[0].name); // Выводит 'John', оригинал не изменился

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

Важно отметить, что метод JSON.parse(JSON.stringify()) имеет существенные ограничения при глубоком копировании:

• Не поддерживает циклические структуры (выдаст ошибку)
• Теряет функции и методы объектов
• Не сохраняет значения типов undefined, Symbol, а также преобразует Date в строку

Для более надежного глубокого копирования можно использовать сторонние библиотеки, такие как Lodash (метод _.cloneDeep()) или создать собственную рекурсивную функцию.

Михаил Верещагин, Senior Frontend Developer

На проекте финансовой платформы мы столкнулись с неожиданной проблемой: при обработке массива транзакций исходные данные менялись, что приводило к некорректным расчётам. Дебаггинг показал, что мы использовали поверхностное копирование для массива объектов. Когда одна часть приложения изменяла элемент в копии, она непреднамеренно влияла на исходный массив.

После долгих часов отладки мы решили проблему, внедрив глубокое копирование для структур данных, требующих независимой обработки. Для простых случаев мы стали использовать JSON.parse(JSON.stringify()), а для более сложных — специальную рекурсивную функцию, которая корректно обрабатывала даты и функциональные свойства.

Главный урок: всегда чётко определяйте требуемый тип копирования перед манипуляциями с данными. Мы даже создали внутреннее руководство по работе с массивами, чтобы другие разработчики не наступали на те же грабли.

Метод spread оператор (...) для быстрого копирования

Spread оператор (...) — один из самых элегантных способов копирования массивов в современном JavaScript. Введённый в стандарте ES6, он позволяет "развернуть" элементы одного массива в другой, создавая новый массив.

const fruits = ['apple', 'banana', 'cherry'];
const fruitsCopy = [...fruits];

console.log(fruitsCopy); // ['apple', 'banana', 'cherry']
fruits.push('date');
console.log(fruits); // ['apple', 'banana', 'cherry', 'date']
console.log(fruitsCopy); // ['apple', 'banana', 'cherry'] – копия не изменилась

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

const morefruits = [...fruits, 'elderberry', 'fig', ...otherfruits];

Этот метод выполняет поверхностное копирование, что важно учитывать при работе с массивами, содержащими вложенные объекты:

const users = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' }
];

const usersCopy = [...users];
usersCopy[0].name = 'Alicia';

console.log(users[0].name); // 'Alicia' – оригинальный объект изменился

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

• Краткий и понятный синтаксис
• Высокая производительность для небольших массивов
• Возможность легко комбинировать с другими операциями
• Широкая поддержка в современных браузерах

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

• Выполняет только поверхностное копирование
• Может вызвать переполнение стека при очень больших массивах
• Не поддерживается в очень старых браузерах без транспиляции

Когда использовать spread оператор:

• Для быстрого копирования одномерных массивов
• При необходимости объединения нескольких массивов
• В функциональном программировании для создания новых массивов без мутации исходных

// Практический пример: добавление элемента в середину массива без мутации
const numbers = [1, 2, 4, 5];
const indexToInsert = 2;
const newValue = 3;

const newNumbers = [
...numbers.slice(0, indexToInsert),
newValue,
...numbers.slice(indexToInsert)
];

console.log(newNumbers); // [1, 2, 3, 4, 5]
console.log(numbers); // [1, 2, 4, 5] – оригинал не изменился

Array.prototype.slice() и Array.prototype.concat() в работе

Методы slice() и concat() — классические способы копирования массивов, доступные в JavaScript задолго до появления spread оператора. Они остаются надежными инструментами, особенно когда требуется обратная совместимость с устаревшими окружениями.

Метод slice()

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

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

console.log(copy); // [1, 2, 3, 4, 5]
original.push(6);
console.log(original); // [1, 2, 3, 4, 5, 6]
console.log(copy); // [1, 2, 3, 4, 5] – копия не изменилась

С аргументами slice(start, end) можно копировать только часть массива:

const partial = original.slice(1, 4);
console.log(partial); // [2, 3, 4]

Метод concat()

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

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

// Или объединить несколько массивов
const combined = original.concat([4, 5], [6, 7]);
console.log(combined); // [1, 2, 3, 4, 5, 6, 7]

Сравнение этих методов с другими подходами к копированию:

Важно помнить, что и slice(), и concat() выполняют только поверхностное копирование:

const nested = [{ a: 1 }, { b: 2 }];
const nestedCopy = nested.slice();

nestedCopy[0].a = 999;
console.log(nested[0].a); // 999 – изменение затронуло оригинал

Преимущества использования slice() и concat():

• Широкая поддержка во всех средах JavaScript
• Хорошо оптимизированы в движках JavaScript
• Позволяют гибко выбирать диапазон копирования (slice)
• Дают возможность объединять данные из разных источников (concat)

Типичные сценарии использования:

• Создание копии для безопасной манипуляции без изменения оригинала
• Извлечение подмассива для обработки (slice)
• Формирование нового массива из нескольких источников (concat)
• Реализация функционального программирования с неизменяемыми структурами данных

// Пример: безопасное удаление элементов
function removeItems(array, start, count) {
const copy = array.slice();
copy.splice(start, count);
return copy;
}

const nums = [1, 2, 3, 4, 5];
const result = removeItems(nums, 1, 2);
console.log(result); // [1, 4, 5]
console.log(nums); // [1, 2, 3, 4, 5] – оригинал не изменился

Современный метод Array.from() для копирования массивов

Метод Array.from() был представлен в ES6 и предлагает мощный способ создания массивов из итерируемых объектов. Хотя он часто используется для преобразования коллекций DOM или строк в массивы, он также превосходно справляется с задачей копирования существующих массивов.

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

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

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

const numbers = [1, 2, 3, 4];
const doubled = Array.from(numbers, x => x * 2);

console.log(doubled); // [2, 4, 6, 8]

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

Кроме того, Array.from() может принимать третий аргумент — объект, который будет использоваться как this для функции отображения:

const values = [1, 2, 3];
const context = { multiplier: 10 };

const result = Array.from(values, 
function(x) { return x * this.multiplier; }, 
context
);

console.log(result); // [10, 20, 30]

Array.from() также отлично работает с другими итерируемыми объектами, что делает его универсальным инструментом:

// Копирование Set в массив
const uniqueItems = new Set([1, 2, 2, 3, 3, 3]);
const uniqueArray = Array.from(uniqueItems);
console.log(uniqueArray); // [1, 2, 3]

// Преобразование строки в массив символов
const string = "hello";
const chars = Array.from(string);
console.log(chars); // ["h", "e", "l", "l", "o"]

Анна Соколова, Frontend Tech Lead

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

JS

Скопировать код

const transformedData = originalData.slice().map(item => transform(item));

Когда мы переходили на ES6, я предложила заменить этот паттерн на Array.from() с функцией маппинга. Это не только сократило код, но и улучшило его читаемость:

JS

Скопировать код

const transformedData = Array.from(originalData, item => transform(item));

Интересно, что некоторые члены команды сопротивлялись этому изменению, считая новый метод "экзотическим". Но после того, как мы провели сравнительный анализ производительности и обнаружили, что Array.from() показывает сопоставимые или даже лучшие результаты для наших сценариев, все согласились с переходом.

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

Важно понимать, что Array.from(), как и другие методы, которые мы обсуждали ранее, создаёт поверхностную копию массива. Для глубокого копирования вложенных структур потребуются дополнительные манипуляции.

Когда стоит выбирать Array.from() для копирования массивов:

• При необходимости одновременного копирования и преобразования элементов
• Для работы с различными итерируемыми структурами
• Когда требуется больше контроля над процессом копирования
• В проектах, где уже активно используется ES6+

Использование циклов для контролируемого копирования

Хотя современный JavaScript предлагает множество декларативных методов для работы с массивами, иногда простой цикл остается наиболее гибким инструментом для копирования, особенно когда требуется специфическая логика или контроль над процессом. 🔄

Базовое копирование с помощью цикла for выглядит следующим образом:

const original = [1, 2, 3, 4, 5];
const copy = [];

for (let i = 0; i < original.length; i++) {
copy[i] = original[i];
}

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

Такой подход может показаться избыточным для простых случаев, но он дает полный контроль над процессом копирования, позволяя внедрять дополнительную логику:

const original = [1, -2, 3, -4, 5];
const positiveOnly = [];

for (let i = 0, j = 0; i < original.length; i++) {
if (original[i] > 0) {
positiveOnly[j++] = original[i];
}
}

console.log(positiveOnly); // [1, 3, 5]

Для глубокого копирования вложенных структур можно использовать рекурсивный подход:

function deepCopy(arr) {
const copy = [];

for (let i = 0; i < arr.length; i++) {
// Если элемент – массив, рекурсивно копируем его
if (Array.isArray(arr[i])) {
copy[i] = deepCopy(arr[i]);
}
// Если элемент – объект (но не массив), копируем его свойства
else if (typeof arr[i] === 'object' && arr[i] !== null) {
copy[i] = {};
for (const key in arr[i]) {
if (arr[i].hasOwnProperty(key)) {
copy[i][key] = arr[i][key];
}
}
}
// Иначе просто копируем значение
else {
copy[i] = arr[i];
}
}

return copy;
}

const nested = [1, [2, 3], { a: 4 }];
const deepCopied = deepCopy(nested);

// Изменение вложенных структур не влияет на оригинал
deepCopied[1][0] = 99;
deepCopied[2].a = 100;

console.log(nested); // [1, [2, 3], { a: 4 }]
console.log(deepCopied); // [1, [99, 3], { a: 100 }]

Современные альтернативы циклам, такие как forEach, map и reduce, часто предлагают более элегантные решения:

// Копирование с forEach
const copy1 = [];
original.forEach((item, index) => {
copy1[index] = item;
});

// Копирование с map
const copy2 = original.map(item => item);

// Копирование с reduce
const copy3 = original.reduce((acc, item) => {
acc.push(item);
return acc;
}, []);

Сравнение различных циклических подходов с точки зрения производительности:

Когда следует использовать циклы для копирования массивов:

• При необходимости выполнения сложной логики во время копирования
• Для реализации специальных алгоритмов глубокого копирования
• В производительно-критичных участках кода
• Когда требуется условное копирование элементов
• При работе с очень большими массивами, где важна эффективность

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

Выбор метода копирования массивов зависит от конкретных задач и контекста вашего проекта. Spread оператор и Array.from() обеспечивают современный, краткий синтаксис для большинства повседневных задач. Методы slice() и concat() остаются надежными вариантами с широкой поддержкой. Циклы предоставляют максимальную гибкость при особых требованиях. Помните о разнице между поверхностным и глубоким копированием — это убережет вас от множества неожиданных ошибок в будущем. Применяйте эти знания осознанно, и пусть ваш код будет чистым, эффективным и предсказуемым! 💻