Slik Bruker Du Satt I JavaScript ES6 For Å Finne Unike Elementer

a Set er en unik samling av elementer, og den har fordelen over JavaScript-objekter som du kan iterere gjennom elementene i en Set i innsettingsrekkefølge.

» Set – objektet lar deg lagre unike verdier av enhver type, enten primitive verdier eller objektreferanser.»- MDN Docs

Med andre ord kan du gå gjennom en Set som en matrise, og elementene forblir i den rekkefølgen de ble funnet i. Egenskapene Til Et JavaScript-objekt beholder ikke innsettingsrekkefølgen, så rekkefølgen egenskapene ble lagt til i et objekt går tapt i oversettelsen hvis bruk prøv å filtrere unike elementer ved hjelp av et objekt.

Set ER EN ES6-funksjon som støttes i alle moderne nettlesere, inkludert IE11, ifølge siden for Set() på CanIUse.com.

i denne artikkelen lærer du hvordan du bruker Set for å håndtere den vanlige oppgaven med å finne en liste over unike elementer i en matrise, enten du trenger å finne unike primitive verdier (som tall eller strenger) eller objekter.

jeg vil dekke både med Set med objektreferanser (standardadferd) samt med innholdet i disse objektene (finne unike objekter etter verdi).

Hvordan Sette Sjekker Verdi Likestilling

Set bruker triple equality operator (===) også kjent som strict equality operator for å sjekke likestilling av primitive verdier eller objekter.

«en verdi i Set kan bare forekomme en gang; den er unik i Set‘s samling.»- MDN Docs

det er imidlertid noen viktige forskjeller med implementeringen av likestillingssammenligning for Set versus ===, i hvert fall Siden ECMAScript 2015 (ES6).

for Set, +0 (positiv null) og -0 (negativ null) anses å være den samme verdien, selv om +0 !== -0 I JavaScript.

på Samme måte behandler Set NaN (ikke-a-tall) annerledes enn ===, ved at Set gjør alle NaNverdier like og vil bare lagre en i Set.

NaN er vanligvis den eneste verdien som ikke er lik seg Selv I JavaScript, noe som betyr at NaN === NaN er usann og NaN !== NaN er sant.

for detaljer om hvordan NaN fungerer, se min artikkel Om Hvordan NaN:

Udefinerte verdier (undefined ) kan også lagres i en Set, og igjen bare en undefined verdi vil bli holdt. Det er normal oppførsel for ===, skjønt.

til sammen er oppførselen til Set litt nærmere DEN for en ANNEN ES6-funksjon Object.is()sammenlignet med ===.

Bruk Av Sett For Unike Primitive Verdier I En Matrise

Bruk av Set er grei, så langt Som JavaScript-objekter går: du ringer Set() konstruktøren med new søkeordet: new Set() // Set .

den tilsvarende .push() – metoden for matriser (Array.prototype.push()) for en Set kalles .add() (Set.prototype.add()). Det fungerer på samme måte-bortsett fra at bare en av hver unike verdi vil bli lagt til Set.

det betyr at du kan gå gjennom en matrise ved hjelp av .forEach() (Array.prototype.forEach()) eller en for...of loop, deretter .add()hvert element til en ny Set. Det resulterende Set – objektet vil bare ha de unike verdiene.

du kan ganske enkelt sende arrayet til Set() – konstruktøren direkte. Det fungerer fordi konstruktøren Set() aksepterer et iterbart objekt, som en matrise, som sin eneste parameter.

» innebygde iterable objekter String, Array, matriselignende objekter (f. eks. arguments eller NodeList), TypedArray, Map, Set, og brukerdefinerte iterables.»- MDN Docs

konstruktørens parameter er valgfri; new Set() gjør en tom Set.

for å konvertere en Settilbake til en matrise, er en metode for å gjøre det Array.from(). Jeg snakker om en annen metode ved hjelp av spredningsoperatøren (...) senere, men Array.from() – metoden fungerer like bra og er lett å lese.

