JavaScript: объединяем массивы
как объединить два массива с помощью метода .concat() или оператора расширения
Объединение массивов, как в случае, когда оба массива уже существуют, так и в случае, когда один из массивов еще только будет создаваться, довольно распространенная задача. Тем не менее, поверхностный подход и несоблюдение определенных правил могут привести к тому, что полученный результат вовсе не будет соответствовать ожидаемому.
Итак, у нас есть два массива [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].
В случае с оператором расширения достаточно добавить в начало новые элементы массива.
Спасибо за внимание.