Set (add, has, delete) în JavaScript

Map și Set ES2015 (ES6)

O colecție de valori unice: fiecare valoare apare o singură dată, în ordinea adăugării.

Sintaxă
const set = new Set(valori);
set.add(valoare)
set.has(valoare)
set.delete(valoare)
set.clear()

Ce face Set (add, has, delete)

Un Set păstrează fiecare valoare o singură dată. Cel mai cunoscut truc este eliminarea duplicatelor dintr-un tablou: [...new Set(tablou)]. Verificarea cu has este foarte rapidă, chiar și pentru mii de valori.

add adaugă o valoare și returnează Set-ul, has verifică existența, delete șterge și returnează true dacă valoarea exista, clear golește tot, iar size dă numărul de valori.

Parcurgerea se face cu for...of sau forEach. values() și keys() sunt același iterator (un Set nu are chei separate), iar entries() dă perechi [valoare, valoare], pentru compatibilitate cu Map.

Parametri

Parametru Descriere
valori Opțional, la creare: un iterabil (tablou, text etc.).

Ce returnează

Un obiect Set.

Exemple

Exemplul 1: Valori unice

const vizitatori = new Set(["ana", "dan", "ana", "ioana", "dan"]);

console.log(vizitatori.size);
vizitatori.add("mihai").add("ana");
console.log(vizitatori);
console.log(vizitatori.has("dan"), vizitatori.delete("dan"), vizitatori.has("dan"));

Rezultat

3
Set(4) { 'ana', 'dan', 'ioana', 'mihai' }
true true false

Exemplul 2: Eliminarea duplicatelor și parcurgerea

const etichete = ["js", "css", "js", "html", "css"];
const unice = new Set(etichete);

console.log([...unice]);
unice.forEach((e) => console.log("#" + e));
console.log([...unice.entries()][0]);

Rezultat

[ 'js', 'css', 'html' ]
#js
#css
#html
[ 'js', 'js' ]

Exemplul 3: Obiectele sunt comparate după identitate

const set = new Set([{ id: 1 }, { id: 1 }]);
console.log(set.size);

const oameni = [{ id: 1 }, { id: 2 }, { id: 1 }];
const vazute = new Set();
console.log(oameni.filter((o) => !vazute.has(o.id) && vazute.add(o.id)));

Rezultat

2
[ { id: 1 }, { id: 2 } ]

Greșeli frecvente

  • Te aștepți ca un Set să elimine obiectele cu același conținut. Compară referințe; pentru obiecte, folosește un Set de id-uri, ca în ultimul exemplu.
  • Cauți un element după poziție: set[0] dă undefined. Transformă în tablou dacă ai nevoie de poziții.

Comenzi înrudite

  • Set: union / intersection / difference: Operații cu mulțimi: reuniune, intersecție, diferență și diferență simetrică între două Set-uri.
  • Map (get, set, has, delete): O colecție de perechi cheie–valoare în care cheile pot fi de orice tip și ordinea este păstrată.
  • Array.from: Creează un tablou nou din orice listă: text, Set, Map, NodeList sau un obiect cu length.