Pourquoi utiliser un Set ?

Un Set est une structure de données qui vous permet de stocker des valeurs uniques de tout type. Il ressemble à un tableau, mais n'autorise pas les valeurs dupliquées. C'est un excellent moyen de conserver des valeurs uniques de tout type. Parfois, vous souhaitez stocker des valeurs uniques dans un tableau, mais vous ne voulez pas parcourir le tableau pour vérifier si la valeur existe déjà. C'est là que le Set devient utile.

Dans un article précédent, nous avons discuté de Javascript Map. Le Set est similaire à Map, mais il ne stocke que les clés, pas les valeurs. C'est un excellent moyen de conserver des valeurs uniques de tout type. Il est parfois difficile d'utiliser Map dans de nombreux cas. C'est pourquoi nous allons parler de Set.

Qu'est-ce qu'un JavaScript Set ?

Les objets Set sont des collections de valeurs. Une valeur dans le Set ne peut apparaître qu'une seule fois ; elle est unique dans la collection du Set. Vous pouvez itérer sur les éléments d'un Set dans l'ordre d'insertion. L'ordre d'insertion correspond à l'ordre dans lequel chaque élément a été inséré dans le Set par la méthode add() avec succès (c'est-à-dire qu'il n'y avait pas d'élément identique déjà présent dans le Set lorsque Set a appelé add()).

La spécification exige que les sets soient implémentés de manière à « fournir, en moyenne, des temps d'accès qui sont sous-linéaires par rapport au nombre d'éléments dans la collection ». Par conséquent, il pourrait être représenté en interne comme une table de hachage (avec une recherche O(1)), un arbre de recherche (avec une recherche O(log(N))) ou toute autre structure de données, tant que la complexité est meilleure que O(N).

Comment créer un Set ?

Il existe deux façons de créer un Set. La première consiste à utiliser le constructeur Set. La deuxième consiste à utiliser la littérale d'objet Set.

Constructeur Set

Le constructeur Set crée un nouvel objet Set. Vous pouvez passer un objet itérable en argument au constructeur. Les éléments de l'objet itérable seront ajoutés au nouveau Set.

const set = new Set([1, 2, 3, 4, 5])

Littéral d'objet Set

La littérale d'objet Set crée un nouvel objet Set. Vous pouvez passer un objet itérable en argument à la littérale d'objet. Les éléments de l'objet itérable seront ajoutés au nouveau Set.

const set = {1, 2, 3, 4, 5};

Méthodes et propriété du Set

Exemples de Set

Ajouter une valeur à Set

const set = new Set([1, 2, 3, 4, 5])
set.add(6)
console.log(Set) // Set { 1, 2, 3, 4, 5, 6 }

Supprimer une valeur de Set

const set = new Set([1, 2, 3, 4, 5])
set.delete(3)
console.log(set) // Set { 1, 2, 4, 5 }

Vérifier si une valeur existe dans Set

const set = new Set([1, 2, 3, 4, 5])
console.log(set.has(3)) // true

Itérer sur Set

const set = new Set([1, 2, 3, 4, 5])
for (const item of Set) {
  console.log(item)
}
// 1
// 2
// 3
// 4
// 5

Convertir Set en tableau

const set = new Set([1, 2, 3, 4, 5])
const array = Array.from(set)
console.log(array) // [1, 2, 3, 4, 5]

Convertir un tableau en Set

const Array = [1, 2, 3, 4, 5]
const set = new Set(array)
console.log(Set) // Set { 1, 2, 3, 4, 5 }

Obtenir la taille de Set

const set = new Set([1, 2, 3, 4, 5])
console.log(set.size) // 5

Effacer Set

const set = new Set([1, 2, 3, 4, 5])
set.clear()
console.log(set) // Set {}

Fusionner Set

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([6, 7, 8, 9, 10])
const set3 = new Set([...set1, ...set2])
console.log(set3) // Set { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 }

Obtenir l'intersection de deux Sets

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([4, 5, 6, 7, 8])
const set3 = new Set([...set1].filter((x) => set2.has(x)))
console.log(set3) // Set { 4, 5 }

Obtenir la différence entre deux Sets

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([4, 5, 6, 7, 8])
const set3 = new Set([...set1].filter((x) => !set2.has(x)))
console.log(set3) // Set { 1, 2, 3 }

Vérifier si Set est un sous-ensemble d'un autre Set

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([4, 5])
console.log([...set2].every((x) => set1.has(x))) // true

Vérifier si Set est un sur-ensemble d'un autre Set

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([4, 5])
console.log([...set1].every((x) => set2.has(x))) // false

Vérifier si deux Sets sont disjoints

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([6, 7, 8, 9, 10])
console.log([...set1].every((x) => !set2.has(x))) // true

Vérifier si deux Sets sont égaux

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([1, 2, 3, 4, 5])
console.log(set1.size === set2.size && [...set1].every((x) => set2.has(x))) // true

Prise en charge par les navigateurs

Chrome	Firefox	Edge	Safari	Opera
49+	44+	12+	10.1+	36+

Set vs. Tableau

Cet article a été initialement publié sur blog.imam.dev.

Références

1. Mozilla Developer Network - Set

2. W3Schools - Set

3. ECMAScript® 2015 Language Specification - Set