En este post te voy a mostrar a sacar la diferencia entre dos arreglos de JavaScript. Es decir, obtener los elementos que existen en un arreglo A pero no existen en otro arreglo B.
La función que te voy a mostrar va a regresar un nuevo arreglo que tiene los elementos que hay en A
pero no en B
.
Veamos la siguiente función. En la misma hacemos un filter
al arreglo 1
, esto es para filtrar los elementos y crear un nuevo arreglo en donde no estén presentes los del arreglo 2
.
Para saber si un elemento está dentro de un arreglo usamos indexOf o findIndex si fuera necesario.
/**
* Diferencia de arreglos en JavaScript
* Obtener elementos que existen en arreglo A pero no en arreglo B
*
* @author parzibyte
*
* https://parzibyte.me/blog
*
*/// Obtener elementos que existen en un arreglo
// pero no en otro
const diferenciaDeArreglos = (arr1, arr2) => {
return arr1.filter(elemento => arr2.indexOf(elemento) == -1);
}
Vamos avanzando poco a poco. Recordemos que filter
va a ignorar el elemento (es decir, lo dejará fuera del nuevo arreglo) si lo que se regrese dentro de la función es false
.
Dentro de la función regresamos lo que regrese la siguiente comparación:
arr2.indexOf(elemento) == -1
Ya que indexOf
regresa -1
si el elemento no existe.
De esta manera obtenemos los elementos que existen en arr1
pero no en arr2
.
Simplemente invoca a la función con ambos arreglos. Si quieres obtener lo que hay en B
pero no en A
simplemente invierte los argumentos.
Es decir, en lugar de:
let diferencia = diferenciaDeArreglos(A, B);
Mejor haz un:
let diferencia = diferenciaDeArreglos(B, A);
Recuerda que la función regresa un nuevo arreglo.
Vamos a ver un ejemplo.
Que quede claro que no soy un experto de videojuegos pero para este ejemplo vamos a suponer que lo que digo es cierto (ya que creo que Luigi sí aparece como personaje en Mario Bros 3 cuando se juega en parejas)
/**
* Diferencia de arreglos en JavaScript
* Obtener elementos que existen en arreglo A pero no en arreglo B
*
* @author parzibyte
*
* https://parzibyte.me/blog
*
*/// Obtener elementos que existen en un arreglo
// pero no en otro
const diferenciaDeArreglos = (arr1, arr2) => {
return arr1.filter(elemento => arr2.indexOf(elemento) == -1);
}
const marioWorld = [
"Mario",
"Luigi",//diferencia
"Yoshi",// diferencia
"Bowser"
];
const marioBros3 = [
"Mario",
"Bowser"
];
const existenEnWorldPeroNoEn3 = diferenciaDeArreglos(marioWorld, marioBros3);
console.log("Existen en World pero no en 3: ", existenEnWorldPeroNoEn3);
const existenEn3PeroNoEnWorld = diferenciaDeArreglos(marioBros3, marioWorld);
console.log("Existen en 3 pero no en World: ", existenEn3PeroNoEnWorld);
/*
Salida
Existen en World pero no en 3: [ 'Luigi', 'Yoshi' ]
Existen en 3 pero no en World: []
*/
La función devuelve un nuevo arreglo que tiene los elementos que están en arr1
pero no en arr2
.
Si quieres usar arreglos de objetos, o cosas más complejas, simplemente asegúrate de buscar el índice.
Recomiendo usar findIndex cuando no tenemos arreglos de datos primitivos.
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Ayer estaba editando unos archivos que son servidos con el servidor Apache y al visitarlos…
Esta web usa cookies.