Как объединить массивы в 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; // ['Иванов', 'Сидоров', 'Петров', 'Курочкина'] А какой из способов используете вы?