Aqui ficam 2 maneiras de combinar os teus arrays e obter um NOVO array. Eu gosto de usar o operador spread. Mas se precisas de suportar browsers mais antigos, usa antes o concat.
// 2 formas de unir arrays
const fruits = ['pomme ', 'poire'];
const legumes = ['carotte ', 'salade'];
// Método 1: Concat
const combined1 = [].concat(fruits, legumes);
// Método 2: Spread
const combined2 = [...fruits, ...legumes];
// Resultado
// [ 'pomme', 'poire', 'carotte', 'salade' ]Sintaxe alternativa do concat
Também podes escrever a sintaxe do concat desta forma:
const fruits = ['pomme ', 'poire'];
const legumes = ['carotte ', 'salade'];
const combined = fruits.concat(legumes);
// [ 'pomme', 'poire', 'carotte', 'salade' ]
console.log(fruits); // ['pomme ', 'poire'];
console.log(legumes); // ['carotte ', 'salade'];
Como vês, esta forma de escrever não toca nem altera o array existente.
Qual escolher?
Vamos pôr as duas versões lado a lado para as poderes comparar.
// Versão A:
const combinedA = [].concat(fruits, legumes);
// Versão B:
const combinedB = fruits.concat(legumes);
A pergunta agora é qual delas escolher. Prefiro a versão A, porque acho a intenção bem mais clara. Basta olhar para ela para saber que estou a criar um novo array e que não mexo no que já existe. Já na versão B, parece que estou a acrescentar legumes ao array fruits, e não me é nada evidente que o array fruits possa acabar substituído pelos legumes.
Diferença entre spread e concat
Prefiro usar o spread porque o acho mais conciso e mais fácil de escrever. MAS o concat continua a ter as suas vantagens.
O spread é fantástico quando sabes de antemão que estás a lidar com arrays. Só que a origem pode ser outra coisa, uma string por exemplo, e tu queres acrescentar essa string ao array. Vejamos um exemplo.
Exemplo
Digamos que é este o resultado que queremos:
[1, 2, 3, 'random'];
A. Com o spread
Se seguirmos o modelo que já usámos e aplicarmos o operador spread, acontece isto:
function combineArray(array1, array2) {
return [...array1, ...array2];
}
const isArray = [1, 2, 3];
const notArray = 'random';
combineArray(isArray, notArray);
// [ 1, 2, 3, 'r', 'a', 'n', 'd', 'o', 'm' ]
Ao espalhar a nossa string, a palavra fica dividida em letras separadas. Não é o resultado que queríamos.
B. Com o concat
MAS, se seguirmos o modelo do concat, acontece isto:
function combineArray(array1, array2) {
return [].concat(array1, array2);
}
const isArray = [1, 2, 3];
const notArray = 'random';
combineArray(isArray, notArray);
// [ 1, 2, 3, 'random' ]
Excelente! Temos o resultado que queríamos.
Já sei o que alguns estão a pensar: «bah!». Escrevo uma condição para garantir que aquilo que passo é mesmo um array e trato o caso em conformidade. Claro que também funciona. Ou então escreves menos código e usas concat.
Veredicto
A regra rápida é esta: se sabes que estás a lidar com arrays, usa o spread. Mas se houver a hipótese de te aparecer algo que não é um array, usa antes o concat para fundir o array.
Seja como for, queria só deixar isto claro, para que possas usar o método mais adequado ao problema que estás a resolver.
Unir dois arrays com push
Talvez estejas a perguntar-te se também não podes usar o push para juntar arrays. E podes! Mas o push toca e altera o array existente: NÃO cria um array novo. Depende, portanto, daquilo que queres fazer. Guarda isso bem.
const fruits = ['pomme ', 'poire'];
const legumes = ['carotte ', 'salade'];
const combined = fruits.push(...legumes);
console.log(combined); // 4
// quando usas o push, ele devolve o COMPRIMENTO do array combinado
console.log(fruits); // [ 'pomme', 'poire', 'carotte', 'salade' ]
console.log(legumes); // ['carotte', 'salade']
E quando tentas empurrar um array para dentro de outro array, tens de o espalhar, senão acabas com um array aninhado. A não ser, claro, que seja isso que queres
const fruits = ['pomme ', 'poire'];
const legumes = ['carotte ', 'salade'];
cars.push(legumes);
// fruits: [ 'pomme ', 'poire', ['carotte ', 'salade'] ]
cars.push(...legumes);
// fruits: [ 'pomme ', 'poire', 'carotte ', 'salade' ]
Suporte dos browsers
O spread chegou com o ES6, por isso todos os browsers modernos o suportam. Caso contrário, usa o concat no seu lugar ou passa por um compilador como o Babel.
