Duas maneiras de unir vetores em JavaScript:

Você sabe como unir vetores?

Este artigo mostrará duas maneiras de unir vetores e retornar um novo vetor.

Serão utilizados os operadores Spread e Concat.

// Duas formas de unir vetores
const circ = [‘círculo’, ‘esfera’];
const quadr = [‘quadrado’, ‘cubo’];

// Usando o Concat para unir os vetores:
cons unirVet = [].concat(circ, quadr);

// Usando o Spread para unir os vetores:
const unirSpread = [...circ, ...quadr];

// E o resultado será:
console.log(unirSpread);

// [‘círculo’, ‘esfera’, ‘quadrado’, ‘cubo’]

Você também pode escrever o método Concat deste modo:

const circ = [‘círculo’, ‘esfera’];
const quadr = [‘quadrado’, ‘cubo’];

const unirVetor = circ.concat(quadr);
console.log(unirVetor);

E o resultado será:
// [‘círculo’, ‘esfera’, ‘quadrado’, ‘cubo’]

console.log(circ); // [‘círculo’, ‘esfera’];
console.log(quadr); // [‘quadrado’, ‘cubo’];

Este modo não altera o vetor existente.

Comparando os dois modos do concat:

// Versão 1
cons unirVet = [].concat(circ, quadr);

// Versão 2
const unirVetor = circ.concat(quadr);

A versão 1 cria uma nova matriz e não manipula uma matriz existente. Visualmente falando, a versão 2 parece adicionar a matriz de quadrados à matriz de círculos.

A diferença entre Spread e Concat:

Spread:

O Spread quebra um array ou uma string em múltiplos elementos. Se você possui um array e quer criar um array com o existente fazendo parte dele, você pode usar o Spread.

let umaString = "Olá Mundo";

console.log(umaString); // exibe a string

console.log(...umaString); // exibe cada caracter

let umVetor = [11,22,33,44,55,66]; //cria um vetor

console.log(umVetor); // mostra conteúdo o vetor

console.log(...umVetor); // mostra o conteúdo de cada índice do vetor

Concat:

Já o Concat cria um novo vetor unindo os elementos que foram passados como parâmetro, não alterando a si mesmo ou aos argumentos passados, mas criando um novo vetor contendo uma cópia de si e dos argumentos.

A cópia é uma referência aos objetos. Se o objeto original for modificado, as mudanças serão visíveis no original e na cópia.

Strings e numbers (diferente dos objetos String e Number), o concat copia os valores de strings e numbers para o novo vetor, mas qualquer alteração no novo vetor não refletirá no original.

// Cria uma função que concatenará
// o vetor e a variável
function combinaVetor(vetor1, vetor2){ 
    return [].concat(vetor1, vetor2);
} 

// Crie um vetor
const ehVetor = ['carro', 'moto', 'onibus'];

// Crie uma variável
const notVetor = 7;

// Chamada da função
combinaVetor(ehVetor, notVetor);

// [“carro”, “moto”, “onibus”, 7]

Unindo arrays com Push:

Quando você utilizar o método Push, você não criará um novo array, mas sim manipulando um existente:

const meninos = ["joao", "josé"];
const meninas = ["maria", "vanessa"];
const alunos = meninos.push(...meninas);

console.log(alunos); //Quando você usa o push, ele retornará o tamanho do vetor unido.
console.log(meninos); 
["joao", "josé", "maria", "vanessa"] // Retorna o vetor meninos modificado 

console.log(meninas);
 ["maria", "vanessa"]

Gostou deste artigo? Comente abaixo e compartilhe com seus amigos!