jak používat Set v JavaScriptu ES6 k nalezení jedinečných položek

Set je unikátní sbírka předmětů, a to má tu výhodu, že přes JavaScript objekty, které můžete iterovat přes položky Set při vložení objednávky.

„objekt Set umožňuje ukládat jedinečné hodnoty libovolného typu, ať už primitivní hodnoty nebo odkazy na objekt.“— MDN Docs

jinými slovy, můžete procházet Set jako pole a položky zůstat v pořadí, v jakém byly nalezeny. Vlastnosti javascriptového objektu není zachovat jejich vložení objednávky, tak, aby vlastnosti byly přidány k objektu je ztraceno v překladu použít, pokud se snaží filtrovat jedinečné položky pomocí objektu.

Set je funkce ES6 podporovaná ve všech moderních prohlížečích, včetně IE11, podle stránky pro Set() na CanIUse.com.

V tomto článku se dozvíte, jak používat Set zvládnout společný úkol najít seznam jedinečných položek v poli, ať už potřebujete najít unikátní primitivní hodnoty (jako čísla nebo řetězce), nebo objekty.

budu pokrývat jak pomocí Set s odkazy na objekty (výchozí chování), tak s obsahem těchto objektů(hledání jedinečných objektů podle hodnoty).

Jak Nastavit Kontroluje Hodnotu Rovnosti

Set používá triple operátorem rovnosti (===) také známý jako přísné rovnosti operátora za účelem ověření rovnosti primitivní hodnoty, nebo objekty.

„hodnota v Set se může objevit pouze jednou; je jedinečná v kolekci Set.— – MDN Docs

existuje však několik klíčových rozdílů s implementací srovnání rovnosti pro Set versus ===, alespoň od ECMAScript 2015 (ES6).

Set, +0 (kladná nula) a -0 (záporná nula), jsou považovány za stejnou hodnotu, i když +0 !== -0 v Javascriptu.

Podobně Set dárky NaN (not-a-number) jinak, než ===, Set NaN hodnoty rovné a bude ukládat pouze jeden v Set.

NaN je obvykle jediná hodnota, která se v JavaScriptu nerovná, což znamená, že NaN === NaN je false a NaN !== NaN je true.

Pro podrobnosti o tom, jak NaN funguje, viz můj článek o tom, Jak Kontrolovat pro NaN:

Nedefinované hodnoty (undefined) mohou být také uloženy v Set, a opět pouze jeden undefined hodnota bude držena. To je normální chování pro ===, ačkoli.

celkově je chování Set o něco blíže chování jiné funkce ES6 Object.is() ve srovnání s ===.

Pomocí Set-pro Jedinečnou Primitivní Hodnoty v Poli

Pomocí Set je jednoduché, pokud JavaScript objekty: volání Set() konstruktor s new klíčové slovo: new Set() // Set .

ekvivalent .push() metody polí (Array.prototype.push()) pro Set se nazývá .add() (Set.prototype.add()). Funguje to stejným způsobem-kromě toho, že k Setbude přidána pouze jedna z každé jedinečné hodnoty.

to znamená, že můžete procházet pole pomocí .forEach() (Array.prototype.forEach()) nebo smyčky for...of, pak .add() každou položku na novou Set. Výsledný objekt Set bude mít pouze jedinečné hodnoty.

jednodušeji můžete pole předat přímo konstruktoru Set(). To funguje, protože konstruktor Set() přijímá jako jediný parametr iterable objekt, jako pole.

“ iterable objekty postavené-v String, Array, pole-jako objekty (např. arguments nebo NodeList), TypedArray, Map, Set, a uživatelem definované iterables.“- MDN Docs

parametr konstruktoru je volitelný; new Set() je prázdný Set.

Chcete-li převést Set zpět na pole, jedna metoda je Array.from(). Budu mluvit o jiné metodě používající operátor šíření (...) později, ale metoda Array.from() funguje stejně dobře a je snadno čitelná.

