Kuinka käyttää Setiä JavaScript ES6: ssa löytääksesi uniikkeja kohteita

a Set on ainutlaatuinen kokoelma kohteita, ja sen etuna JavaScript-objekteihin nähden on, että Set: n kohteiden läpi voi iteroida asetusjärjestyksessä.

” Set objektin avulla voit tallentaa minkä tahansa tyyppisiä ainutlaatuisia arvoja, olivatpa ne sitten alkeellisia arvoja tai objektiviittauksia.”— MDN Docs

toisin sanoen Set: n läpi voi silmukoida kuin array, ja kohteet pysyvät siinä järjestyksessä, josta ne löytyivät. JavaScript-objektin ominaisuudet eivät säilytä lisäysjärjestystään, joten järjestys, jossa ominaisuudet lisättiin objektiin, katoaa käännöksessä, jos Käytä yritä suodattaa ainutlaatuisia kohteita objektin avulla.

Set on ES6-ominaisuus, jota tuetaan kaikissa moderneissa selaimissa, mukaan lukien IE11, sivun mukaan Set() on CanIUse.com.

tässä artikkelissa opit käyttämään Set: ää hoitamaan yhteistä tehtävää eli löytämään listan ainutkertaisista kohteista jonossa, tarvitsitpa sitten löytää ainutkertaisia alkeisarvoja (kuten numeroita tai merkkijonoja) tai esineitä.

I ’ ll cover both using Set with object references (the default behavior) as well as with the content of those objects (finding unique objects by value).

How Set Checks Value Equality

Set käyttää triple equality operatoria (===), joka tunnetaan myös nimellä The strict equality operator, tarkistaakseen primitiivisten arvojen tai objektien tasa-arvon.

” Set: n arvo voi esiintyä vain kerran; Set: n kokoelmassa se on ainutkertainen.”- MDN Docs

tasa-arvovertailun toteutumisessa Set vs. === on kuitenkin muutamia keskeisiä eroja ainakin ECMAScript 2015: stä (ES6) lähtien.

Set, +0 (positiivinen nolla) ja -0 (negatiivinen nolla) pidetään samana arvona, vaikka +0 !== -0 Javascriptissä.

vastaavasti Set kohtelee NaN (Ei-a-lukua) eri tavalla kuin ===, sillä Set tekee kaikki NaN arvot samansuuruisiksi ja säilyttää vain yhden Set: ssä.

NaN on tyypillisesti ainoa arvo, joka ei vastaa Javascriptissä itseään, eli NaN === NaN on epätosi ja NaN !== NaN on tosi.

lisätietoja siitä, miten NaN toimii, on artikkelissani siitä, miten tarkistaa NaN:

määrittelemättömät arvot (undefined) voidaan myös tallentaa arvoon Set, ja jälleen säilytetään vain yksi undefined arvo. Se on kuitenkin normaalia käytöstä ===.

yhdessä tarkasteltuna Set: n käyttäytyminen on hieman lähempänä toisen ES6: n ominaisuuden Object.is() käyttäytymistä kuin ===.

käyttäen Setiä ainutlaatuisille Alkeisarvoille Array

käyttäen Set on suoraviivaista, mitä JavaScript-kohteisiin tulee: Set() konstruktoria kutsutaan new avainsanalla: new Set() // Set .

.push() matriisimenetelmää (Array.prototype.push()) Set vastaa .add() (Set.prototype.add()). Se toimii samalla tavalla-paitsi että Set: ään lisätään vain yksi kustakin ainutkertaisesta arvosta.

se tarkoittaa, että voit silmukka kautta array käyttäen .forEach() (Array.prototype.forEach()) tai for...of silmukka, sitten .add() jokaisen kohteen Uusi Set. Tuloksena olevalla Set kohteella on vain yksilölliset arvot.

yksinkertaisemmin array voidaan siirtää suoraan Set() konstruktorille. Tämä toimii, koska Set() konstruktori hyväksyy iteroituvan kohteen, kuten joukon, ainoaksi parametrikseen.

” iteroitavia kohteita sisäänrakennettu String, Array, array-like objects (esim., arguments tai NodeList), TypedArray, Map, Set, ja käyttäjän määrittämä iterable.”—MDN Docs

rakentajan parametri on valinnainen; new Set() tekee tyhjän Set.

Set: n muuttamiseksi takaisin jonoksi yksi menetelmä on Array.from(). Puhun myöhemmin toisesta menetelmästä, jossa käytetään leviämisoperaattoria (...), mutta Array.from()-menetelmä toimii yhtä hyvin ja on helppolukuinen.

