jak użyć Set w JavaScript ES6, aby znaleźć unikalne elementy

a Set jest unikalną kolekcją elementów i ma tę przewagę nad obiektami JavaScript, które można iterować za pomocą elementów Set w kolejności wstawiania.

„obiekt Set umożliwia przechowywanie unikalnych wartości dowolnego typu, zarówno pierwotnych, jak i odwołań do obiektów.”- MDN Docs

innymi słowy, możesz zapętlić Set jak tablicę, a elementy pozostaną w kolejności, w jakiej zostały znalezione. Właściwości obiektu JavaScript nie zachowują kolejności wstawiania, więc kolejność właściwości zostały dodane do obiektu jest tracona w tłumaczeniu, jeśli użyj próby filtrowania unikalnych elementów za pomocą obiektu.

Set to funkcja ES6 obsługiwana we wszystkich nowoczesnych przeglądarkach, w tym IE11, zgodnie ze stroną dla Set() na CanIUse.com.

w tym artykule dowiesz się, jak używać Set do obsługi wspólnego zadania wyszukiwania listy unikalnych elementów w tablicy, niezależnie od tego, czy potrzebujesz znaleźć unikalne prymitywne wartości (takie jak liczby lub ciągi znaków) czy obiekty.

omówię zarówno użycie Set odwołaniami do obiektów (zachowanie domyślne), jak i zawartością tych obiektów (wyszukiwanie unikalnych obiektów według wartości).

jak Set sprawdza równość wartości

Set używa potrójnego operatora równości (===) znanego również jako operator ścisłej równości w celu sprawdzenia równości pierwotnych wartości lub obiektów.

„wartość w Setmoże wystąpić tylko raz; jest unikalna w kolekcji Set.”- MDN Docs

jednak istnieje kilka kluczowych różnic w implementacji porównania równości dla Set vs ===, przynajmniej od ECMAScript 2015 (ES6).

Dla Set, +0 (dodatnie zero) i -0 (ujemne zero) są uważane za tę samą wartość, mimo że +0 !== -0 w JavaScript.

podobnie, Set traktuje NaN (nie-a-liczba) inaczej niż ===, ponieważ Set sprawia, że wszystkie wartości NaN są równe i przechowuje tylko jedną w Set.

NaN jest zazwyczaj jedyną wartością, która nie jest równa w JavaScript, co oznacza, że NaN === NaN jest false, a NaN !== NaN jest true.

szczegółowe informacje na temat działania NaN znajdziesz w moim artykule o tym, jak sprawdzić NaN:

nieokreślone wartości (undefined) mogą być również przechowywane w Set, i znowu tylko jedna wartość undefined zostanie zachowana. To normalne zachowanie dla ===.

biorąc pod uwagę, zachowanie Set jest nieco bliższe zachowaniu innej funkcji ES6 Object.is() w porównaniu do ===.

Używanie zestawu dla unikalnych wartości prymitywnych w tablicy

używanie Set jest proste, jeśli chodzi o obiekty JavaScript: wywołujesz konstruktor Set() za pomocą słowa kluczowego new: new Set() // Set .

odpowiednik .push() metody tablic (Array.prototype.push()) dla Set nazywa się .add() (Set.prototype.add()). Działa to w ten sam sposób — z wyjątkiem tego, że tylko jedna z każdej unikalnej wartości zostanie dodana do Set.

oznacza to, że możesz zapętlić tablicę używając .forEach() (Array.prototype.forEach()) lub for...of, a następnie .add() każdy element do nowego Set. Otrzymany obiekt Set będzie miał tylko unikalne wartości.

mówiąc prościej, możesz po prostu przekazać tablicę bezpośrednio do konstruktora Set(). Działa to, ponieważ konstruktor Set() akceptuje obiekt iteracyjny, taki jak tablica, jako swój jedyny parametr.

” iterowalne obiekty wbudowane String, Array, obiekty podobne do tablicy (np. arguments lub NodeList), TypedArray, Map, Set, i iterable zdefiniowane przez użytkownika.”- MDN Docs

parametr konstruktora jest opcjonalny; new Set()tworzy pusty Set.

aby przekonwertować Set z powrotem na tablicę, jedną z metod jest Array.from(). Później opowiem o innej metodzie używającej operatora spread (...), ale metoda Array.from() działa równie dobrze i jest łatwa do odczytania.