zde je úryvek kódu demonstrující pomocí Set s primitivními hodnotami, jako jsou čísla a řetězce, najít jedinečné hodnoty v poli JavaScript.

jsi jako one-liner najít jedinečných položek v poli pomocí Set?

Jo, mě taky! Thanks díky ES6.

Všimněte si, že pořadí výsledného Set nebo pole je „pořadí vložení“ – pořadí, ve kterém byly hodnoty nalezeny v původním poli nebo seznamu.

Unikátní Objekt Odkazy v Poli Pomocí Nastavení

Při práci s primitivní hodnoty jako čísla nebo řetězce, Set objekt funguje stejně, jako byste očekávat, že to dělá pouze jedinečné hodnoty jsou zachovány.

Nicméně, při práci s objekty, všechny objekty, které obsahují stejné údaje jsou považovány za různé objekty Set protože mají různé odkazy na objekt — skutečný „ukazatele“ v paměti do těchto objektů.

jinak řečeno, pole s číslem 1 v nikdy to nebude stejné další pole, i když to také obsahuje pouze 1: !== // true

Nicméně, stále ještě můžeme použít Set najít unikátní objekt odkazy v poli nebo jiných objektů iterable. To je velmi užitečné, pokud stejný objekt může být přidán vícekrát do pole, a chceme pouze jedinečné objekty.

pokud například přiřadíte objekt proměnné a pak ji přidáte opakovaně do pole, můžete použít Set k odstranění duplikátů:

Chápání pojmu objekt odkazy v Javascriptu je něco, co jsem řešit před, v mém článku na hluboké kopírování objektů v Javascriptu:

Později v tomto článku, Budu mluvit o použití Set porovnávat objekty podle hodnoty obsahují místo objekt odkazy směřujícími k nim.

Jak Vytvořit Pole Ze Sady

Můj oblíbený způsob, jak proměnit Set do pole je pomocí (...) šíření operátora s párem hranatých závorkách : .

můžete dokonce napsat jako one-liner:

Wow! Použití (...) operátoru šíření je samozřejmě přesně ekvivalentní metodě Array.from(), kterou jsem používal dříve. Neváhejte použít jeden z nich.

jakmile máte pole, můžete jej iterovat pomocí obvyklých metod pole, jako je smyčka for...of, .forEach(), .map() a .reduce().

můžete také iterovat Set přímo, jak jsem diskutovat v další části, protože Set je také typ iterable objekt, stejně jako pole sami.

Iterace Sadu Unikátních Hodnot

Existuje několik základních způsobů, jak pro iterace Set v Javascriptu, ale nejsou to úplně stejné metody, které se používají pro pole:

1 — Použití Nastavit.prototyp.klávesy () nebo Set.prototyp.hodnoty ()

tyto dvě metody jsou ekvivalentní; obě vrátí nový objekt Iterator včetně hodnot pro každý prvek v Set v pořadí vložení.

mít objekt Iterator nám umožňuje volat metodu .next() přímo, pokud je to něco, co byste museli udělat ve svém kódu JavaScript.

Arfat Salman má pěkný článek vysvětlující iterátory CodeBurst.io.

2-Use Set.prototyp.forEach() Funkce Zpětného volání

.forEach() metoda Set je podobná metoda se stejným názvem pro pole, takže můžete volat přímo na Set objekt.

“ callbackFn jednou pro každou hodnotu přítomnou v objektu Set, v pořadí vložení. Pokud je zadán parametr thisArg, použije se jako hodnota this pro každé vyvolání callbackFn.“- MDN Docs

samozřejmě můžete použít funkci šipky jako funkci zpětného volání, stejně jako při práci s polem.

3-Použijte pro…smyčka přímo s novou sadou

jako Set je typ iterovatelného objektu, smyčka for...of bude pracovat stejným způsobem s Set jako s polem JavaScript.