Как сделать копию массива?

Краткий ответ

Есть несколько способов сделать копию массива в JavaScript:

Spread оператор — [...arr] — самый современный способ 🆕
Метод slice — arr.slice() — классический способ 📚
Метод concat — arr.concat() — ещё один способ 🔗
Array.from — Array.from(arr) — универсальный способ 🌐

const original = [1, 2, 3];
 
// Spread — самый частый способ
const copy1 = [...original]; // [1, 2, 3]
 
// slice — классический способ
const copy2 = original.slice(); // [1, 2, 3]
 
// Важно: это поверхностная копия!

Полный ответ

Сделать копию массива — как сфотографировать коробку с вещами. У тебя появляется новая коробка с такими же вещами, но это отдельная коробка! 📦📸

Поверхностная копия (shallow copy)

Копирует только “поверхность” массива. Если в массиве были объекты, то копируются ссылки на них, а не сами объекты:

Spread оператор

const fruits = ['яблоко', 'банан', {name: 'апельсин'}];
 
// Копируем массив
const copy = [...fruits];
 
// Меняем в копии
copy[0] = 'груша';
 
console.log(fruits[0]);  // 'яблоко' — оригинал не меняется
console.log(copy[0]);    // 'груша' — копия изменилась
 
// Но объекты — одни и те же!
copy[2].name = 'мандарин';
console.log(fruits[2].name); // 'мандарин' — объект общий!

Метод slice

const arr = [1, 2, 3];
 
// Пустой slice — копирует весь массив
const copy = arr.slice();
 
// То же самое, что и [...arr]

Другие способы

const original = [1, 2, 3];
 
// concat без параметров
const copy1 = original.concat();
 
// Array.from
const copy2 = Array.from(original);
 
// Все делают одно и то же — поверхностную копию

Глубокая копия (deep copy)

Копирует всё, включая вложенные объекты. Каждый объект становится новым:

JSON методы (ограниченный способ)

const arr = [1, {name: 'Иван'}, [2, 3]];
 
// Глубокая копия через JSON
const deepCopy = JSON.parse(JSON.stringify(arr));
 
// Теперь объекты разные
deepCopy[1].name = 'Петр';
console.log(arr[1].name); // 'Иван' — оригинал не меняется

⚠️ Важно: JSON способ не работает с функциями, undefined, Symbol и другими специальными значениями!

Когда что использовать

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

// ✅ Для массивов с простыми значениями
const numbers = [1, 2, 3];
const copy = [...numbers];

Глубокая копия — для сложных структур

// ✅ Для массивов с объектами, если нужно полное отделение
const complex = [{user: 'Иван'}, {user: 'Петр'}];
const deep = JSON.parse(JSON.stringify(complex));

Частые ошибки

Думать, что копия — это то же самое

// ❌ Ошибка — это не копия, а ссылка!
const arr1 = [1, 2, 3];
const arr2 = arr1; // Не копия, а ссылка на тот же массив!
 
arr2[0] = 999;
console.log(arr1[0]); // 999 — оригинал изменился!
 
// ✅ Правильно — сделать настоящую копию
const arr3 = [...arr1]; // Настоящая копия
arr3[0] = 888;
console.log(arr1[0]); // 999 — оригинал не меняется

Использовать JSON для всего

// ❌ Ошибка — JSON не подходит для всех данных
const arr = [function() {}, undefined, Symbol('id')];
// JSON.stringify(arr); // Плохо работает!
 
// ✅ Правильно — использовать специальные библиотеки
// или писать свою функцию глубокого копирования

Простые правила

Spread [...arr] — современный способ поверхностной копии 🆕
slice() — классический способ поверхностной копии 📚
Поверхностная — копирует только первый уровень 🌊
Глубокая — копирует всё, включая вложенные объекты 🕳️
Ссылка ≠ копия — копия — это новый массив! 🔗

Понимание разницы между копированием и ссылкой помогает избежать ошибок в программах! 💪

Хотите больше статей для подготовки к собеседованиям? Подписывайтесь на EasyAdvice, добавляйте сайт в закладки и совершенствуйтесь каждый день 💪