Set
Kolekcja unikalnych wartości: każda wartość może wystąpić w zbiorze tylko raz.
- Zwraca
- Nowy obiekt
Set.
Przykład
#const badges = new Set()
badges.add('Pierwsza lekcja').add('Seria 7 dni')
badges.add('Pierwsza lekcja')
console.log(badges.size)
console.log(badges.has('Seria 7 dni'))
console.log(badges)Definicja i zastosowanie
#Set to zbiór, który przechowuje wartości bez powtórzeń. Dodanie wartości, która już jest w zbiorze, niczego nie zmienia. Wartości porównywane są podobnie jak przez === (z tą różnicą, że NaN jest równe NaN), więc dwa osobne obiekty o tej samej zawartości to dwie różne wartości.
Metody add(), has(), delete() i clear() pozwalają dodawać, sprawdzać i usuwać elementy, a właściwość size zwraca ich liczbę. Sprawdzanie przez has() jest bardzo szybkie także przy tysiącach elementów, w przeciwieństwie do includes() na dużej tablicy.
Najpopularniejsze zastosowanie to usuwanie duplikatów z tablicy: [...new Set(array)]. Zbiór przyda się też do śledzenia odwiedzonych lekcji, zaznaczonych elementów czy zdobytych odznak.
Od 2024 roku przeglądarki mają także metody działań na zbiorach: union() (suma), intersection() (część wspólna), difference() (różnica) oraz isSubsetOf() do sprawdzania zawierania.
Składnia
#new Set()
new Set(iterable)
set.add(value)
set.has(value)
set.delete(value)
set.clear()
set.sizeParametry
#iterable
opcjonalny
Tablica lub inny obiekt iterowalny. Do zbioru trafią jego wartości, bez powtórzeń.
Więcej przykładów
#const tags = ['html', 'css', 'html', 'js', 'css']
const unique = [...new Set(tags)]
console.log(unique)const ania = new Set(['HTML', 'CSS', 'JS'])
const kuba = new Set(['CSS', 'Python'])
console.log(ania.union(kuba))
console.log(ania.intersection(kuba))
console.log(ania.difference(kuba))Metody union(), intersection() i difference() działają w przeglądarkach wydanych od 2024 roku. W starszych trzeba je zastąpić filtrowaniem tablic.
const selected = new Set()
const lesson = { id: 1 }
selected.add(lesson)
selected.add(lesson)
selected.add({ id: 1 })
console.log(selected.size)Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Unikalne wartości tablicy uzyskasz jedną linijką:
[...new Set(array)]. - Gdy często sprawdzasz, czy wartość jest na liście, zamień tablicę na
Seti używajhas(). Przy dużych danych to dużo szybsze. - Zbiór nie ma indeksów ani metod
map()czyfilter(). Żeby ich użyć, zamień go na tablicę:[...set].
Powiązane hasła
#- MapKolekcja par klucz i wartość, w której kluczem może być dowolna wartość, a kolejność dodawania jest zachowana.
- Array.from()Tworzy tablicę z obiektu iterowalnego lub „tablicopodobnego”.
- Array.prototype.includes()Sprawdza, czy tablica zawiera podaną wartość.
- Spread (...)Składnia spread rozkłada tablicę, napis lub obiekt na pojedyncze elementy: do kopiowania, łączenia i przekazywania argumentów.
- for...ofPrzechodzi po kolejnych wartościach obiektu iterowalnego: tablicy, napisu, Map, Set i innych.
Widzisz błąd albo brakuje przykładu? Napisz do nas.