Fundir duas arrays sem duplicados em JavaScript

  2. HowTo
  3. JavaScript Howtos
  4. Fundir duas arrays sem duplicados em …
Moataz Farid 12 outubro 2023
JavaScript Java Array
  1. JavaScript Merge Arrays Utilizando a Sintaxe de Difusão em ECMAScript 6
  2. JavaScript Merge Arrays utilizando Array.concat Função em ECMAScript 5
  3. Remover duplicados de um array utilizando o for Loop
  4. Remover duplicados de un array utilizando Array.prototype no ECMAScript 6
  5. Remover Duplicações do Array utilizando Object.defineProperty em ECMAScript 5
  6. Fundir e manter apenas valores únicos utilizando Lo-Dash ou Underscore.js
  7. Fundir e manter apenas valores únicos utilizando Set em ECMAScript 6
  8. Fundir sem duplicar valores utilizando for Loop e Dicionário com apenas O(n) Complexidade
Fundir duas arrays sem duplicados em JavaScript

Este tutorial aprenderá como podemos fundir duas arrays em JavaScript sem quaisquer valores duplicados.

Primeiro, mostraremos os diferentes métodos de fusão tanto na versão ES5 como na ES6.

Depois, aprenderemos como remover as duplicações usando métodos diferentes.

Finalmente, aprenderemos a fazer a operação em apenas um passo, quer escrevendo as suas próprias funções ou utilizando bibliotecas externas.

Vamos assumir que temos duas arrays arrayA e arrayB e queremos fundi-las em arrayC:

var arrayA = ['Java', 'JavaScript'];
var arrayB = ['C#', 'PHP', 'Java'];
var arrayC;

JavaScript Merge Arrays Utilizando a Sintaxe de Difusão em ECMAScript 6

A sintaxe de propagação (...) é utilizada para expandir o conteúdo de elementos iteráveis num local onde elementos como arrays são esperados, ou onde se espera zero ou mais argumentos numa função, por exemplo:

var arr = [2, 4];

function add(x, y) {
  return x + y;
}

console.log(add(...arr));

Agora vamos fundir os nossos arrays em arrayC utilizando a sintaxe de dispersão:

arrayC = [...arrayA, ...arrayB];
console.log(arrayC);

Código de exemplo:

var arrayA = ['Java', 'JavaScript'];
var arrayB = ['C#', 'PHP', 'Java'];
var arrayC;

console.log("Array A > "+arrayA);
console.log("Array B > "+arrayB);

//merging using the spread syntax
arrayC = [...arrayA,...arrayB];
console.log("Merged Using Spread Syntax >"+arrayC);

Resultado:

Array A > Java,JavaScript
Array B > C#,PHP,Java
Merged Using Spread Syntax >Java,JavaScript,C#,PHP,Java

JavaScript Merge Arrays utilizando Array.concat Função em ECMAScript 5

A fusão utilizando o Array.concat é utilizada para concatenar o conteúdo do array de entrada (arrayB) com o conteúdo do array de fonte (arrayA).

arrayC = arrayA.concat(arrayB);
console.log(arrayC);

Se quisermos remover as duplicatas do array resultante, podemos fazê-lo de múltiplas formas, por isso vamos ver como o podemos fazer.

Exemplo:

var arrayA = ['Java', 'JavaScript'];
var arrayB = ['C#', 'PHP', 'Java'];
var arrayC;

console.log("Array A > "+arrayA);
console.log("Array B > "+arrayB);

//merging using Array.concat function in ECMAScript 5
arrayC = arrayA.concat(arrayB);
console.log("Merged Using Array.concat function >"+arrayC);

Resultado:

Array A > Java,JavaScript
Array B > C#,PHP,Java
Merged Using Array.concat function >Java,JavaScript,C#,PHP,Java

Remover duplicados de um array utilizando o for Loop

A forma mais simples de remover as duplicações é criar o seu próprio aninhamento para loop.

O nosso Algoritmo será como:

  1. Crie um clone a partir do array de inteiro inArray para que não alteremos a matriz original.
  2. Criar um laço aninhado para encontrar e remover o elemento duplicado encontrado utilizando arr.splice(). O exterior começa por n e o interior por n+1.
function removeDuplicates(inArray) {
  var arr =
      inArray
          .concat()  // create a clone from inArray so not to change input array
  // create the first cycle of the loop starting from element 0 or n
  for (var i = 0; i < arr.length; ++i) {
    // create the second cycle of the loop from element n+1
    for (var j = i + 1; j < arr.length; ++j) {
      // if the two elements are equal , then they are duplicate
      if (arr[i] === arr[j]) {
        arr.splice(j, 1);  // remove the duplicated element
      }
    }
  }
  return arr;
}

Depois podemos utilizar essa função removeDuplicates como qualquer outra função.

var arrayWithoutDuplicates = removeDuplicates(arrayC);
console.log(arrayWithoutDuplicates);

