Comment utiliser Set en JavaScript ES6 pour trouver des éléments uniques

A Set est une collection unique d’éléments, et il a l’avantage sur les objets JavaScript que vous pouvez parcourir les éléments de a Set dans l’ordre d’insertion.

 » L’objet Set vous permet de stocker des valeurs uniques de tout type, qu’il s’agisse de valeurs primitives ou de références d’objets. »- MDN Docs

En d’autres termes, vous pouvez parcourir un Set comme un tableau, et les éléments restent dans l’ordre dans lequel ils ont été trouvés. Les propriétés d’un objet JavaScript ne conservent pas leur ordre d’insertion, de sorte que l’ordre dans lequel les propriétés ont été ajoutées à un objet est perdu dans la traduction si use try filtre des éléments uniques à l’aide d’un objet.

Set est une fonctionnalité ES6 prise en charge dans tous les navigateurs modernes, y compris IE11, selon la page Set() sur CanIUse.com .

Dans cet article, vous apprendrez à utiliser Set pour gérer la tâche courante consistant à trouver une liste d’éléments uniques dans un tableau, que vous ayez besoin de trouver des valeurs primitives uniques (comme des nombres ou des chaînes) ou des objets.

Je couvrirai à la fois en utilisant Set avec des références d’objets (le comportement par défaut) ainsi qu’avec le contenu de ces objets (recherche d’objets uniques par valeur).

Comment Set Vérifie l’égalité des valeurs

Set utilise l’opérateur triple égalité (===) également connu sous le nom d’opérateur d’égalité stricte afin de vérifier l’égalité des valeurs ou des objets primitifs.

 » Une valeur dans Set ne peut se produire qu’une seule fois ; elle est unique dans la collection Set. »- MDN Docs

Cependant, il existe quelques différences clés avec l’implémentation de la comparaison d’égalité pour Set par rapport à ===, au moins depuis ECMAScript 2015 (ES6).

Pour Set, +0 (zéro positif) et -0 (zéro négatif) sont considérés comme la même valeur, même si +0 !== -0 en JavaScript.

De même, Set traite NaN (not-a-number) différemment de ===, en ce sens que Set rend toutes les valeurs NaN égales et n’en stockera qu’une dans Set.

NaN est généralement la seule valeur qui ne s’égalise pas en JavaScript, ce qui signifie que NaN === NaN est faux et NaN !== NaN est vrai.

Pour plus de détails sur le fonctionnement de NaN, consultez mon article sur la façon de vérifier NaN:

Les valeurs non définies (undefined) peuvent également être stockées dans un Set, et encore une seule valeur undefined sera conservée. C’est un comportement normal pour ===, cependant.

Pris ensemble, le comportement de Set est un peu plus proche de celui d’une autre fonctionnalité ES6 Object.is() par rapport à ===.

Utiliser Set pour des valeurs Primitives Uniques dans un tableau

Utiliser Set est simple, en ce qui concerne les objets JavaScript: vous appelez le constructeur Set() avec le mot-clé new: new Set() // Set .

L’équivalent de la méthode de tableaux .push() (Array.prototype.push()) pour un Set est appelé .add() (Set.prototype.add()). Cela fonctionne de la même manière — sauf qu’une seule de chaque valeur unique sera ajoutée au Set.

Cela signifie que vous pouvez parcourir un tableau en utilisant .forEach() (Array.prototype.forEach()) ou une boucle for...of, puis .add() chaque élément vers un nouveau Set. L’objet Set résultant n’aura que les valeurs uniques.

Plus simplement, vous pouvez simplement passer le tableau directement au constructeur Set(). Cela fonctionne car le constructeur Set() accepte un objet itérable, comme un tableau, comme son seul paramètre.

 » objets itérables intégrés String, Array, objets de type tableau (par exemple, arguments ou NodeList), TypedArray, Map, Set, et itérables définis par l’utilisateur. » – MDN Docs

Le paramètre du constructeur est facultatif ; new Set() fait un Set vide.

Pour convertir un Set en tableau, une méthode pour le faire est Array.from(). Je parlerai d’une autre méthode utilisant l’opérateur de propagation (...) plus tard, mais la méthode Array.from() fonctionne tout aussi bien et est facile à lire.

