JavaScript | Как склеить два массива в один?

Массивы — это индексные коллекции. То есть когда мы говорим о склеивании массивов, мы подразумеваем передачу элементов одного массива другому. Стоит понимать, что при переносе элементов предыдущие индексы каждого элемента могут измениться. По сути, когда мы склеиваем массивы друг с другом, мы создаём новый массив со своей последовательностью элементов (со своими индексами и длиной).

Что даёт нам это знание? Ключевым моментом здесь выступает тип данных, который определяет элемент. Из-за этого мы можем клеивать:

Массивы из строк
Массивы из чисел
Массивы из булевых значений
Массивы из объектов
Массивы из массивов

Как склеить два массива из строк в один?

У нас есть два массива. В первом массиве перечислены женские имена. Во втором массиве перечислены мужские имена.

Массив № 1

var namesFemale = [ "Елена" , "Светлана" , "Татьяна" , "Диана" ]

Массив № 2

var namesMale = [ "Пётр" , "Алексей" , "Максим" , "Иван" ]

Задача

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

Решение

Для того чтобы склеить два массива в JavaScript нужно воспользоваться методом прототипов объекта Array, который называется concat()

var namesAll = [].concat(namesFemale, namesMale)

В этом примере мы вызываем метод concat() у пустого анонимного массива. (квадратные скобки и точка) Далее в круглых скобках метода concat() через запятую мы перечисляем переменные с первым и вторым массивами. В нашем случае это переменные namesMale и namesFemale.

Выводим результат склеивания двух массивов в консоль браузера.

console.log(namesAll)

Мы получаем один массив, который содержит 4 женских имени и 4 мужских. Итоговый массив имеет длину 8.

["Елена", "Светлана", "Татьяна", "Диана", "Пётр", "Алексей", "Максим", "Иван"]

Склеенный массив из двух массивов в JavaScript

Как склеить два массива из чисел в один?

var massiv1 = [11,22,33,44]

var massiv2 = [55,66,77,88]

var massiv3 = [].concat(massiv1, massiv2)

Результат вывода команды:

[11,22,33,44,55,66,77,88]

Вывод в консоль браузера:

JavaScript - Как склеить два массива с числами? — JavaScript — Как склеить два массива с числами?

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

ВАЖНО! Метод concat() изменяет массив на котором он вызывается. Квадратные скобки позволяют НЕ потерять данные.

Как склеить два массива из булевых значений в один?

var massiv1 = [true,true,true,true]

var massiv2 = [false,false,false,false]

var massiv3 = [].concat(massiv1, massiv2)

Результат вывода команды:

[true,true,true,true,false,false,false,false]

Вывод в консоль браузера:

JavaScript - Как склеить два массива с булевыми значениями? — JavaScript — Как склеить два массива с булевыми значениями?

Мы получили склеенный массив, в котором все элементы являются булевыми значениями JavaScript.

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

var massiv1 = [{a:"a"},{b:"b"},{c:"c"},{d:"d"}]

var massiv2 = [{e:"e"},{f:"f"},{g:"g"},{h:"h"}]

var massiv3 = [].concat(massiv1, massiv2)

Результат вывода команды:

[{a:"a"},{b:"b"},{c:"c"},{d:"d"},{e:"e"},{f:"f"},{g:"g"},{h:"h"}]

Вывод в консоль браузера:

JavaScript - Как склеить два массива с объектами? — JavaScript — Как склеить два массива с объектами?

Мы получили склеенный массив, в котором все элементы являются объектами JavaScript.

Как склеить два массива из массивов в один?

Результат вывода команды:

[[11,true,"EFIM360"],[33,true],[55,false,"RU"],[77,false]]

Вывод в консоль браузера:

JavaScript - Как склеить два массива с массивами? — JavaScript — Как склеить два массива с массивами?

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

Ссылки

JavaScript | Массивы (Array)

JavaScript | Как склеить два массива со строками?

JavaScript | Как склеить два массива с числами?

JavaScript | Как склеить два массива с булевыми значениями?

JavaScript | Как склеить два массива с объектами?

JavaScript | Как склеить два массива с массивами?

JavaScript | Что значит «склеить два массива»?

ECMAScript — Living Standard — https://tc39.es/ecma262/#sec-array-objects

ECMAScript — Living Standard — https://tc39.es/ecma262/#sec-array.prototype.concat

Свойства конструктора Array

Свойства объекта прототипа Array