Cómo fusionar dos arrays sin duplicarlas en JavaScript
-
Fusión de matrices en JavaScript usando
Spread Syntax
en ECMAScript 6 -
Fusión de matrices en JavaScript usando la función
Array.concat
en ECMAScript 5 -
Eliminar los duplicados de un array usando el bucle
for
-
JavaScript Eliminar duplicados de un array usando
Array.prototype
en ECMAScript 6 -
JavaScript elimina los duplicados del array usando
Object.defineProperty
en ECMAScript 5 -
Fusionar y sólo mantener valores únicos usando
Lo-Dash
oUnderscore.js
-
Fusionar y sólo mantener valores únicos usando
Set
en ECMAScript 6 -
Fusión sin valores duplicados usando
for
Loop yDictionary
con solo una complejidad
![Cómo fusionar dos arrays sin duplicarlas en JavaScript](/img/JavaScript/feature-image---javascript-merge-arrays.webp)
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:
- Crear un clon del array de entrada
inArray
para que no cambiemos el array original. - Crear un bucle anidado para encontrar y eliminar el elemento duplicado que se encuentra usando
arr.splice()
. El exterior comienza enn
y el interior enn+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:
- Crear un clon a partir del Objeto
this.concat()
así que no cambiaremos el array original - Crear un bucle anidado para encontrar y eliminar el elemento duplicado que se encuentra usando
arr.splice()
. El exterior comienza enn
y el interior enn+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) );