Set
Une collection de valeurs uniques : chaque valeur ne peut apparaître qu’une fois dans l’ensemble.
- Renvoie
- Un nouvel objet
Set.
Exemple
#const badges = new Set()
badges.add('Première leçon').add('Série de 7 jours')
badges.add('Première leçon')
console.log(badges.size)
console.log(badges.has('Série de 7 jours'))
console.log(badges)Définition et utilisation
#Set est un ensemble qui stocke des valeurs sans répétition. Ajouter une valeur déjà présente dans l’ensemble ne change rien. Les valeurs sont comparées à peu près comme avec === (à la différence que NaN est égal à NaN), donc deux objets distincts avec le même contenu comptent comme deux valeurs différentes.
Les méthodes add(), has(), delete() et clear() permettent d’ajouter, de vérifier et de supprimer des éléments, et la propriété size renvoie leur nombre. La vérification avec has() est très rapide, même avec des milliers d’éléments, contrairement à includes() sur un grand tableau.
L’usage le plus courant est de supprimer les doublons d’un tableau : [...new Set(array)]. Un ensemble est aussi pratique pour suivre les leçons visitées, les éléments sélectionnés ou les badges obtenus.
Depuis 2024, les navigateurs disposent aussi de méthodes d’opérations sur les ensembles : union() (union), intersection() (intersection), difference() (différence) et isSubsetOf() pour vérifier l’inclusion.
Syntaxe
#new Set()
new Set(iterable)
set.add(value)
set.has(value)
set.delete(value)
set.clear()
set.sizeParamètres
#iterable
optionnel
Un tableau ou un autre objet itérable. Ses valeurs rejoignent l’ensemble, sans répétition.
Plus d’exemples
#const tags = ['html', 'css', 'html', 'js', 'css']
const unique = [...new Set(tags)]
console.log(unique)const léa = new Set(['HTML', 'CSS', 'JS'])
const lucas = new Set(['CSS', 'Python'])
console.log(léa.union(lucas))
console.log(léa.intersection(lucas))
console.log(léa.difference(lucas))Les méthodes union(), intersection() et difference() fonctionnent dans les navigateurs sortis depuis 2024. Dans les plus anciens, il faut les remplacer par un filtrage de tableaux.
const selected = new Set()
const lesson = { id: 1 }
selected.add(lesson)
selected.add(lesson)
selected.add({ id: 1 })
console.log(selected.size)Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Vous obtenez les valeurs uniques d’un tableau en une seule ligne :
[...new Set(array)]. - Quand vous vérifiez souvent si une valeur figure dans une liste, remplacez le tableau par un
Setet utilisezhas(). Avec de grandes quantités de données, c’est bien plus rapide. - Un ensemble n’a ni index ni méthodes
map()oufilter(). Pour les utiliser, convertissez-le en tableau :[...set].
Entrées associées
#- MapUne collection de paires clé-valeur dans laquelle la clé peut être n’importe quelle valeur, et où l’ordre d’ajout est conservé.
- Array.from()Crée un tableau à partir d’un objet itérable ou « semblable à un tableau ».
- Array.prototype.includes()Vérifie si un tableau contient la valeur donnée.
- Spread (...)La syntaxe spread décompose un tableau, une chaîne ou un objet en éléments individuels : pour copier, fusionner et passer des arguments.
- for...ofParcourt les valeurs successives d’un objet itérable : tableau, chaîne, Map, Set et autres.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.