Exemplo:

var arrayA = ['Java', 'JavaScript'];
var arrayB = ['C#', 'PHP', 'Java'];
var arrayC;

console.log("Array A > "+arrayA);
console.log("Array B > "+arrayB);

//removing duplicates from an array using nested for loop

function removeDuplicates(inArray){
    var arr = inArray.concat() // create a clone from inArray so not to change input array
    //create the first cycle of the loop starting from element 0 or n
    for(var i=0; i<arr.length; ++i) {
        //create the second cycle of the loop from element n+1
        for(var j=i+1; j<arr.length; ++j) {
            //if the two elements are equal , then they are duplicate
            if(arr[i] === arr[j]) {
                arr.splice(j, 1); //remove the duplicated element 
            }
        }
    }
    return arr;
}
arrayC = arrayA.concat(arrayB);
console.log("Merged arrayC > "+ arrayC );
console.log("Removing duplicates using removeDuplicates > "+ removeDuplicates(arrayC) );

Resultado:

Array A > Java,JavaScript
Array B > C#,PHP,Java
Merged arrayC > Java,JavaScript,C#,PHP,Java
Removing duplicates using removeDuplicates > Java,JavaScript,C#,PHP

Remover duplicados de un array utilizando Array.prototype no ECMAScript 6

Também podemos remover as duplicações utilizando Array.prototype no caso de podermos utilizar o ECMAScript 6.

O que significa mesmo prototype? O prototype é como o Objecto associado a todas as funções e Objectos em JavaScript.

Vamos ver como podemos utilizar o Array.prototype.

O nosso Algoritmo será como:

  1. Criar um clone a partir do array Objecto this.concat() para não alterarmos a matriz original
  2. Criar um laço aninhado para encontrar e remover o elemento duplicado encontrado utilizando arr.splice(). O início exterior de n e o interior de n+1.
Array.prototype.removeDuplicates = function() {
  var arr = this.concat();  // create a clone from the input so not to change
                            // the source
  // create the first cycle of the loop starting from element 0 or n
  for (var i = 0; i < arr.length; ++i) {
    // create the second cycle of the loop from element n+1
    for (var j = i + 1; j < arr.length; ++j) {
      // if the two elements are equal , then they are duplicate
      if (arr[i] === arr[j]) {
        arr.splice(j, 1);  // remove the duplicated element
      }
    }
  }
  return arr;
}

Depois, chamar a esse protótipo poderia ser como:

var arrayWithoutDuplicates = arrayC.removeDuplicates();
console.log(arrayWithoutDuplicates);

Exemplo:

var arrayA = ['Java', 'JavaScript'];
var arrayB = ['C#', 'PHP', 'Java'];
var arrayC;

console.log("Array A > "+arrayA);
console.log("Array B > "+arrayB);

arrayC = arrayA.concat(arrayB);


//removing duplicates from an array using Array.prototype in ECMAScript 6
Array.prototype.removeDuplicatesPrototype = function() {
   var arr = this.concat(); // get the input array
   //create the first cycle of the loop starting from element 0 or n
   for(var i=0; i<arr.length; ++i) {
       //create the second cycle of the loop from element n+1
       for(var j=i+1; j<arr.length; ++j) {
           //if the two elements are equal , then they are duplicate
           if(arr[i] === arr[j]) {
               arr.splice(j, 1); //remove the duplicated element 
           }
       }
   }
   return arr;
}
console.log("Merged arrayC > "+arrayC);
console.log("Removing duplicates using removeDuplicatesPrototype > "+arrayC.removeDuplicatesPrototype());

Remover Duplicações do Array utilizando Object.defineProperty em ECMAScript 5

Se só pudermos utilizar ECMAScript 5, podemos criar a nossa própria propriedade utilizando Object.defineProperty, com isso poderemos remover duplicados de todos os elementos do tipo Array.

Aqui definimos o tipo de propriedade como um protótipo de array escrevendo Array.prototype. O nome da propriedade deve ser inserido como o parâmetro seguinte como removeDuplicates.

Vamos ver como é escrito correctamente:

Object.defineProperty(Array.prototype, 'removeDuplicates', {
  // defining the type and name of the property
  enumerable: false,
  configurable: false,
  writable: false,
  value: function() {
    var arr = this.concat();  // get the input array
    // create the first cycle of the loop starting from element 0 or n
    for (var i = 0; i < arr.length; ++i) {
      // create the second cycle of the loop from element n+1
      for (var j = i + 1; j < arr.length; ++j) {
        // if the two elements are equal , then they are duplicate
        if (arr[i] === arr[j]) {
          arr.splice(j, 1);  // remove the duplicated element
        }
      }
    }
    return arr;
  }
});

Depois podemos chamar a essa propriedade directamente assim:

var arrayWithoutDuplicates = arrayC.removeDuplicates();
console.log(arrayWithoutDuplicates);