tässä on koodinpätkä, joka osoittaa käyttämällä Set: ää alkeellisilla arvoilla, kuten numeroilla ja merkkijonoilla, löytääkseen ainutlaatuiset arvot JavaScript-taulukosta.

Piditkö one-linerista löytääksesi ainutlaatuiset kohteet ryhmästä käyttäen Set?

Yeah, me too! 🤩 Kiitos ES6.

huomaa, että tuloksena olevan Set tai joukon järjestys on ”insertiojärjestys” eli järjestys, jossa arvot löytyivät alkuperäisestä ryhmästä tai luettelosta.

Unique Object References in an Array Using Set

kun käytetään primitiivisiä arvoja, kuten numeroita tai merkkijonoja, Set objekti toimii aivan kuten odottaisikin — vain uniikit arvot säilyvät.

kuitenkin objektien kanssa työskenneltäessä kaikki oliot, jotka sisältävät samaa tietoa, katsotaan Set eri olioiksi, koska niillä on erilaiset objektiviittaukset — varsinaiset ”osoittimet” muistissa noihin olioihin.

toisin sanoen jono, jossa on vain numero 1, ei koskaan vastaa toista jonoa, vaikka se myös vain sisältää 1: !== // true

Set: n avulla voidaan kuitenkin edelleen löytää ainutkertaisia objektiviittauksia array-tai muusta iteroitavasta kohteesta. Se on erittäin hyödyllistä, jos sama kohde on voitu lisätä useita kertoja array, ja haluamme vain ainutlaatuisia esineitä.

esimerkiksi, jos annat objektin muuttujalle ja lisäät sen sitten toistuvasti matriisiin, voit käyttää Set: ää kaksoiskappaleiden poistamiseen:

Objektiviittausten käsitteen ymmärtäminen Javascriptissä on jotain, mitä olen käsitellyt aiemmin artikkelissani deep copying objects in JavaScript:

myöhemmin tässä artikkelissa, puhun Set: n käyttämisestä objektien vertailemiseen niiden sisältämien arvojen perusteella niihin viittaavien objektiviittausten sijaan.

Kuinka tehdä Array joukosta

suosikkimenetelmäni muuttaa Set arraksi on käyttää (...) levitysoperaattoria hakasulkeilla : .

sen voi kirjoittaa jopa One-linerinä:

Wow! Tosin (...) spreadioperaattorin käyttäminen on täsmälleen sama kuin aiemmin käyttämäni Array.from() – menetelmä. Voit käyttää kumpaa tahansa.

kun sinulla on array, voit iteroida sen läpi tavallisilla array-menetelmilläsi, kuten for...of silmukka, .forEach(), .map() ja .reduce().

voit myös iteroida Set: n kautta suoraan, kuten seuraavassa jaksossa käsittelen, koska Set on myös iteroitavan kohteen tyyppi, aivan kuten matriisit itse.

iterointi uniikkien arvojen

kautta on Javascriptissä pari perustapaa iterointiin Set: n kautta, mutta ne eivät ole aivan samoja menetelmiä kuin mitä käyttäisit taulukoille:

1 — Käyttöjoukko.prototyyppi.avaimet () tai asetettu.prototyyppi.arvot ()

nämä kaksi menetelmää ovat samanarvoisia; molemmat palauttavat uuden Iterator objektin sisältäen kunkin alkuaineen arvot Set insertiojärjestyksessä.

joilla on Iterator objekti, voimme soittaa .next() – metodiin suoraan, jos sellainen on tarpeen JavaScript-koodissa.

Arfat Salmanilla on kiva artikkeli, jossa selitetään iteraattorit yli CodeBurst.io.

2-Käyttöjoukko.prototyyppi.forEach (), jonka takaisinkutsufunktio on

.forEach() menetelmä Set: lle on samankaltainen kuin samanniminen menetelmä matriiseille, joten sitä voi kutsua suoraan Set – oliolle.

” callbackFn kerran kutakin Set objektissa olevaa arvoa kohti, lisäysjärjestyksessä. Jos ilmoitetaan parametri thisArg, sitä käytetään this arvona jokaiselle kutsulle, joka on callbackFn.”— MDN Docs

callback-funktiona voi tietysti käyttää nuolifunktiota, samaan tapaan kuin matriisin kanssa työskenneltäessä.

3-Käytä A for…silmukasta suoraan uuden joukon kanssa

koska Set on iteroitavan objektin tyyppi, for...of silmukka toimii samalla tavalla Set kanssa kuin se toimisi JavaScript-matriisin kanssa.