Concatenação de array JavaScript: mesclar arrays

Resumo : neste tutorial, você aprenderá como usar o método JavaScript Array concat() para mesclar dois ou mais arrays em um único array.

Para mesclar dois ou mais arrays, você usa o concat()método de um objeto Array . O concat()método retorna um novo array e não altera os arrays originais. Por exemplo:

let odds = [1,3,5];
let evens = [2,4,6];
// merge odds and evens array
let combined = odds.concat(evens);

console.log('Result:', combined);
console.log('Odds:', odds);Linguagem de código:  JavaScript  ( javascript )

Saída:

Result: [ 1, 3, 5, 2, 4, 6 ]
Odds: [ 1, 3, 5 ]Linguagem de código:  CSS  ( css )

Neste exemplo, temos dois arrays: oddse evens. Chamamos o concat()método do oddsmétodo array para mesclar elementos dos dois arrays. Os elementos da segunda matriz são anexados aos elementos da primeira matriz.

Da mesma forma, você pode chamar o concat()método em um array vazio indicado por ( []):

let odds = [1,3,5];
let evens = [2,4,6];
// merge odds and evens array
let combined = [].concat(odds, evens);

console.log(combined);Linguagem de código:  JavaScript  ( javascript )

Saída:

[ 1, 3, 5, 2, 4, 6 ]Linguagem de código:  JSON/JSON com comentários  ( json )

O concat()método permite mesclar mais de dois arrays, conforme mostrado no exemplo a seguir:

let upper  = ['A','B','C'];
let lower  = ['a','b','c'];
let digits = [1,2,3];
let alphanumerics = upper.concat(lower, digits);Linguagem de código:  JavaScript  ( javascript )

Saída:

['A', 'B', 'C', 'a',  'b', 'c', 1,   2,  3]Linguagem de código:  JSON/JSON com comentários  ( json )

Neste exemplo, mesclamos os três arrays: upper, lower, e digits.

Quando você não passa nenhum argumento para o concat()método, ele simplesmente clona o array e o retorna:

let colors = ['red','green','blue'];
let rgb = colors.concat();
console.log(rgb);Linguagem de código:  JavaScript  ( javascript )

Saída:

[ 'red', 'green', 'blue' ]Linguagem de código:  JSON/JSON com comentários  ( json )

Se você passar valores que não são arrays para o concat()método, o método anexará cada valor ao final do array resultante:

let rgb = ['red','green','blue'];
let moreColors = rgb.concat('yellow','magento');
console.log(moreColors);Linguagem de código:  JavaScript  ( javascript )

Saída:

[ 'red', 'green', 'blue', 'yellow', 'magento' ]Linguagem de código:  JSON/JSON com comentários  ( json )

No ES6, você pode usar o operador spread para mesclar vários arrays da seguinte maneira:

let odds = [1,3,5];
let evens = [2,4,6];
let combined = [...odds, ...evens];
console.log(combined);Linguagem de código:  JavaScript  ( javascript )

Saída:

[ 1, 3, 5, 2, 4, 6 ]Linguagem de código:  JSON/JSON com comentários  ( json )

Neste tutorial, você aprendeu duas maneiras de mesclar vários arrays em um único array usando o concat()método JavaScript Array e o operador spread.