Exemplo

var arrayA = ['Java', 'JavaScript'];
var arrayB = ['C#', 'PHP', 'Java'];
var arrayC;

console.log("Array A > "+arrayA);
console.log("Array B > "+arrayB);

arrayC = arrayA.concat(arrayB);

//removing duplicates from an array using defineProperty in ECMAScript 5
Object.defineProperty(Array.prototype, 'removeDuplicatesProperty', { //defining the type and name of the property
    enumerable: false,
    configurable: false,
    writable: false,
    value: function() {
        var arr = this.concat(); // get the input array
        //create the first cycle of the loop starting from element 0 or n
        for(var i=0; i<arr.length; ++i) {
            //create the second cycle of the loop from element n+1
            for(var j=i+1; j<arr.length; ++j) {
                //if the two elements are equal , then they are duplicate
                if(arr[i] === arr[j]) {
                    arr.splice(j, 1); //remove the duplicated element 
                }
            }
        }
        return arr;
    }
});

console.log("Merged arrayC > "+arrayC);
console.log("Removing duplicates using removeDuplicatesProperty > "+arrayC.removeDuplicatesProperty() );

Fundir e manter apenas valores únicos utilizando Lo-Dash ou Underscore.js

Se o objectivo for obter um novo array de valores únicos de dois ou mais conjuntos e utilizar ficheiros externos, podemos utilizar a Biblioteca Lo-Dash para o fazer.

Primeiro, precisamos de importar a biblioteca utilizando Cloudflare CDN dentro do HTML Template ,

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>

Depois utilizamos a biblioteca como:

arrayC = _.union(arrayA, arrayB);

Exemplo:

var arrayA = ['Java', 'JavaScript'];
var arrayB = ['C#', 'PHP', 'Java'];

console.log('Array A > ' + arrayA);
console.log('Array B > ' + arrayB);

// merging arrayA and arrayB keeping only unique values using Lo-Dash library
//  don't forget to import the script using <script
//  src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>

console.log(
    'Merging arrayA and arrayB keeping only unique values using Lo-Dash Lib. > ' +
    _.union(arrayA, arrayB));

Fundir e manter apenas valores únicos utilizando Set em ECMAScript 6

Se pudermos utilizar ECMAScript 6 e o nosso alvo for apenas os valores únicos de múltiplas arrays, então Set pode ser uma opção muito boa.

podemos utilizá-lo como o exemplo abaixo, utilizando a sintaxe spread:

arrayC = [...new Set([...arrayA, ...arrayB])];

Ou podemos utilizá-la dessa forma

arrayC = Array.from(new Set(arrayA.concat(arrayB)));

Exemplo:

var arrayA = ['Java', 'JavaScript'];
var arrayB = ['C#', 'PHP', 'Java'];

console.log('Array A > ' + arrayA);
console.log('Array B > ' + arrayB);

// merging arrayA and arrayB keeping unique values using Set in ECMAScript 6

console.log(
    'Merging arrayA and arrayB keeping only unique values using Set > ' +
    Array.from(new Set(arrayA.concat(arrayB))));

console.log(
    'Merging arrayA and arrayB keeping only unique values using Set with spread syntax > ' +
    [...new Set([...arrayA, ...arrayB])]);

Fundir sem duplicar valores utilizando for Loop e Dicionário com apenas O(n) Complexidade

Outra forma de fundir dois conjuntos e obter os resultados sem ter quaisquer valores duplicados é utilizando a ideia do Dicionário em JavaScript onde não podemos ter dois valores duplicados.

function mergeAndGetUnique(arrayA, arrayB) {
  var hash = {};
  var x;

  for (x = 0; i < arrayA.length; i++) {
    hash[arrayA[i]] = true;
  }
  for (x = 0; i < arrayB.length; i++) {
    hash[arrayB[i]] = true;
  }
  return Object.keys(hash);
}

Depois podemos utilizar a nossa função dessa forma:

arrayC = mergeAndGetUnique(arrayA, arrayB);

Exemplo:

var arrayA = ['Java', 'JavaScript'];
var arrayB = ['C#', 'PHP', 'Java'];
var arrayC;

console.log("Array A > "+arrayA);
console.log("Array B > "+arrayB);

arrayC = arrayA.concat(arrayB);

//merging arrayA and arrayB keeping unique values using dictionary with O(n) complexity

function mergeAndGetUnique(arrayA, arrayB) {
  var hash = {};
  var x;
  
  for (x = 0; x < arrayA.length; x++) {
    hash[arrayA[x]] = true;
  }
  for (x = 0; x < arrayB.length; x++) {
    hash[arrayB[x]] = true;
  }
  return Object.keys(hash);
}

console.log("Merging arrayA and arrayB keeping only unique values using Set with spread syntax > "+ mergeAndGetUnique(arrayA, arrayB) );

Artigo relacionado - Java Array