Supprimer les doublons dans un tableau avec JavaScript

🛠️ Créer un Set

La création d'un Set est simple : il suffit d'utiliser le constructeur Set(). Voici un exemple :

// Création d'un Set
const nombres = new Set([1, 2, 3, 4, 4, 5]);

console.log(nombres); // Affiche Set(5) { 1, 2, 3, 4, 5 }

Le Set a automatiquement supprimé les doublons (le deuxième 4 ici).

🧹 Supprimer les doublons dans un tableau

Pour supprimer les doublons dans un tableau, il suffit de convertir ce tableau en un Set, puis de le reconvertir en tableau :

// Tableau avec doublons
const fruits = ['pomme', 'banane', 'pomme', 'orange', 'banane'];

// Suppression des doublons
const fruitsUniques = [...new Set(fruits)];

console.log(fruitsUniques); // Affiche ['pomme', 'banane', 'orange']

Cette méthode est concise et efficace, surtout pour des tableaux de petite ou moyenne taille.

📋 Ordonner les données après suppression des doublons

Si tu souhaites trier les données après suppression des doublons, utilise la méthode sort() :

// Tri alphabétique
const fruitsTries = [...new Set(fruits)].sort();

console.log(fruitsTries); // Affiche ['banane', 'orange', 'pomme']

Pour un tri personnalisé (par exemple, numérique), tu peux passer une fonction de comparaison à sort() :

// Tableau numérique avec doublons
const nombres = [10, 5, 3, 5, 8, 3];

// Suppression des doublons et tri décroissant
const nombresTries = [...new Set(nombres)].sort((a, b) => b - a);

console.log(nombresTries); // Affiche [3, 5, 8, 10]

⚡ Avantages et Limites du Set

Le Set est idéal pour gérer les doublons, mais il présente quelques limites à garder à l'esprit :

• Avantage : Simplicité et performances pour la gestion des doublons.
• Limite : L'ordre des éléments n'est pas garanti dans un Set.
• Astuce : Pour conserver l'ordre d'origine, combine-le avec des fonctions comme filter().

🔍 Supprimer les doublons avec reduce()

Bien que Set soit souvent la solution la plus simple, la méthode reduce() offre une alternative plus flexible pour gérer les doublons, notamment lorsque vous avez besoin de plus de contrôle.

// Supprimer les doublons avec reduce()
const fruits = ['pomme', 'banane', 'pomme', 'orange', 'banane'];

const fruitsSansDoublons = fruits.reduce((unique, fruit) => {
    return unique.includes(fruit) ? unique : [...unique, fruit];
}, []);

console.log(fruitsSansDoublons); // Affiche ['pomme', 'banane', 'orange']

Comment ça marche ? reduce() parcourt le tableau et ne conserve que les éléments qui n'ont pas déjà été rencontrés. Cette méthode maintient l'ordre original des éléments, ce qui peut être un avantage par rapport à Set.

Cette approche est particulièrement utile quand vous voulez :

• Conserver l'ordre d'origine des éléments
• Appliquer une logique personnalisée de déduplication
• Travailler dans des environnements avec une compatibilité JavaScript limitée

⚠️ À noter : Bien que puissante, cette méthode est généralement moins performante que Set pour de grands tableaux. Choisissez la technique en fonction de vos besoins spécifiques.

🔄 Gérer les doublons d'objets avec filter()

⚠️ Limitation : Un Set ne reconnaît pas deux objets ayant les mêmes propriétés comme identiques. Cela signifie que les doublons d'objets ne seront pas automatiquement supprimés.

// Tableau d'objets avec doublons
const utilisateurs = [
  { id: 1, nom: 'Alice' },
  { id: 2, nom: 'Bob' },
  { id: 1, nom: 'Alice' } // Doublon
];

const utilisateursUniques = [...new Set(utilisateurs)];
console.log(utilisateursUniques);
// Résultat : Les doublons restent car les objets ne sont pas identiques pour Set.

💡 Astuce : Combine le Set avec la méthode filter() pour gérer ce cas. Par exemple, en utilisant une propriété unique comme critère (ici id) :

// Suppression des doublons d'objets avec filter()
const utilisateursUniques = utilisateurs.filter(
  (utilisateur, index, self) =>
    index === self.findIndex(u => u.id === utilisateur.id)
);

console.log(utilisateursUniques);
// Résultat : [{ id: 1, nom: 'Alice' }, { id: 2, nom: 'Bob' }]

Explication :

• findIndex() trouve l'index du premier objet avec un id donné.
• filter() ne conserve que le premier objet trouvé pour chaque id, éliminant ainsi les doublons.