Voici un extrait de code démontrant l’utilisation de Set avec des valeurs primitives, comme des nombres et des chaînes, pour trouver les valeurs uniques dans un tableau JavaScript.

Avez-vous aimé le one-liner pour trouver les éléments uniques dans un tableau en utilisant Set?

Ouais, moi aussi! Thanks Merci ES6.

Notez que l’ordre du tableau ou Set résultant est « l’ordre d’insertion » — l’ordre dans lequel les valeurs ont été trouvées dans le tableau ou la liste d’origine.

Références d’objets uniques dans un tableau À l’aide de Set

Lorsque vous travaillez avec des valeurs primitives telles que des nombres ou des chaînes, un objet Set fonctionne exactement comme vous vous y attendez — seules les valeurs uniques sont conservées.

Cependant, lorsque vous travaillez avec des objets, tous les objets contenant les mêmes données sont considérés comme des objets différents par Set car ils ont des références d’objets différentes — les « pointeurs » réels en mémoire vers ces objets.

Pour le dire autrement, un tableau contenant uniquement le nombre 1 ne sera jamais égal à un autre tableau, même s’il ne contient également que 1: !== // true

Cependant, nous pouvons toujours utiliser Set pour trouver des références d’objets uniques dans un tableau ou un autre objet itérable. C’est super utile si le même objet peut avoir été ajouté plusieurs fois à un tableau et que nous ne voulons que les objets uniques.

Par exemple, si vous affectez un objet à une variable, puis ajoutez cette variable à un tableau à plusieurs reprises, vous pouvez utiliser Set pour supprimer les doublons:

Comprendre le concept de références d’objets en JavaScript est quelque chose que j’ai déjà abordé, dans mon article sur la copie profonde d’objets en JavaScript:

Plus tard dans cet article, je parlerai de l’utilisation de Set pour comparer les objets par les valeurs qu’ils contiennent au lieu des références d’objets qui les pointent.

Comment créer un tableau à partir d’un ensemble

Ma méthode préférée pour transformer un Set en tableau utilise l’opérateur de propagation (...) avec une paire de crochets : .

Vous pouvez même l’écrire en une seule ligne:

Wow! Bien sûr, l’utilisation de l’opérateur de propagation (...) est exactement équivalente à la méthode Array.from() que j’utilisais auparavant. N’hésitez pas à utiliser l’un ou l’autre.

Une fois que vous avez un tableau, vous pouvez le parcourir avec vos méthodes de tableau habituelles, comme une boucle for...of, .forEach(), .map() et .reduce().

Vous pouvez également parcourir directement le Set, comme je le discute dans la section suivante, car un Set est également un type d’objet itérable, tout comme les tableaux eux-mêmes.

Itérer à travers un Ensemble de valeurs uniques

Il existe quelques méthodes de base pour itérer à travers un Set en JavaScript, mais ce ne sont pas tout à fait les mêmes méthodes que vous utiliseriez pour les tableaux:

1—Use Set.prototype.touches () ou Set.prototype.values()

Ces deux méthodes sont équivalentes ; les deux renvoient un nouvel objet Iterator incluant les valeurs de chaque élément du Set dans l’ordre d’insertion.

Avoir un objet Iterator nous permet d’appeler directement la méthode .next(), si c’est quelque chose que vous devez faire dans votre code JavaScript.

Arfat Salman a un bel article expliquant les itérateurs sur CodeBurst.io .

2 — Utiliser l’ensemble.prototype.forEach() avec une fonction de rappel

La méthode .forEach() pour un Set est similaire à la méthode du même nom pour les tableaux, vous pouvez donc l’appeler directement sur un objet Set.

 » callbackFn une fois pour chaque valeur présente dans l’objet Set, dans l’ordre d’insertion. Si un paramètre thisArg est fourni, il sera utilisé comme valeur this pour chaque invocation de callbackFn. »- MDN Docs

Bien sûr, vous pouvez utiliser une fonction de flèche comme fonction de rappel, comme vous le feriez lorsque vous travaillez avec un tableau.

3 – Utilisez un pour…de boucle Directement Avec le Nouvel ensemble

Comme Set est un type d’objet itérable, une boucle for...of fonctionnera de la même manière avec un Set qu’avec un tableau JavaScript.