Suppression des doublons d'un tableau en JavaScript : analyse sous le capot

D'où viennent les doublons et pourquoi sont-ils un problème ?

Imaginez : vous collectez des données depuis une API, analysez un fichier CSV ou traitez une saisie utilisateur. Dans 90 % des cas, vous rencontrez des tableaux où le même élément apparaît plusieurs fois. Ce n'est pas seulement un problème esthétique — les doublons peuvent fausser les statistiques, casser le rendu des listes ou entraîner des boucles infinies dans les algorithmes.

La question "Remove duplicate values from a JavaScript array" sur Stack Overflow a rassemblé des milliers de vues pour une bonne raison. C'est une opération basique mais cruciale que tout développeur doit connaître. Aujourd'hui, nous allons regarder sous le capot et analyser le fonctionnement des différentes approches — des plus naïves aux plus performantes.

Méthode n°1 : Set — la plus élégante et la plus rapide

Si vous demandez à un développeur JavaScript moderne : "Comment supprimer les doublons ?", la première chose qu'il dira est Set. Et c'est correct. Mais comment cela fonctionne-t-il ?

const numbers = [1, 2, 2, 3, 4, 4, 5];\nconst uniqueNumbers = [...new Set(numbers)];\nconsole.log(uniqueNumbers); // [1, 2, 3, 4, 5]

Que se passe-t-il sous le capot de Set ?

L'objet Set stocke des valeurs uniques de tout type. Lorsque vous passez un tableau au constructeur new Set(numbers), le moteur JavaScript (V8, SpiderMonkey, etc.) exécute les étapes suivantes :

\n
• Itération sur le tableau : le moteur parcourt chaque élément du tableau source.
\n
• Vérification d'unicité : pour chaque élément, une fonction de hachage interne est appelée. Si l'élément est déjà dans le "seau" (bucket), il est ignoré. Sinon, il est ajouté.
\n
• Assemblage du résultat : l'opérateur [...set] (spread) déplie l'objet Set itérable en un tableau.
\n

Un détail important : Set utilise l'algorithme de comparaison SameValueZero. Cela signifie que NaN est considéré égal à NaN (contrairement à ===), et que +0 et -0 sont considérés comme des valeurs différentes. En pratique, cela a rarement de l'importance, mais il est bon de le savoir.

Performance de Set

La complexité de l'opération est O(n). Chaque élément est vérifié exactement une fois. C'est la meilleure performance parmi toutes les méthodes. Pour des tableaux de 10 000 éléments, la différence entre Set et d'autres méthodes peut atteindre des dizaines de millisecondes — critique pour les applications à forte charge.

Méthode n°2 : filter + indexOf — un classique du genre

Avant l'arrivée d'ES6 (2015), les développeurs utilisaient la combinaison filter et indexOf. Cette méthode se retrouve encore dans le code legacy :

const numbers = [1, 2, 2, 3, 4, 4, 5];\nconst uniqueNumbers = numbers.filter((value, index, self) => {\n    return self.indexOf(value) === index;\n});\nconsole.log(uniqueNumbers); // [1, 2, 3, 4, 5]

Comment cela fonctionne-t-il ?

\n
• filter parcourt chaque élément du tableau.
\n
• Pour chaque élément, indexOf(value) est appelé, retournant le premier index où cette valeur apparaît.
\n
• Si l'index actuel de l'élément correspond au premier trouvé — c'est la première occurrence, et l'élément est conservé. Sinon, c'est un doublon, et il est rejeté.
\n

Pièges à éviter

Le problème principal est la performance. indexOf utilise en interne une recherche linéaire (O(n) pour chaque appel). Au final, pour un tableau de N éléments, la complexité devient O(n²). Avec 1 000 éléments, c'est encore acceptable, mais avec 100 000, les ralentissements deviennent visibles.

Un autre inconvénient : indexOf ne fonctionne pas correctement avec NaN. Si le tableau contient NaN, indexOf(NaN) retournera toujours -1, et l'élément sera ajouté à nouveau. Pour vérifier la présence de NaN, il faut utiliser