JavaScript | Array | concat

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

Когда метод concat() вызывается с нулем или более аргументов, он возвращает массив, содержащий элементы массива объекта, за которыми следуют элементы массива каждого аргумента по порядку.

Метод concat() возвращает новый массив и не изменяет массивы, участвующие в вызове.

Синтаксис метода concat

Array.prototype.concat ( …items )

Логика работы метода concat

1. Пусть O будет ? ToObject(значение this).
2. Пусть A будет ? ArraySpeciesCreate(O, 0).
3. Пусть n будет 0.
4. Добавьте O к элементам items.
5. Для каждого элемента E из items выполните
   a. Пусть spreadable будет ? IsConcatSpreadable(E).
   b. Если spreadable является истиной true, тогда
      i. Пусть k будет 0.
      ii. Пусть len будет ? LengthOfArrayLike(E).
      iii. Если n + len > 2⁵³ - 1, выбросить исключение TypeError.
      iv. Повторять, пока k < len,
         1. Пусть P будет ! ToString(𝔽(k)).
         2. Пусть exists будет ? HasProperty(E, P).
         3. Если exists является true, тогда
            a. Пусть subElement будет ? Get(E, P).
            b. Выполнить ? CreateDataPropertyOrThrow(A, ! ToString(𝔽(n)), subElement).
         4. Установить n на n + 1.
         5. Установить k на k + 1.
   c. Иначе,
      i. ПРИМЕЧАНИЕ: E добавляется как отдельный элемент, а не как распространение.
      ii. Если n ≥ 2⁵³ - 1, выбросить исключение TypeError.
      iii. Выполнить ? CreateDataPropertyOrThrow(A, ! ToString(𝔽(n)), E).
      iv. Установить n на n + 1.
6. Выполнить ? Set(A, "length", 𝔽(n), true).
7. Вернуть A

Свойство «length» метода concat равно 1_𝔽.

Примечание 1

Явная установка свойства «length» на шаге 6 необходима для обеспечения правильности его значения в ситуациях, когда конечные элементы массива результатов отсутствуют.

Примечание 2

Функция concat() намеренно является универсальной; она не требует, чтобы значение this было объектом массива. Поэтому его можно передать другим видам объектов для использования в качестве метода.

IsConcatSpreadable ( O )

Абстрактная операция IsConcatSpreadable принимает аргумент O. При вызове она выполняет следующие шаги:

1. Если Type(O) не является Object, вернуть false.
2. Пусть spreadable будет ? Get(O, @@isConcatSpreadable).
3. Если spreadable не является undefined, вернуть ! ToBoolean(spreadable).
4. Вернуть ? IsArray(O).

Примеры

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

У нас есть два массива:

var m1 = ["Изучаем", "массивы"];
var m2 = ["в", "JavaScript"];

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

var m3 = m1.concat(m2);

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

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

Мы не изменили данные в массивах m1 и m2. Мы получили совершенно новый массив.

Данные в двух массивах не изменились - JavaScript — Данные в двух массивах не изменились — JavaScript

Как склеить три массива?

У нас есть три массива:

var massiv1 = ["Доброе", "утро", "!"];
var massiv2 = ["Сегодня", "чудесная", "погода", "."];
var massiv3 = ["Идём", "гулять", "?"];

Мы хотим соединить элементы этих трёх массивов в один массив. Мы можем вызвать метод concat() на первом массиве и передать в метод остальные массивы в виде параметров функции:

var massiv4 = massiv1.concat(massiv2, massiv3);

На выходе мы получаем массив, сложенный из других массивов.

Как склеить три массива в один - JavaScript — Как склеить три массива в один — JavaScript

Как склеить массивы, внутри которых другие массивы? Что получится?

Другой пример, в котором будем складывать массивы, с элементами в виде массивов.

var m1 = [ [5,1] , [6,2] , [7,3] ];
var m2 = [ [8,4] , [9,5] ];
var m3 = [ [0,6] ];
var m4 = m1.concat(m2, m3)

// выводим в консоль браузера
console.log(m4)

Ниже результат в консоли браузера

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

Вызов метода concat() на каком-то реальном массиве немного сложно воспринимать. Всегда взгляд прыгает то в правую часть от метода concat(), то в левую часть. Приходится помнить на каком массиве мы вызываем метод concat().

Чтобы не усложнять себе жизнь, проще всего вызывать метод concat() на пустом массиве, оформленным квадратными скобками. Например:

var m1 = [ [5,1] , [6,2] , [7,3] ];
var m2 = [ [8,4] , [9,5] ];
var m3 = [].concat(m1, m2);

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

Вызвали метод concat на пустом массиве - JavaScript — Вызвали метод concat на пустом массиве — JavaScript

Мы всё равно получаем новый массив.

Информационные ссылки

Стандарт ECMAScript — Раздел «22.1.3.1 Array.prototype.concat» — https://tc39.es/ecma262/#sec-array.prototype.concat