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

Итак, у нас есть два массива [1,2,3] и [4,5,6]. Резонно ожидать, что результатом их объединения будет массив [1,2,3,4,5,6]. Конечно, в первую очередь хочется использовать оператор сложения (+) или метод .push(), но ни один из этих способов не приведет к желаемому результату:

a = [1,2,3]
b = [4,5,6]
console.log(a + b);     // [1,2,34,5,6]
console.log(a.push(b)); // [1,2,3,[4,5,6]]

В первом случае, при использовании оператора +, каждая переменная приведется к строке и выполнится конкатенация. В результате, последний элемент массива а - 3, и первый элемент массива b - 4 объединятся в значение 34.

Во втором случае, при использовании метода .push(), переменная b станет последним элементом массива a. То есть последним элементом массива a будет массив b.

Для корректного объединения массивов нужно использовать метод .concat() или оператор расширения ....

Метод .concat()

Де-факто, это уже давно стандартный способ объединения массивов. При этом первый массив является родительским. К нему и применяется метод .concat(), позволяя объединить любое количество массивов.

let a = [1,2,3];
let b = [4,5,6];
let c = a.concat(b);
console.log(c);  // [1,2,3,4,5,6]

Оператор расширения

Поддерживается, начиная с ES6 и в более младших версиях. Оператор расширения “распаковывает” элементы исходного массива, включая элементы нескольких массивов в один новый массив:

let a = [1,2,3];
let b = [4,5,6];
let c = [...a, ...b];
console.log(c);

Какой способ лучше?

Это интересный вопрос. Существует мнение, что правильный ответ зависит от статусов исходных массивов.

Тем не менее, использование оператора расширения выглядит более гибким и предпочтительным, особенно, когда в массивы необходимо вносить дальнейшие изменения. Метод .concat() можно использовать только при явной необходимости.

Например, что произойдет, если теперь нам нужно не только объединить массивы [1,2,3] и [4,5,6], но и добавить в самое начало массив [0,0,0]? Можно видеть, что использование оператора расширения смотрится лучше:

let a = [1,2,3];
let b = [4,5,6];
let c = [0,0,0].concat(a,b);
let d = [0,0,0,...a,...b];

Для метода .concat() нам приходится использовать два атрибута и устанавливать в качестве родительского массива [0,0,0].

В случае с оператором расширения достаточно добавить в начало новые элементы массива.

Спасибо за внимание.