Diferencia entre dos arrays en JavaScript

Al presentar el método de entidad de array .includes que se usa para determinar si un elemento pertenece a un array, lo usaremos para obtener qué elementos del primer array están incluidos también en el segundo array.

Lo usaremos dentro de la función condition() dentro del método .filter. Esta función de devolución de llamada puede ser una función de flecha o una función común como función de devolución de llamada.

El .filter se puede usar literalmente para filtrar elementos del array en función de una condición, y la función de devolución de llamada dictará qué elementos agregará o no el .filter al array devuelta.

Diferencia entre dos arrays en JavaScript

El .include es un método de la entidad Array. Devuelve true si el elemento pasado como parámetro está incluido en el array al que llama el método, o false si el elemento no está incluido. Como un ejemplo simple:

// Input
let array = ['a', 'b', 'c', 'd'];
console.log(array.includes('a'))

Producción :

// Output
true

Y si el elemento no pertenece al arreglo, tenemos:

// Input
let array = ['a', 'b', 'c', 'd'];
console.log(array.includes('z'))

Producción :

// Output
false

Este método solo puede recibir dos parámetros. Si pasa más de uno, puede devolver un valor incorrecto al conjunto de elementos pasados ​​como parámetro. Como se vio arriba, el primer parámetro es el elemento; el segundo es el índice o el fromIndex, que es opcional.

El fromIndex es el índice donde .includes buscará el elemento. Veamos el ejemplo a continuación.

// Input
let array = [1, 2, 3, 4, 5];
console.log(array.includes(3, 3))

Como el valor 3 está en el índice array[2], es false que el array tenga un elemento igual a 3 desde el índice array[3] hasta el final.

// Output
false

Ahora, para el método .filter, también es un método de la entidad array, y este método devuelve un nuevo array filtrada por una condición proporcionada por la función condition() dentro de ella. Devolver un nuevo array significa que el array original, a la que se llama el método, permanecerá inmutable.

Además, esta función condition() es una función de devolución de llamada. Una función de devolución de llamada se pasa como parámetro a otra función o método llamado “función externa”.

La función externa llamará a la función de devolución de llamada para hacer algo; en el caso del método .filter, llamará a la función de devolución de llamada de condición para filtrar el array basándose en esta condición.

El método .filter llamará a la función de devolución de llamada para cada elemento del array. Entonces el .filter tendrá iteraciones array.length y finalmente devolverá un nuevo array con varios elementos igual al número de iteraciones que la función de devolución de llamada devuelve un valor equivalente a true.

Por ejemplo, si queremos que todos los elementos tengan un tamaño igual a 3, podemos usar el .filter como se muestra a continuación.

// Input
let array = ['one', 'two', 'three', 'four', 'five']
array = array.filter(element => element.length == 3)
console.log(array)

En este caso, recibe como parámetro un element, y si ese element tiene su tamaño igual a 3, devuelve true y false si no. Entonces, el método .filter agrega cualquier elemento que la condición resulte true.

// Output
[ 'one', 'two' ]

Como era de esperar, el método .filter devolvió un array basada en la condición element.length == 3. Cada valor del array con su tamaño igual a 3 se agregó al array devuelta.

Pero queremos obtener la diferencia entre dos arreglos, y esto será posible juntándolos todos.

Usaremos el método .filter en la matriz que queremos obtener la diferencia, y dentro de él, usaremos .include como condición, verificando si el elemento del array al que el .filter se llama está incluido en el segundo elemento. Veamos este ejemplo:

// Input
let array1 = ['a', 'b', 'c', 'd', 'e'];
let array2 = ['a', 'b', 'c'];
console.log(array1.filter(element => array2.includes(element)))

Producción :

// Output
[ 'a', 'b', 'c' ]

Bueno, vea que la salida no es la diferencia entre las dos arrays sino su intersección. No es que la condición array2.includes(element) compare si el element está incluido en el segundo array, y si es true, el .filter añadirá este elemento al array resultante.

Pero si ponemos un lógico no o ! en la condicion? De esta manera, el .filter agregará solo elementos que no están incluidos en el segundo array. Revisa el ejemplo:

// Input
let array1 = ['a', 'b', 'c', 'd', 'e'];
let array2 = ['a', 'b', 'c'];
console.log(array1.filter(element => !array2.includes(element)))

Producción :

// Output
[ 'd', 'e' ]

Finalmente, tenemos la diferencia entre las dos arrays.

Como beneficio adicional, si queremos obtener todos los elementos que no están en la intersección, podemos hacer lo siguiente.

// Input
let array1 = ['a', 'b', 'c', 'd', 'e', 'f'];
let array2 = ['a', 'b', 'c', 'x', 'y', 'z'];
let array3 = array1.filter(element => !array2.includes(element))
                 .concat(array2.filter(element => !array1.includes(element)))
console.log(array3)

En este ejemplo, queremos todos los elementos que no sean 'a', 'b' o 'c', por lo que el resultado es:

// Output
[ 'd', 'e', 'f', 'x', 'y', 'z' ]

Y finalmente, como última cosa, podemos agregar nuestra solución a la diferencia entre dos arreglos en un método prototipo de la entidad Array. El .prototype es una propiedad de la entidad Array que nos permite agregar propiedades y métodos personalizados a una entidad.

Para hacer un método .difference a la entidad Array, podemos usar la siguiente estructura:

// Input
// Declaring the prototype .difference method
Array.prototype.difference = function(array2) {
  return this.filter(element => !array2.includes(element))
} let array1 = ['a', 'b', 'c', 'd', 'e'];
console.log(array1.difference(['a', 'b', 'c']))

Producción :

// Output
[ 'd', 'e' ]

De esta forma, podemos usar .difference cada vez que sea necesario, en lugar de reescribir la lógica cada vez.