oto fragment kodu demonstrujący użycie Set z prymitywnymi wartościami, takimi jak Liczby i ciągi znaków, aby znaleźć unikalne wartości w tablicy JavaScript.

czy podoba Ci się, że one-liner znajduje unikalne elementy w tablicy za pomocą Set?

tak, ja też! 🤩 Dzięki ES6.

zauważ, że kolejność wynikowej Set lub tablicy jest „kolejnością wstawiania” — kolejnością, w której znaleziono wartości w oryginalnej tablicy lub liście.

unikalne odwołania do obiektów w tablicy przy użyciu zestawu

podczas pracy z prymitywnymi wartościami, takimi jak liczby lub ciągi znaków, obiekt Set działa tak, jak można się tego spodziewać — zachowywane są tylko unikalne wartości.

jednak podczas pracy z obiektami, wszelkie obiekty zawierające te same dane są uważane za różne obiekty przez Set, ponieważ mają różne odniesienia do obiektów — rzeczywiste „wskaźniki” w pamięci do tych obiektów.

mówiąc inaczej, tablica z liczbą 1 nigdy nie będzie równa innej tablicy, nawet jeśli zawiera tylko 1: !== // true

jednak nadal możemy użyć Set, aby znaleźć unikalne odwołania do obiektów w tablicy lub innych obiektach iteracyjnych. Jest to bardzo przydatne, jeśli ten sam obiekt mógł zostać dodany wiele razy do tablicy i chcemy tylko unikalnych obiektów.

na przykład, jeśli przypisujesz obiekt do zmiennej, a następnie wielokrotnie dodajesz tę zmienną do tablicy, możesz użyć Set, aby usunąć duplikaty:

zrozumienie pojęcia odniesień do obiektów w JavaScript jest czymś, czym zajmowałem się już wcześniej, w moim artykule na temat głębokiego kopiowania obiektów w JavaScript:

w dalszej części tego artykułu opowiem o użyciu Set do porównywania obiektów według wartości, które zawierają, zamiast odniesień do obiektów wskazujących na nie.

jak zrobić tablicę z zestawu

moją ulubioną metodą przekształcania Set w tablicę jest użycie (...) operatora spread z parą nawiasów kwadratowych : .

możesz nawet napisać to jako jednolinijkowy:

Wow! Oczywiście użycie operatora spreadu (...) jest dokładnie równoważne metodzie Array.from(), której używałem wcześniej. Możesz użyć jednego z nich.

gdy masz tablicę, możesz ją iterować za pomocą zwykłych metod tablicy, takich jak pętla for...of, .forEach(), .map() i .reduce().

Możesz również iterować bezpośrednio przez Set, jak omówię w następnej sekcji, ponieważ Set jest również typem obiektu iterowalnego, podobnie jak same tablice.

iteracja za pomocą zestawu unikalnych wartości

istnieje kilka podstawowych sposobów iteracji za pomocą Set w JavaScript, ale nie są to całkiem te same metody, których używałbyś dla tablic:

1 — użyj zestawu.prototyp.keys () lub Set.prototyp.values()

te dwie metody są równoważne; obie zwracają nowy obiekt Iterator zawierający wartości dla każdego elementu w Set w kolejności wstawiania.

posiadanie obiektu Iterator pozwala nam bezpośrednio wywołać metodę .next(), jeśli jest to coś, co musisz zrobić w swoim kodzie JavaScript.

Arfat Salman ma fajny artykuł wyjaśniający Iteratory na CodeBurst.io.

2-Użyj zestawu.prototyp.forEach () z funkcją zwrotną

metoda .forEach() dla Set jest podobna do metody o tej samej nazwie dla tablic, więc można ją wywołać bezpośrednio w obiekcie Set.

” callbackFn raz dla każdej wartości obecnej w obiekcie Set, w kolejności wstawiania. Jeśli podano parametr thisArg, zostanie on użyty jako wartość thisdla każdego wywołania callbackFn.”- MDN Docs

oczywiście możesz użyć funkcji strzałki jako funkcji zwrotnej, tak samo jak w przypadku pracy z tablicą.

3-Użyj for…pętli bezpośrednio z nowym zestawem

ponieważ Set jest typem obiektu iteracyjnego, pętla for...of będzie działać tak samo z Set, jak z tablicą JavaScript.