hogyan kell használni a set in JavaScript ES6-ot egyedi elemek megtalálásához

a Set az elemek egyedülálló gyűjteménye, és előnye a JavaScript objektumokkal szemben, hogy a Set elemein keresztül beillesztési sorrendben iterálhat.

“a Set objektum lehetővé teszi bármilyen típusú egyedi értékek tárolását, legyen szó primitív értékekről vagy objektumhivatkozásokról.”- MDN Docs

más szóval, egy Set mint egy tömb, és az elemek abban a sorrendben maradnak, amelyben találhatók. A JavaScript-objektum tulajdonságai nem őrzik meg beillesztési sorrendjüket, így a tulajdonságok objektumhoz való hozzáadásának sorrendje elveszik a fordításban, ha a használat megpróbálja kiszűrni az egyedi elemeket egy objektum segítségével.

Set egy ES6 funkció, amelyet minden modern böngésző támogat, beleértve az IE11-et is, a Set() on CanIUse.com.

ebben a cikkben megtudhatja, hogyan kell a Set használatával kezelni a tömb egyedi elemeinek listájának megkeresését, függetlenül attól, hogy egyedi primitív értékeket (például számokat vagy karakterláncokat) vagy objektumokat kell találnia.

mind a Set használatával foglalkozom objektumhivatkozásokkal (az alapértelmezett viselkedés), mind az objektumok tartalmával (egyedi objektumok keresése érték szerint).

hogyan Set ellenőrzések érték egyenlőség

Set használja a hármas egyenlőség operátor (===) is ismert, mint a szigorú egyenlőség operátor annak érdekében, hogy ellenőrizze az egyenlőség primitív értékek vagy tárgyak.

“A Set érték csak egyszer fordulhat elő; egyedülálló a Setgyűjteményében.”- MDN Docs

van azonban néhány kulcsfontosságú különbség az egyenlőség összehasonlításának megvalósításában Set versus ===, legalábbis az ECMAScript 2015 (ES6) óta.

Set esetén a +0 (pozitív nulla) és -0 (negatív nulla) ugyanannak az értéknek tekintendők, annak ellenére, hogy +0 !== -0 a JavaScript-ben.

hasonlóképpen, Set kezeli NaN (nem-a-szám) másképp, mint ===, hogy Set teszi az összes NaNértékek egyenlő, és csak tárolja az egyik a Set.A

NaN jellemzően az egyetlen érték, amely nem egyenlő önmagával a JavaScript-ben, ami azt jelenti, hogy a NaN === NaN hamis, a NaN !== NaN pedig igaz.

A NaN működésével kapcsolatos részletekért lásd a cikkemet NaN:

A nem definiált értékek (undefined) Set – ben is tárolhatók, és ismét csak egy undefined érték marad meg. Ez normális viselkedés === esetén.

összességében a Set viselkedése egy kicsit közelebb áll egy másik ES6 funkció Object.is()viselkedéséhez a === – hez képest.

a Set használata egyedi primitív értékekhez egy tömbben

A Set használata egyszerű, ami a JavaScript objektumokat illeti: a Set() konstruktort hívja a newkulcsszóval: new Set() // Set .

A .push() tömbök módszerével (Array.prototype.push()) egyenértékű a Set .add()(Set.prototype.add()). Ugyanúgy működik-kivéve, hogy minden egyedi értékből csak egy kerül hozzáadásra a Setértékhez.

ez azt jelenti, hogy a .forEach() (Array.prototype.forEach()) vagy a for...of hurok használatával hurkolhat egy tömböt, majd .add() minden elemet egy új Set – re. A kapott Set objektumnak csak az egyedi értékei lesznek.

egyszerűbben, akkor csak át a tömb a Set() Kivitelező közvetlenül. Ez azért működik, mert a Set() konstruktor egyetlen paraméterként Elfogad egy iterálható objektumot, például egy tömböt.

” beépített iterálható objektumok String, Array, tömbszerű objektumok (pl. arguments vagy NodeList), TypedArray, Map, Set, felhasználó által definiált iterables.”- MDN Docs

a konstruktor paramétere opcionális; new Set()üres Set.

A Setvisszaalakításához egy tömbbé, erre az egyik módszer a Array.from(). Később beszélek egy másik módszerről, amely a spread operátort használja (...), de a Array.from() módszer ugyanolyan jól működik, és könnyen olvasható.

