Supprimer les doublons d'un tableau en JavaScript

Moataz Farid 12 octobre 2023
  1. Utilisez Set pour supprimer les doublons en JavaScript avec la syntaxe spread de l’ECMAScript 6
  2. Utilisez Array.filter() pour supprimer les doublons du tableau JavaScript
  3. Utiliser hashtable pour supprimer les doublons d’un tableau primitif en JavaScript
  4. Utilisez la fonction _.uniq() des bibliothèques underscore et LoDash pour supprimer les doublons des tableaux en JavaScript
Supprimer les doublons d'un tableau en JavaScript

Ce tutoriel expliquera comment nous pouvons supprimer les doublons d’un tableau en JavaScript en utilisant différentes méthodes. Une des méthodes consiste à passer le tableau cible au constructeur de la classe Set pour retourner un tableau équivalent non dupliqué. Une autre façon est d’utiliser la méthode filter() du tableau en JavaScript et d’implémenter la condition de test dans sa fonction de rappel.

Utilisez Set pour supprimer les doublons en JavaScript avec la syntaxe spread de l’ECMAScript 6

En mathématiques, l’ensemble contient un groupe d’éléments uniques et non doubles. En JavaScript, la classe Set peut obtenir tous ces éléments non doubles à partir d’un tableau.

Avec ECMAScript 6, nous pouvons utiliser la puissance de la syntaxe de diffusion en utilisant la classe Set pour obtenir un nouveau tableau de non-duplicata que nous envoyons au constructeur Set.

var arr = [1, 2, 3, 4, 1, 2, 3, 1, 2, 3]

    var uniqueArr = [...new Set(arr)]

console.log(uniqueArr)

Production :

[1, 2, 3, 4]

Utilisez Array.filter() pour supprimer les doublons du tableau JavaScript

Le tableau JavaScript a introduit une des fonctions d’ordre supérieur appelée filter(), qui fait une boucle sur chaque élément du tableau, lui applique une condition de test, et ne retourne cet élément que s’il remplit la condition. Cette condition de test sera implémentée à l’intérieur de la fonction de rappel, passée en argument à la méthode filter().

Nous pouvons supprimer les doublons du tableau en définissant la condition de test pour vérifier si l’index de l’élément courant dans la boucle est la première occurrence dans ce tableau. La fonction filter() prendra l’argument supplémentaire pos qui représentera l’index du tableau de l’élément pendant l’exécution.

var arrTwo = ['Hello 1 ', ' Hello 2 ', 'Hello 1 ', ' Hello 2 ', 'Hello 1 again']

    const filteredArray = arrTwo.filter(function(ele, pos) {
      return arrTwo.indexOf(ele) == pos;
    })

console.log('The filtered array ', filteredArray);

Production :

The filtered array  (3) ["Hello 1 ", " Hello 2 ", "Hello 1 again"]

Si nous pouvons utiliser la syntaxe JavaScript ECMAScript 6 flèche, que la suppression de l’opération en double être mis en œuvre d’une meilleure façon.

var arrTwo =
    ['Hello 1 ', ' Hello 2 ', 'Hello 1 ', ' Hello 2 ', 'Hello 1 again'];
const filteredArray = arrTwo.filter((ele, pos) => arrTwo.indexOf(ele) == pos);
console.log('The filtered array', filteredArray);

Production :

The filtered array  (3) ["Hello 1 ", " Hello 2 ", "Hello 1 again"]

Utiliser hashtable pour supprimer les doublons d’un tableau primitif en JavaScript

Si nous avons un tableau composé uniquement de types primitifs comme des nombres [ 1, 2, 3, 4, 1, 2, 3 ] et que nous voulons supprimer les doublons de ce tableau [ 1, 2, 3, 4 ], nous pouvons implémenter notre fonction filterArray() en utilisant des hashtables.

Nous allons construire un objet temporaire appelé found qui inclura toutes les valeurs non dupliquées. Dans la fonction filter, notre condition retournera false si l’élément existe déjà dans l’objet found ; sinon, nous ajouterons cet élément à l’objet found avec la valeur true ;

var arrThree =
    [
      'Hello 1 ', ' Hello 2 ', ' Hello 2 ', 'Welcome', 'Hello 1 again',
      'Welcome', 'Goodbye'
    ]

    function filterArray(inputArr) {
      var found = {};
      var out = inputArr.filter(function(element) {
        return found.hasOwnProperty(element) ? false : (found[element] = true);
      });
      return out;
    }

const outputArray = filterArray(arrThree);
console.log('Original Array', arrThree);
console.log('Filtered Array', outputArray);

Production :

Original Array ["Hello 1 ", " Hello 2 ", " Hello 2 ", "Welcome", "Hello 1 again", "Welcome", "Goodbye"]
Filtered Array ["Hello 1 ", " Hello 2 ", "Welcome", "Hello 1 again", "Goodbye"]

Utilisez la fonction _.uniq() des bibliothèques underscore et LoDash pour supprimer les doublons des tableaux en JavaScript

Si nous utilisons déjà une des méthodes de la bibliothèque underscore, nous pouvons utiliser la méthode _.uniq(), car elle ne retourne que la première occurrence de l’élément du tableau d’entrée.

var arrFive = [1, 2, 3, 1, 5, 2];

console.log('LoDash output', _.uniq(arrFive));
LoDash output [1, 2, 3, 5]

nous pouvons importer la bibliothèque à partir de ici.

Article connexe - JavaScript Array