her er en kodebit som viser bruk av Set med primitive verdier, som tall og strenger, for å finne de unike verdiene i Et JavaScript-array.

likte du one-liner for å finne de unike elementene i en matrise ved hjelp av Set?

Ja, jeg også! 🤩 TAKK ES6.

merk at rekkefølgen på den resulterende Set eller matrisen er » innsettingsrekkefølgen — – rekkefølgen verdiene ble funnet i den opprinnelige matrisen eller listen.

Unike Objektreferanser I En Matrise Med Set

når du arbeider med primitive verdier som tall eller strenger, fungerer et Set objekt akkurat som du forventer det gjør — bare unike verdier beholdes.

når du arbeider Med objekter, anses imidlertid objekter som inneholder de samme dataene for å være forskjellige objekter med Set fordi de har forskjellige objektreferanser — de faktiske «pekerne» i minnet til disse objektene.

for å si det på en annen måte, vil en matrise med bare tallet 1 i det aldri være lik en annen matrise, selv om den også bare inneholder 1: !== // true

vi kan imidlertid fortsatt bruke Set for å finne unike objektreferanser i en matrise eller et annet iterbart objekt. Det er super nyttig hvis det samme objektet kan ha blitt lagt til flere ganger i en matrise, og vi vil bare ha de unike objektene.

hvis du for eksempel tilordner et objekt til en variabel og deretter legger til variabelen i en matrise gjentatte ganger, kan du bruke Set til å fjerne duplikatene:

Forstå begrepet objektreferanser i JavaScript er noe jeg har taklet før, I min artikkel om dype kopieringsobjekter I JavaScript:

Senere i denne artikkelen snakker Jeg om å bruke Set for å sammenligne objekter med verdiene de inneholder i stedet for objektreferansene som peker på dem.

Hvordan Lage En Matrise Fra Et Sett

min favoritt metode for å slå en Set inn i en matrise bruker (...) spread operator med et par firkantede parenteser : .

du kan også skrive det som en one-liner:

Wow! Selvfølgelig er bruk av (...) spredningsoperatøren nøyaktig lik Array.from() – metoden jeg brukte før. Føl deg fri til å bruke enten en.

Når du har en matrise, kan du iterere gjennom den med dine vanlige arraymetoder, som en for...of loop, .forEach(), .map() og .reduce().

du Kan også iterere gjennom Set direkte, som jeg diskuterer i neste avsnitt, fordi en Set også er en type iterable objekt, akkurat som arrays selv.

Iterating gjennom Et Sett Med Unike Verdier

Det er et par grunnleggende måter for iterating gjennom en Set I JavaScript, men de er ikke helt de samme metodene du vil bruke for arrays:

1 — Bruk Sett.prototype.taster () eller Sett.prototype.verdier()

disse to metodene er ekvivalente; begge returnerer et nytt Iterator – objekt, inkludert verdiene for hvert element i Set i innsettingsrekkefølge.

Å Ha et Iterator – objekt tillater oss å ringe .next() – metoden direkte, hvis det er noe du trenger å gjøre I JavaScript-koden din.

Arfat Salman har en fin artikkel som forklarer iteratorer over på CodeBurst.io.

2-Bruk Sett.prototype.forEach () Med Tilbakeringingsfunksjon

.forEach() – metoden for en Set ligner metoden med samme navn for arrays, slik at du kan ringe det direkte på et Set – objekt.

» callbackFn en gang for hver verdi som er tilstede i Set – objektet, i innsettingsrekkefølge. Hvis en thisArg – parameter er oppgitt, vil den bli brukt som this – verdien for hver påkalling av callbackFn.»- MDN Docs

selvfølgelig kan du bruke en pilfunksjon som tilbakeringingsfunksjon, det samme som du ville gjøre når du arbeider med en matrise.

3 — Bruk en for…Av Loop Direkte Med Det Nye Settet

Som Set er en type iterable objekt, vil en for...of loop fungere på samme måte med en Set som det ville med Et JavaScript-array.