Как объединить два массива?

👨‍💻 Frontend Developer 🟠 Может встретиться 🎚️ Средний
#JavaScript #Массивы #База JS

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

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

  1. Spread оператор[...arr1, ...arr2] — самый современный способ 🆕
  2. Метод concatarr1.concat(arr2) — классический способ 📚
  3. Метод pusharr1.push(...arr2) — изменяет первый массив ⚠️
const arr1 = [1, 2];
const arr2 = [3, 4];
 
// Spread — создаёт новый массив
const merged1 = [...arr1, ...arr2]; // [1, 2, 3, 4]
 
// concat — тоже создаёт новый массив
const merged2 = arr1.concat(arr2); // [1, 2, 3, 4]
 
// push — изменяет первый массив!
arr1.push(...arr2); // arr1 становится [1, 2, 3, 4]

Полный ответ

Объединить массивы — как сливать два потока воды в один! Есть разные способы это сделать 🌊

Spread оператор (самый частый)

Самый простой и понятный способ — использовать три точки:

const fruits = ['яблоко', 'банан'];
const vegetables = ['морковь', 'картошка'];
 
// Объединяем в новый массив
const food = [...fruits, ...vegetables];
// ['яблоко', 'банан', 'морковь', 'картошка']
 
// Можно добавить элементы по краям
const menu = ['начало', ...fruits, ...vegetables, 'конец'];

Метод concat

Классический способ, который работает во всех браузерах:

const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = [5, 6];
 
// Объединяем два массива
const result1 = arr1.concat(arr2); // [1, 2, 3, 4]
 
// Можно несколько сразу
const result2 = arr1.concat(arr2, arr3); // [1, 2, 3, 4, 5, 6]
 
// Можно добавить отдельные элементы
const result3 = arr1.concat(arr2, 7, 8); // [1, 2, 3, 4, 7, 8]

Метод push (изменяет массив)

Важно: этот способ изменяет первый массив!

const arr1 = [1, 2];
const arr2 = [3, 4];
 
// Изменяет arr1!
arr1.push(...arr2); // arr1 становится [1, 2, 3, 4]
// Возвращает длину: 4

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

Spread и concat — для создания нового массива

// ✅ Когда нужно сохранить оригиналы
const newArr = [...oldArr1, ...oldArr2];
 
// ✅ То же самое с concat
const newArr2 = oldArr1.concat(oldArr2);

Push — когда нужно изменить массив

// ✅ Когда нужно изменить первый массив
originalArr.push(...newElements);

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

Забыть про изменение массива

// ❌ Ошибка — изменяет оригинальный массив
const arr1 = [1, 2];
const arr2 = [3, 4];
arr1.push(...arr2); // arr1 теперь [1, 2, 3, 4]!
 
// ✅ Правильно — создать новый массив
const merged = [...arr1, ...arr2]; // arr1 не меняется

Путаница с вложенными массивами

const arr1 = [1, 2];
const arr2 = [3, 4];
 
// ❌ Создаёт вложенный массив
const wrong = [arr1, arr2]; // [[1, 2], [3, 4]]
 
// ✅ Правильно — объединяет элементы
const right = [...arr1, ...arr2]; // [1, 2, 3, 4]

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

  1. Spread [...a, ...b] — современный и понятный способ 🆕
  2. concat — классический способ, работает везде 📚
  3. push — изменяет массив, остальные — создают новый ⚠️
  4. Не вкладывает — объединяет элементы, не создаёт вложенные массивы 🎯
  5. Сохраняй оригиналы — если нужно, создавай новый массив 🆕

Знание разных способов объединения массивов помогает выбрать правильный инструмент для каждой задачи! 💪


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