Como mesclar arrays em JavaScript

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.

  • 1. Mesclar usando o operador spread
  • 2. Mesclar usando array.push()
  • 3. Mesclar usando array.concat()

1. Mesclar usando o operador spread

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]

2. Mesclar usando array.push()

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);

3. Mesclar usando array.concat()

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.

1.40 GEEK