Cómo fusionar dos arrays sin duplicarlas en JavaScript

  2. HowTo
  3. JavaScript Howtos
  4. Cómo fusionar dos arrays sin duplicarlas …
Moataz Farid 12 octubre 2023
JavaScript Java Array
  1. Fusión de matrices en JavaScript usando Spread Syntax en ECMAScript 6
  2. Fusión de matrices en JavaScript usando la función Array.concat en ECMAScript 5
  3. Eliminar los duplicados de un array usando el bucle for
  4. JavaScript Eliminar duplicados de un array usando Array.prototype en ECMAScript 6
  5. JavaScript elimina los duplicados del array usando Object.defineProperty en ECMAScript 5
  6. Fusionar y sólo mantener valores únicos usando Lo-Dash o Underscore.js
  7. Fusionar y sólo mantener valores únicos usando Set en ECMAScript 6
  8. Fusión sin valores duplicados usando for Loop y Dictionary con solo una complejidad
Cómo fusionar dos arrays sin duplicarlas en JavaScript

Este tutorial aprenderá cómo podemos fusionar dos arrays en JavaScript sin duplicar los valores.

Primero, mostraremos los diferentes métodos de fusión en las versiones ES5 y ES6.

Luego, aprenderemos cómo eliminar los duplicados usando diferentes métodos.

Finalmente, aprenderá a hacer la operación en un solo paso, ya sea escribiendo sus propias funciones o usando librerías externas.

Supongamos que tenemos dos arrays arrayA y arrayB y queremos fusionarlas en arrayC:

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

Fusión de matrices en JavaScript usando Spread Syntax en ECMAScript 6

La sintaxis de spread (...) se utiliza para expandir el contenido de elementos iterativos en un lugar donde se esperan elementos como matrices, o donde se espera cero o más argumentos en una función, por ejemplo:

var arr = [2, 4];

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

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

Ahora vamos a fusionar nuestros arrays en arrayC usando esa sintaxis de spread:

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

Código de ejemplo:

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

Fusión de matrices en JavaScript usando la función Array.concat en ECMAScript 5

La fusión usando el Array.concat se usa para concatenar el contenido del array de entrada (arrayB) con el contenido del array de la fuente (arrayA).

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

Si queremos eliminar los duplicados del array resultante, podemos hacerlo de múltiples maneras, así que veamos cómo podemos hacerlo.

Por ejemplo:

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

Eliminar los duplicados de un array usando el bucle for

La forma más simple de eliminar los duplicados es crear su propio nido para el bucle.

Nuestro algoritmo será como:

  1. Crear un clon del array de entrada inArray para que no cambiemos el array original.
  2. Crear un bucle anidado para encontrar y eliminar el elemento duplicado que se encuentra usando arr.splice(). El exterior comienza en n y el interior en 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;
}

Entonces podemos usar esa función removeDuplicates como cualquier otra función.

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

Ejemplo:

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

JavaScript Eliminar duplicados de un array usando Array.prototype en ECMAScript 6

También podemos eliminar los duplicados usando Array.prototype en caso de que podamos usar ECMAScript 6.

¿Qué significa incluso prototype? El prototype es como el objeto asociado con todas las funciones y objetos en JavaScript.

Veamos cómo podemos usar el Array.prototype.

Nuestro algoritmo será como:

  1. Crear un clon a partir del Objeto this.concat() así que no cambiaremos el array original
  2. Crear un bucle anidado para encontrar y eliminar el elemento duplicado que se encuentra usando arr.splice(). El exterior comienza en n y el interior en 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;
}

Entonces llamar a ese prototipo podría ser como:

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

Ejemplo:

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

JavaScript elimina los duplicados del array usando Object.defineProperty en ECMAScript 5

Si sólo podemos usar ECMAScript 5, podemos crear nuestra propia propiedad usando Object.defineProperty con lo que podremos eliminar los duplicados de todos los elementos de tipo Array.

Aquí definimos el tipo de propiedad como un prototipo de array escribiendo Array.prototype. El nombre de la propiedad debe ser insertado como el siguiente parámetro como removeDuplicates.

Veamos cómo se escribe 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;
  }
});

Entonces podemos llamar a esa propiedad directamente así:

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

Ejemplo

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

Fusionar y sólo mantener valores únicos usando Lo-Dash o Underscore.js

Si el objetivo es obtener un nuevo conjunto de valores únicos de dos o más matrices y usar archivos externos, podemos usar la biblioteca Lo-Dash para hacerlo.

Primero, necesitamos importar la librería usando el Cloudflare CDN dentro de la plantilla HTML,

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

Luego usamos la biblioteca como:

arrayC = _.union(arrayA, arrayB);

Ejemplo:

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

Fusionar y sólo mantener valores únicos usando Set en ECMAScript 6

Si podemos usar ECMAScript 6 y nuestro objetivo son sólo los valores únicos de múltiples matrices, entonces Set puede ser una muy buena opción.

podemos usarlo como en el ejemplo de abajo usando la sintaxis spread:

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

O podemos usarlo así

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

Ejemplo:

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

Fusión sin valores duplicados usando for Loop y Dictionary con solo una complejidad

Otra forma de fusionar dos arrays y obtener los resultados sin tener valores duplicados es usando la idea del Dictionary en JavaScript donde no podemos tener dos 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);
}

Entonces podemos usar nuestra función así:

arrayC = mergeAndGetUnique(arrayA, arrayB);

Ejemplo:

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

Artículo relacionado - Java Array