# Comment supprimer les doublons de tableau dans ES6

Voici 3 façons de filtrer les doublons d’un tableau et de renvoyer uniquement les valeurs uniques. Mon préféré utilise Set car c’est le plus court et le plus simple 😁

const array = ;// 1: "Set";// 2: "Filter"array.filter((item, index) => array.indexOf(item) === index);// 3: "Reduce"array.reduce( (unique, item) => (unique.includes(item) ? unique : ), ,);// RESULT:// ;

# 1. En utilisant set

Permettez-moi de commencer par expliquer ce qu’est Set:

Set est un nouvel objet de données introduit dans ES6. Parce que Set ne vous permet de stocker que des valeurs uniques. Lorsque vous passez un tableau, il supprimera toutes les valeurs en double.

D’accord, revenons à notre code et décomposons ce qui se passe. Il y a 2 choses qui se passent:

1. Tout d’abord, nous créons un nouveau Set en passant un tableau. Comme Set n’autorise que des valeurs uniques, tous les doublons seront supprimés.
2. Maintenant que les doublons ont disparu, nous allons les convertir en tableau en utilisant l’opérateur spread ...

const array = ;// Step 1const uniqueSet = new Set(array);// Set { '🐑', 1, 2, 3 }// Step 2const backToArray = ;// 

# Convertir l’ensemble en un tableau à l’aide d’un tableau.à partir de

, vous pouvez également utiliser Array.from pour convertir un Set en tableau:

const array = ;Array.from(new Set(array));// 

# 2: En utilisant le filtre

Afin de comprendre cette option, passons en revue ce que font ces deux méthodes: indexOf et filter

# indexOf

La méthode indexOf renvoie le premier index qu’elle trouve de l’élément fourni de notre tableau.

const array = ;array.indexOf('🐑'); // 0array.indexOf(1); // 1array.indexOf(2); // 2array.indexOf(3); // 5

# filter

La méthode filter() crée un nouveau tableau d’éléments qui passent le conditionnel que nous fournissons. En d’autres termes, si l’élément passe et renvoie true, il sera inclus dans le tableau filtré. Et tout élément qui échoue ou retourne false, il ne sera PAS dans le tableau filtré.

Intervenons et parcourons ce qui se passe lorsque nous parcourons le tableau en boucle.

const array = ;array.filter((item, index) => { console.log( // a. Item item, // b. Index index, // c. indexOf array.indexOf(item), // d. Condition array.indexOf(item) === index, ); return array.indexOf(item) === index;});

Voici la sortie de la console.journal montré ci-dessus. Les doublons sont là où l’index ne correspond pas à l’indexOf. Donc, dans ces cas, la condition sera fausse et ne sera pas incluse dans notre tableau filtré.

# Récupérer les valeurs en double

Nous pouvons également utiliser la méthode filter pour récupérer les valeurs en double du tableau. Nous pouvons le faire en ajustant simplement notre condition comme ceci:

const array = ;array.filter((item, index) => array.indexOf(item) !== index);// 

Encore une fois, laissez passer cela et voyez la sortie:

# 3: En utilisant reduce

La méthode reduce est utilisée pour réduire les éléments du tableau et les combiner en un tableau final basé sur une fonction de réduction que vous passez.

Dans ce cas, notre fonction de réduction vérifie si notre tableau final contient l’élément. Si ce n’est pas le cas, poussez cet élément dans notre tableau final. Sinon, ignorez cet élément et renvoyez simplement notre tableau final tel quel (en sautant essentiellement cet élément).

Réduire est toujours un peu plus difficile à comprendre, alors intervenons également dans chaque cas et voyons la sortie:

const array = ;array.reduce((unique, item) => { console.log( // a. Item item, // b. Final Array (Accumulator) unique, // c. Condition (Remember it only get pushed if this returns `false`) unique.includes(item), // d. Reducer Function Result unique.includes(item) ? unique : , ); return unique.includes(item) ? unique : ;}, ); // 👈 The initial value of our Accumulator is an empty array// RESULT:// ;

Et voici la sortie de la console.log:

# Contribution de la communauté

• @ smokkku: array.includes(item) est un moyen plus idiomatique de tester si le tableau contient l’élément

• @ riquelkovsky: Juste aujourd’hui, je l’ai fait en faisant ce qui suit.Object.keys(array.reduce((map, next) => ({...map, : true}), {}))

-@ luisiacc2: Bien sûr, Set() fera l’affaire pour les valeurs de primitve, avec des objets une solution non O(n^2) effectuerait d’abord un sort() sur le tableau (qui fonctionne en O(nlogn)), puis rechercherait les éléments égaux adjacents (qui sont O(n)), donc vous avez O(n + nlogn).

• @ iamdipankarj: Aussi, Array.from(new Set()), mais cela ne fonctionne que sur les primitives. Pour filtrer les doublons dans un tableau d’objets personnalisés.filter() est la voie à suivre.

• @ benawad : filter le temps d’exécution est O(n^2)