itt van egy kódrészlet, amely bemutatja a Set használatát primitív értékekkel, például számokkal és karakterláncokkal, hogy megtalálja az egyedi értékeket egy JavaScript tömbben.

tetszett az egysoros, hogy megtalálja az egyedi elemeket egy tömbben a Sethasználatával?

igen, én is! Köszönjük ES6.

vegye figyelembe, hogy a kapott Set vagy tömb sorrendje a “beillesztési sorrend” — az értékek sorrendje az eredeti tömbben vagy listában.

egyedi Objektumhivatkozások egy tömbben a Set használatával

amikor primitív értékekkel, például számokkal vagy karakterláncokkal dolgozik, a Set objektum ugyanúgy működik, mint amire számíthat — csak az egyedi értékek maradnak meg.

azonban, amikor objektumokkal dolgozik, az azonos adatokat tartalmazó objektumokat a Set különböző objektumoknak tekinti, mert különböző objektumhivatkozásokkal rendelkeznek — a tényleges “mutatók” a memóriában ezekre az objektumokra.

másképp fogalmazva: egy tömb, amelyben csak az 1-es szám van, soha nem lesz egyenlő egy másik tömbbel, még akkor sem, ha csak tartalmazza 1: !== // true

azonban továbbra is használhatjuk a Set – et, hogy egyedi objektumhivatkozásokat találjunk egy tömbben vagy más iterálható objektumban. Ez rendkívül hasznos, ha ugyanazt az objektumot többször is hozzáadták egy tömbhöz,és csak az egyedi objektumokat akarjuk.

ha például hozzárendel egy objektumot egy változóhoz, majd ismételten hozzáadja azt egy tömbhöz, akkor a Set használatával eltávolíthatja a másolatokat:

az objektumhivatkozások fogalmának megértése a JavaScript-ben már korábban foglalkoztam, az objektumok mély másolása a JavaScript-ben:

A cikk későbbi részében a Set használatáról fogok beszélni, hogy összehasonlítsuk az objektumokat az általuk tartalmazott értékekkel, a rájuk mutató objektumhivatkozások helyett.

Hogyan készítsünk tömböt egy készletből

kedvenc módszerem a Set tömbbé alakításához a (...) spread operátort használja szögletes zárójelekkel : .

akkor is írni, mint egy liner:

Wow! Természetesen a (...) spread operátor használata pontosan megegyezik a korábban használt Array.from() módszerrel. Nyugodtan használja bármelyik.

ha van egy tömb, akkor a szokásos tömbmódszerekkel, például for...of hurokkal, .forEach(), .map()és .reduce() ismételheti meg.

A Set – en keresztül közvetlenül is iterálhat, amint azt a következő részben tárgyalom, mert a Set is egyfajta iterálható objektum, akárcsak maguk a tömbök.

egyedi értékek halmazán keresztül történő iterálás

van néhány alapvető módszer a Set JavaScript — ben történő iterálására, de ezek nem teljesen ugyanazok a módszerek, amelyeket tömbökhöz használna:

1-Use Set.prototípus.keys () vagy Set.prototípus.értékek()

ez a két módszer egyenértékű; mindkettő új Iterator objektumot ad vissza, beleértve az egyes elemek értékeit a Set beillesztési sorrendben.

miután egy Iterator objektum lehetővé teszi számunkra, hogy hívja a .next() módszer közvetlenül, ha ez az, amit meg kell tennie a JavaScript kódot.

Arfat Salman egy szép cikket elmagyarázza iterátorok felett a CodeBurst.io.

2 — Használja a készletet.prototípus.a

visszahívási funkcióval rendelkező forEach() a .forEach() metódus egy Set esetében hasonló a tömbök azonos nevű metódusához, így közvetlenül egy Set objektumon hívhatja meg.

” callbackFn a Set objektum minden egyes értékéhez egyszer, beszúrási sorrendben. Ha egy thisArg paraméter van megadva, akkor a this értékként fogja használni a callbackFnminden meghívásához.”- MDN Docs

természetesen használhat egy nyíl funkciót visszahívási funkcióként, ugyanúgy, mint egy tömb használatakor.

3-Használja az a-T…a hurok közvetlenül az új halmazzal

mivel a Set egy iterálható objektum típusa, a for...of hurok ugyanúgy fog működni a Set mint egy JavaScript tömb.