A fusão de arrays envolve a combinação de dois ou mais arrays em um único array. É uma operação comum em programação, especialmente quando se trata de manipulação e agregação de dados. Neste tutorial aprenderemos 3 maneiras de mesclar arrays em JavaScript.
Mesclar 2 arrays em JavaScript significa combinar os elementos de dois arrays para criar um array novo e maior. Recomendamos usar o operador spread para criar um novo array com os valores mesclados.
const array = [1, 2, 3];
const array2 = [4, 5, 6];
const array3 = [...array, ...array2]; // [1, 2, 3, 4, 5, 6]
O operador spread também pode mesclar mais de dois arrays.
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const array3 = [7, 8, 9];
[...array1, ...array2, ...array3]; // [1, 2, 3, 4, 5, 6, 7, 8, 9]
Se você deseja mesclar um array em outro array no local, modificando o array original, você pode usar o método Array push() com o operador spread da seguinte maneira.
const array = [1, 2, 3];
const array2 = [4, 5, 6];
array.push(...array2); // [1, 2, 3, 4, 5, 6]
Observação: Tenha cuidado: push() com o operador spread pode causar um erro de estouro de pilha se array2 for enorme.
const array = [];
const array2 = Array(10_000_000).fill(null);
// RangeError: Maximum call stack size exceeded
array.push(...array2);
Como alternativa ao uso do operador spread, você pode usar o método Array concat() para mesclar arrays. A função concat() retorna um novo array que consiste no primeiro array concatenado com o segundo.
const array = [1, 2, 3];
const array2 = [4, 5, 6];
const array3 = array.concat(array2); // [1, 2, 3, 4, 5, 6]
array3 === array; // false
Usar o operador spread normalmente é superior a usar concat(), mas concat() tem melhor suporte ao navegador - consulte concat() navegador suporte vs suporte generalizado ao navegador do operador.