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

array1 = [ 1,2,3]
array2 = [4,5,6]  

Массивы по своей сути это структура данных, представляющая упорядоченную коллекцию индексированных элементов.

И довольно часто в практике возникает необходимость объединения массивов - когда два и более отдельных массивов превращаются в большой массив содержащий все элементы первоначальных массивов.

Например объединение массива [1,2] и [5,6] приведет к появлению массива [1,2,5,6]

Мы рассмотрим три способа объединить массивы в JavaScript: 2 иммутабельных (новый массив создается после объединения)

Способ 1 - объединение массивов через оператор spread

Если вам нужен один хороший способ объединения массивов в JavaScript, тогда оператор spread - ваш выбор.

Напишите внутри массива две или более переменных с префиксом в виде spread оператора ... и JavaScript объединит их в один новый массив. Собственно синтаксис:

const result = [...array1, ...array2];

Как пример предположим у нас есть два массива содержащих фамилии студентов students1 и students2

const students1 = ['Иванов', 'Сидоров'];
const students2 = ['Петров', 'Курочкина'];

const all = [...students1, ...students2];  
  
all; //  ['Иванов', 'Сидоров', 'Петров', 'Курочкина']

const all = [...students1, ...students2] создает новый массив содержащий элементы исходных массивов students1 и students2

Порядок в котором вы перечисляете массивы при помощи оператора spread имеет значение! Элементы массива вставляются в том порядке в котором идут переменные этих массивов.

В нашем примере поменяем порядок:

const students1 = ['Иванов', 'Сидоров'];
const students2 = ['Петров', 'Курочкина'];

const all = [...students2, ...students1];  
  
all; //   ['Петров', 'Курочкина', 'Иванов', 'Сидоров']  

Spread оператор позволяет объединять 2 и более массивов:

const newArray = [...array1, ...array2, ...array3, ...arrayN];

Способ 2 - объединение массивов методом array.concat()

Если вы предпочитаете функциональные методы объединения массивов, то можете использовать array1.concat(array2) метод:

const newArray = array1.concat(array2);

или в другом варианте

const newArray = [].concat(array1, array2);

array.concat() не изменяет исходные массивы, а формирует новый имеющий в составе элементы объединяемых массивов.

Давайте попробуем повторить пример из первого способа:

const students1 = ['Иванов', 'Сидоров'];
const students2 = ['Петров', 'Курочкина'];

const all_1 = students1.concat(students2);
const all_2 = [].concat(students1,students2);  
  
all_1; //   ['Иванов', 'Сидоров', 'Петров', 'Курочкина']
all_2; //   ['Иванов', 'Сидоров', 'Петров', 'Курочкина']

Метод concat позволяет объединять более двух массивов:

const newArray = [].concat(array1, array2, array3, arrayN);

Способ 3 - объединение массивов через метод array.push()

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

Вы наверняка знаете что метод array.push(item) добавляет к имеющемуся массиву новый элемент и ставит его в конец массива.

const students = ['Иванов'];

students.push('Сидоров');

students; // ['Иванов', 'Сидоров']  

Благодаря тому факту что array.push(item1, item2, ..., itemN) может принимать множественное количество элементов, мы можем запушить целый массив через оператор spread примененный к аргументу:

array1.push(...array2);  

И если брать пример с нашими студентами то получим:

const students1 = ['Иванов', 'Сидоров'];
const students2 = ['Петров', 'Курочкина'];

students1.push(...students2);

students1; // ['Иванов', 'Сидоров', 'Петров', 'Курочкина']   

А какой из способов используете вы? Поделитесь в комментариях

Комментарии