Как комбинировать массивы?

Комбинирование (объединение) массивов в JavaScript

В JavaScript существует множество способов объединить несколько массивов в один. Каждый подход имеет свои преимущества и применяется в разных ситуациях.

1. Spread оператор (...) - современный подход

Это самый читаемый и рекомендуемый способ:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];

// Объединить несколько массивов
const combined = [...arr1, ...arr2, ...arr3];
console.log(combined); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

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

• Синтаксис понятный и чистый
• Можно комбинировать любое количество массивов
• Создаёт новый массив (не мутирует исходные)

Добавить элементы в начало и конец:

const arr1 = [2, 3];
const combined = [1, ...arr1, 4, 5];
console.log(combined); // [1, 2, 3, 4, 5]

2. Метод concat() - классический подход

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

// Объединить два массива
const combined = arr1.concat(arr2);
console.log(combined); // [1, 2, 3, 4, 5, 6]
console.log(arr1); // [1, 2, 3] - исходный не изменился

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

const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = [5, 6];

const combined = arr1.concat(arr2, arr3);
console.log(combined); // [1, 2, 3, 4, 5, 6]

Добавить отдельные элементы:

const arr = [1, 2];
const combined = arr.concat(3, 4, [5, 6]);
console.log(combined); // [1, 2, 3, 4, 5, 6]

3. Метод push() с spread оператором - мутирующий подход

Если нужно изменить исходный массив:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

// Добавить элементы в конец arr1
arr1.push(...arr2);
console.log(arr1); // [1, 2, 3, 4, 5, 6]

Осторожно: мутирует исходный массив!

const arr1 = [1, 2];
const arr2 = [3, 4];

// Плохо - изменяет arr1
arr1.push(...arr2);

// Хорошо - создаёт новый массив
const combined = [...arr1, ...arr2];

4. Метод flat() для массивов массивов

Для объединения вложенных массивов:

const arr = [[1, 2], [3, 4], [5, 6]];

// Развернуть на один уровень
const flattened = arr.flat();
console.log(flattened); // [1, 2, 3, 4, 5, 6]

Развернуть несколько уровней:

const arr = [[1, [2, 3]], [[4, 5]], 6];

// Развернуть на 2 уровня
const flattened = arr.flat(2);
console.log(flattened); // [1, 2, 3, 4, 5, 6]

// Развернуть полностью
const flattenedFull = arr.flat(Infinity);
console.log(flattenedFull); // [1, 2, 3, 4, 5, 6]

Комбинация с map():

const users = [
  { id: 1, posts: [{ title: 'Post 1' }, { title: 'Post 2' }] },
  { id: 2, posts: [{ title: 'Post 3' }] }
];

// Получить все посты
const allPosts = users.flatMap(user => user.posts);
console.log(allPosts);
// [{ title: 'Post 1' }, { title: 'Post 2' }, { title: 'Post 3' }]

5. Метод flatMap() - комбинация map и flat

const arr = [1, 2, 3];

// Без flatMap
const result1 = arr.map(x => [x, x * 2]).flat();

// С flatMap (проще)
const result2 = arr.flatMap(x => [x, x * 2]);

console.log(result2); // [1, 2, 2, 4, 3, 6]

Практический пример:

const comments = [
  { userId: 1, text: 'Comment 1', replies: [{ text: 'Reply 1' }, { text: 'Reply 2' }] },
  { userId: 2, text: 'Comment 2', replies: [{ text: 'Reply 3' }] }
];

// Получить все комментарии и ответы в одном массиве
const allComments = comments.flatMap(comment => [
  comment,
  ...comment.replies
]);

6. reduce() для сложного объединения

const arrays = [[1, 2], [3, 4], [5, 6]];

// Объединить используя reduce
const combined = arrays.reduce((acc, arr) => acc.concat(arr), []);
console.log(combined); // [1, 2, 3, 4, 5, 6]

// Или с spread
const combined2 = arrays.reduce((acc, arr) => [...acc, ...arr], []);

7. Объединение с условиями

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const shouldAdd = true;

// Условное объединение
const combined = [
  ...arr1,
  ...(shouldAdd ? arr2 : [])
];
console.log(combined); // [1, 2, 3, 4, 5, 6]

8. Удаление дубликатов при объединении

const arr1 = [1, 2, 3, 4];
const arr2 = [3, 4, 5, 6];

// Использовать Set для удаления дубликатов
const combined = [...new Set([...arr1, ...arr2])];
console.log(combined); // [1, 2, 3, 4, 5, 6]

Для объектов (по id):

const users1 = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
const users2 = [{ id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' }];

// Объединить и удалить дубликаты по id
const combined = Array.from(
  new Map([...users1, ...users2].map(u => [u.id, u])).values()
);
console.log(combined);
// [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' }]

9. Объединение с фильтрацией

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

// Объединить только чётные числа
const combined = [...arr1, ...arr2].filter(num => num % 2 === 0);
console.log(combined); // [2, 4, 6]

10. Объединение массивов объектов

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

// Простое объединение
const combined = [...users1, ...users2];
console.log(combined);
// [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]

// С сортировкой
const sorted = [...users1, ...users2].sort((a, b) => a.id - b.id);

11. Слияние свойств при объединении

const arr1 = [{ id: 1, name: 'Alice' }];
const arr2 = [{ id: 1, age: 25 }];

// Объединить объекты с одинаковым id
const combined = arr1.map(obj1 => ({
  ...obj1,
  ...arr2.find(obj2 => obj2.id === obj1.id)
}));
console.log(combined);
// [{ id: 1, name: 'Alice', age: 25 }]

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

// Бенчмарк для большого количества массивов
const arrays = Array(1000).fill(null).map((_, i) => [i]);

// Быстро - spread operator
console.time('spread');
const result1 = arrays.reduce((acc, arr) => [...acc, ...arr], []);
console.timeEnd('spread');

// Быстро - concat
console.time('concat');
const result2 = Array.prototype.concat.apply([], arrays);
console.timeEnd('concat');

// Медленнее - push в цикле
console.time('push');
const result3 = [];
for (const arr of arrays) {
  result3.push(...arr);
}
console.timeEnd('push');

Рекомендации

Антипаттерны

// Плохо - медленно для больших массивов
for (let i = 0; i < arr2.length; i++) {
  arr1.push(arr2[i]);
}

// Хорошо
arr1.push(...arr2);

// Или создать новый
const combined = [...arr1, ...arr2];

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