Mesclar matrizes em JavaScript: com e sem duplicatas

Nesta postagem, você aprenderá como combinar vários arrays em um único array em JavaScript. Isso é conhecido como mesclar matrizes. Este é um problema trivial que tem várias soluções. Mostrarei as formas mais usadas e otimizadas de mesclar arrays.

A maneira como você mescla arrays depende se você deseja remover valores duplicados e se deseja modificar o array original ou criar um novo array. Veremos cada tipo neste post.

Mesclar matrizes que permitem valores duplicados

Operador de spread

Uma das maneiras mais novas e concisas de executar uma mesclagem de array é com o operador spread. O operador de spread [...] A sintaxe permite que duas ou mais matrizes sejam unidas. Isso criará um novo array, sem modificar os arrays pais.

1

const mergedArray = [...array1, array2]

Este método não remove duplicatas. Em vez disso, todos os elementos da matriz na matriz mesclada serão inseridos na mesma ordem da fonte. Aqui está um exemplo para ajudar você a entender:

1

const array1 = [1,2,3]

2

const array2 = [1,2,4]

3

4

const merged = [...array1, array2]

5

console.log(merged) // [1, 2, 3, 1, 2, 4]

Tempo Complexidade do Operador de Spread

O operador Spread faz uso de [Symbol.iterator], que é uma propriedade do objeto. No caso de mesclar dois arrays, o operador spread itera através de cada elemento do array usando o método .next() função. Isso resulta em uma complexidade de tempo de O(N).

Array Concat

Se você estiver procurando por um método funcional para mesclar arrays, Array.concat() será útil. Além disso, se você não tiver certeza sobre o tipo de entrada, use Array.concat().

1

const mergedArray = array1.concat(array2)

Além disso, você pode usar esta sintaxe:

1

const mergedArray = [].concat(array1, array2)

O concat A função também é uma maneira imutável de mesclar arrays. Ele não modifica os arrays pais, mas cria um novo array mesclado. Os itens da matriz serão inseridos na mesma ordem da fonte.

1

const array1 = [1,2,3]

2

const array2 = [1,2,4]

3

4

const merged = [].concat(array1, array2)

5

or

6

const merged = array1.concat(array2)

7

console.log(merged) // [1, 2, 3, 1, 2, 4]

O concat A função permite mesclar dois ou mais arrays juntos.

1

const mergedArray = array1.concat(array2, array3, array4 .... arrayN);

Tempo Complexidade

O concat função pode ter melhor desempenho do que o operador spread. Isto é porque concat usa métodos de otimização específicos de matriz. Por outro lado, o operador de spread depende dos protocolos de iteração comuns. Testei alguns arrays grandes em navegadores de diferença para comparar o operador spread e concat:

Array push

Se o método de mesclagem de matriz não deve criar uma nova matriz, array.push será útil. Este método permite mesclar um elemento, em uma matriz, em um já existente. O elemento recém-adicionado será inserido no final do array. Isto faz array.push a mutável forma de fusão.

1

const array1 = [1,2,3]

2

array1.push(4)

3

array2.push(2)

4

console.log(array1) // [1, 2, 3, 4, 2]

Você pode inserir um array em um array existente usando o operador spread.

1

const array1 = [1,2,3]

2

const array2 = [1,2,4]

3

array1.push(...array2)

4

5

console.log(array1) // [1, 2, 3, 1, 2, 4]

Quando você deseja mesclar dois ou mais arrays, usando array.push() a seguinte sintaxe pode ser usada:

1

const array1 = [1,2,3];

2

const array2 = [4,5,6];

3

const array3 = [7,8,9];

4

5

array1.push(...[...array2, ...array3]); // [1,2,3,4,5,6,7,8,9]

Complexidade de tempo

A operação push do array custa O(1) para um único elemento. Se você quiser mesclar N elementos, custará O(N). Durante a mesclagem da matriz, um custo de cópia de O(N) será incorrido quando um slot de matriz for alocado e um novo item for inserido.

Mesclar matrizes e remover valores duplicados

O For Loop Tradicional

O método tradicional para mesclar dois arrays envolve dois ou mais for-loops com base no número de arrays.

Algoritmo

1. iterar através de cada item da nova matriz
2. usar indexOf() para julgar se esse item já está presente no array antigo
3. se não estiver presente, adicione-o ao array antigo

1

function merge(array1, array2) {

2

    for (let i=0; i<array2.length; i++) 

3

        if (array1.indexOf(array2[i])==-1)

4

            array1.push(array2[i]);

5

6

    return array1;

7

}

Complexidade de tempo

Para mesclar dois arrays de mesmo tamanho usando este algoritmo, o indexOf O método precisa ser chamado para cada um dos N elementos da nova matriz. E cada chamada para indexOf leva tempo O(N) para pesquisar na matriz antiga. Portanto, a complexidade de tempo geral é O(N²).

Filtrar e Concatenar com ES5

Esta solução substitui os loops for pelas funções de matriz integradas concat e filter.

concat() pode ser usado para mesclar vários arrays juntos. Mas, não remove duplicatas.

filter() é usado para remover duplicatas da matriz mesclada. Assim como o loop for tradicional, o filtro usa o indexOf() para julgar a ocorrência de um item na matriz mesclada.

Algoritmo

1. concatenar() os arrays juntos, e armazenar em outro array
2. Use o filtro() para percorrer a matriz mesclada e remover qualquer item que ocorra várias vezes

1

function merge(array1, array2) {

2

    let arrayMerge = array1.concat(array2)

3

    return arrayMerge.filter( (item, index) =>

4

        arrayMerge.indexOf(item) == index

5

    )

6

}

Complexidade de tempo

Para mesclar dois arrays de mesmo tamanho com este algoritmo, o concat leva tempo O(N). Em seguida, o filtro chama indexOf em cada elemento da matriz resultante, novamente com O(N²) tempo.

Mesclando Arrays com um Set

O ES6 oferece uma solução de linha única para mesclar arrays sem duplicatas. Ele usa o operador spread e um Set.

Set é uma estrutura de dados integrada em JavaScript ES6 e superior que não oferece suporte a duplicatas. é aqui concat() e Set desviar—Set verifica se há duplicatas e as remove. Portanto, muito do nosso trabalho é feito pela estrutura de dados.

Código para mesclar matrizes com um conjunto

1. coletar os valores únicos para as duas matrizes em um Set
2. use o operador spread para converter o Set de volta a uma matriz

1

function merge(array1, array2) {

2

    return [... new Set[...array1, ...array2])];

3

}

Complexidade de tempo

Conclusão

Até agora, vimos mais de uma única maneira de mesclar dois arrays em JavaScript. Se você estiver pronto para mesclar com duplicatas, as soluções mais ideais incluem concat e o operador de spread.

Também vimos como remover duplicatas de arrays mesclados. A solução oferecida pelo ES6 é a mais simples e a mais barata. Com uma complexidade de tempo de O(n), essa é a escolha ideal para mesclar dois ou mais arrays enquanto remove duplicatas.