Массивы — это индексные коллекции. То есть когда мы говорим о склеивании массивов, мы подразумеваем передачу элементов одного массива другому. Стоит понимать, что при переносе элементов предыдущие индексы каждого элемента могут измениться. По сути, когда мы склеиваем массивы друг с другом, мы создаём новый массив со своей последовательностью элементов (со своими индексами и длиной).
Что даёт нам это знание? Ключевым моментом здесь выступает тип данных, который определяет элемент. Из-за этого мы можем клеивать:
- Массивы из строк
- Массивы из чисел
- Массивы из булевых значений
- Массивы из объектов
- Массивы из массивов
Как склеить два массива из строк в один?
У нас есть два массива. В первом массиве перечислены женские имена. Во втором массиве перечислены мужские имена.
Массив № 1
var namesFemale = [ "Елена" , "Светлана" , "Татьяна" , "Диана" ]
Массив № 2
var namesMale = [ "Пётр" , "Алексей" , "Максим" , "Иван" ]
Задача
Мы хотим сложить имена из двух разных массивов и положить их в один массив. Мы хотим, чтобы все элементы первого и второго массивов были скопированы в третий массив. Мы хотим иметь возможность всегда обращаться к «первородным» массивам без их искажения.
Решение
Для того чтобы склеить два массива в JavaScript нужно воспользоваться методом прототипов объекта Array, который называется concat()
var namesAll = [].concat(namesFemale, namesMale)
В этом примере мы вызываем метод concat() у пустого анонимного массива. (квадратные скобки и точка) Далее в круглых скобках метода concat() через запятую мы перечисляем переменные с первым и вторым массивами. В нашем случае это переменные namesMale и namesFemale.
Выводим результат склеивания двух массивов в консоль браузера.
console.log(namesAll)
Мы получаем один массив, который содержит 4 женских имени и 4 мужских. Итоговый массив имеет длину 8.
["Елена", "Светлана", "Татьяна", "Диана", "Пётр", "Алексей", "Максим", "Иван"]
Как склеить два массива из чисел в один?
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.
ВАЖНО! Метод 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.
ВАЖНО! Метод concat() изменяет массив на котором он вызывается. Квадратные скобки позволяют НЕ потерять данные.
Как склеить два массива из объектов в один?
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.
ВАЖНО! Метод concat() изменяет массив на котором он вызывается. Квадратные скобки позволяют НЕ потерять данные.
Как склеить два массива из массивов в один?
Результат вывода команды:
[[11,true,"EFIM360"],[33,true],[55,false,"RU"],[77,false]]
Вывод в консоль браузера:
Мы получили склеенный массив, в котором все элементы являются массивами JavaScript.
ВАЖНО! Метод concat() изменяет массив на котором он вызывается. Квадратные скобки позволяют НЕ потерять данные.
Ссылки
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
