Différence entre deux tableaux en JavaScript

En introduisant la méthode d’entité de tableau .includes utilisée pour déterminer si un élément appartient à un tableau, nous l’utiliserons pour obtenir quels éléments du premier tableau sont également inclus dans le second tableau.

Nous l’utiliserons dans la fonction condition() de la méthode .filter. Cette fonction de rappel peut être une fonction fléchée ou une fonction commune en tant que fonction de rappel.

Le .filter peut être utilisé littéralement pour filtrer les éléments du tableau en fonction d’une condition, et la fonction de rappel dictera quels éléments le .filter ajoutera ou non au tableau renvoyé.

Différence entre deux tableaux en JavaScript

Le .include est une méthode de l’entité Array. Elle retourne true si l’élément passé en paramètre est inclus dans le tableau auquel la méthode est appelée, ou false si l’élément n’est pas inclus. À titre d’exemple simple :

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

Production :

// Output
true

Et si l’élément n’appartient pas au tableau, nous avons :

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

Production :

// Output
false

Cette méthode ne peut recevoir que deux paramètres. Si vous en transmettez plusieurs, cela peut renvoyer une valeur erronée à l’ensemble des éléments passés en paramètre. Comme vu ci-dessus, le premier paramètre est l’élément ; le second est l’index ou le fromIndex, qui est facultatif.

Le fromIndex est l’index où le .includes recherchera l’élément. Voyons l’exemple ci-dessous.

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

Comme la valeur 3 est sur l’index array[2], il est false que le tableau ait un élément égal à 3 en partant de l’index array[3] jusqu’à la fin.

// Output
false

Maintenant pour la méthode .filter, c’est aussi une méthode de l’entité tableau, et cette méthode renvoie un nouveau tableau filtré par une condition fournie par la fonction condition() qu’il contient. Le retour d’un nouveau tableau signifie que le tableau d’origine, auquel la méthode est appelée, restera immuable.

De plus, cette fonction condition() est une fonction de rappel. Une fonction de rappel est passée en paramètre à une autre fonction ou méthode appelée fonction externe.

La fonction externe appellera la fonction de rappel pour faire quelque chose ; dans le cas de la méthode .filter, il appellera la fonction de rappel de condition pour filtrer le tableau en fonction de cette condition.

La méthode .filter appellera la fonction de rappel pour chaque élément du tableau. Ainsi le .filter aura une itération array.length et renverra finalement un nouveau tableau avec plusieurs éléments égal au nombre d’itérations que la fonction de rappel renvoie une valeur équivalente à true.

Par exemple, si nous voulons que tous les éléments aient leur taille égale à 3, nous pouvons utiliser le .filter comme ci-dessous.

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

Dans ce cas, il reçoit un element en paramètre, et si cet element a sa taille égale à 3, il retourne true et retourne false sinon. Ainsi, la méthode .filter ajoute tout element dont la condition est true.

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

Comme prévu, la méthode .filter a renvoyé un tableau basé sur la condition element.length == 3. Chaque valeur du tableau avec sa taille égale à 3 a été ajoutée au tableau retourné.

Mais nous voulons obtenir la différence entre deux tableaux, et cela sera possible en les mettant tous ensemble.

Utiliserons la méthode .filter sur le tableau que nous voulons obtenir la différence, et à l’intérieur, nous utiliserons le .include comme condition, en vérifiant si l’élément du tableau que le .filter est appelé est inclus dans le deuxième élément. Voyons cet exemple :

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

Production :

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

Eh bien, voyez que la sortie n’est pas la différence entre les deux tableaux mais leur intersection. Non pas que la condition array2.includes(element) compare si element est inclus dans le deuxième tableau, et s’il est true, le .filter ajoutera cet élément au tableau résultant.

Mais si on met un non logique ou un ! dans l’état ? De cette façon, le .filter n’ajoutera que des éléments qui ne sont pas inclus dans le deuxième tableau. Vérifiez l’exemple :

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

Production :

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

Enfin, nous avons la différence entre les deux tableaux.

En plus, si nous voulons obtenir tous les éléments qui ne sont pas dans l’intersection, nous pouvons simplement faire ce qui suit.

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

Dans cet exemple, nous voulons tous les éléments qui ne sont pas 'a', 'b' ou 'c', donc la sortie est :

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

Et enfin, en dernier lieu, nous pouvons ajouter notre solution à la différence entre deux tableaux dans une méthode prototype de l’entité Array. Le .prototype est une propriété de l’entité Array qui nous permet d’ajouter des propriétés et des méthodes personnalisées à une entité.

Pour apporter une méthode .difference à l’entité Array, nous pouvons utiliser la structure suivante :

// 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']))

Production :

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

De cette façon, nous pouvons utiliser .difference chaque fois que nécessaire, au lieu de réécrire la logique à chaque fois.