Sådan bruges sæt i JavaScript ES6 til at finde unikke emner

A Set er en unik samling af genstande, og den har den fordel i forhold til JavaScript-objekter, som du kan gentage gennem elementerne i en Set i indsættelsesrækkefølge.

“objektet Set giver dig mulighed for at gemme unikke værdier af enhver type, hvad enten det er primitive værdier eller objektreferencer.”- MDN Docs

med andre ord kan du løbe gennem en Set som et array, og emnerne forbliver i den rækkefølge, de blev fundet i. Egenskaberne for et JavaScript-objekt bevarer ikke deres indsættelsesrækkefølge, så den rækkefølge, egenskaberne blev føjet til et objekt, går tabt i oversættelsen, hvis brug prøv at filtrere unikke elementer ved hjælp af et objekt.

Set er en ES6-funktion, der understøttes i alle moderne bro. sere, inklusive IE11, ifølge siden for Set() på CanIUse.com.

i denne artikel lærer du, hvordan du bruger Set til at håndtere den fælles opgave med at finde en liste over unikke elementer i et array, uanset om du har brug for at finde unikke primitive værdier (som tal eller strenge) eller objekter.

jeg dækker begge ved hjælp af Set med objektreferencer (standardadfærd) såvel som med indholdet af disse objekter (finde unikke objekter efter værdi).

hvordan Set kontrollerer værdi ligestilling

Set bruger den tredobbelte ligestillingsoperatør (===) også kendt som den strenge ligestillingsoperatør for at kontrollere lighed mellem primitive værdier eller objekter.

“en værdi i Set må kun forekomme en gang; den er unik i Set‘s samling.”- MDN Docs

der er dog et par vigtige forskelle med implementeringen af lighedssammenligning for Set versus ===, i det mindste siden ECMAScript 2015 (ES6).

for Set, +0 (positivt nul) og -0 (negativt nul) anses for at være den samme værdi, selvom +0 !== -0 i JavaScript.

tilsvarende Set behandler NaN (ikke-et-tal) anderledes end ===, idet Set gør alle NaNværdier ens og vil kun gemme en i Set.

NaN er typisk den eneste værdi, der ikke svarer til sig selv i JavaScript, hvilket betyder, at NaN === NaN er falsk og NaN !== NaN er sandt.

for detaljer om, hvordan NaN fungerer, se min artikel om, hvordan du tjekker for NaN:

udefinerede værdier (undefined) kan også gemmes i en Set, og igen gemmes kun en undefined værdi. Det er normal opførsel for ===, selvom.

samlet set er opførslen af Set lidt tættere på den for en anden ES6-funktion Object.is()sammenlignet med ===.

brug af sæt til unikke Primitive værdier i et Array

brug af Set er ligetil, så vidt JavaScript-objekter går: du kalder Set() konstruktøren med newnøgleordet: new Set() // Set .

svarende til .push() metoden for arrays (Array.prototype.push()) for en Set kaldes .add()(Set.prototype.add()). Det fungerer på samme måde-bortset fra at kun en af hver unik værdi vil blive tilføjet til Set.

det betyder, at du kan løbe gennem et array ved hjælp af .forEach() (Array.prototype.forEach()) eller en for...of loop, derefter .add()hvert element til en ny Set. Det resulterende Set objekt vil kun have de unikke værdier.

mere enkelt kan du bare sende arrayet til Set() konstruktøren direkte. Det virker, fordi Set() konstruktøren accepterer et iterabelt objekt, som et array, som sin eneste parameter.

” indbyggede iterable objekter String, Array, array-lignende objekter (f. eks. arguments eller NodeList), TypedArray, Map, Set, brugerdefinerede iterables.”- MDN Docs

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

for at konvertere en Settilbage til et array er en metode til at gøre det Array.from(). Jeg vil tale om en anden metode ved hjælp af spread operator (...) senere, men Array.from()-metoden fungerer lige så godt og er let at læse.

her er et kodestykke, der demonstrerer ved hjælp af Set med primitive værdier, som tal og strenge, for at finde de unikke værdier i et JavaScript-array.

kunne du lide, at one-liner fandt de unikke genstande i et array ved hjælp af Set?

ja, også mig! Tusind tak ES6.

Bemærk, at rækkefølgen af den resulterende Set eller array er “indsættelsesrækkefølgen” — den rækkefølge, som værdierne blev fundet i det oprindelige array eller liste.

unikke Objektreferencer i et Array ved hjælp af sæt

når du arbejder med primitive værdier som tal eller strenge, fungerer et Set objekt ligesom du ville forvente det gør — kun unikke værdier bevares.

men når man arbejder med objekter, anses objekter, der indeholder de samme data, for at være forskellige objekter af Set, fordi de har forskellige objektreferencer — de faktiske “pointers” i hukommelsen til disse objekter.

for at sige det på en anden måde vil et array med bare nummer 1 i det aldrig svare til et andet array, selvom det også kun indeholder 1: !== // true

vi kan dog stadig bruge Set til at finde unikke objektreferencer i et array eller et andet itererbart objekt. Det er super nyttigt, hvis det samme objekt måske er blevet tilføjet flere gange til et array, og vi vil kun have de unikke objekter.

hvis du f. eks. tildeler et objekt til en variabel og derefter tilføjer denne variabel til et array gentagne gange, kan du bruge Set til at fjerne dubletter:

at forstå begrebet objektreferencer i JavaScript er noget, jeg har tacklet før, i min artikel om dybe kopieringsobjekter i JavaScript:

senere i denne artikel vil jeg tale om at bruge Set til at sammenligne objekter med de værdier, de indeholder i stedet for de objektreferencer, der peger på dem.

Sådan laver du et Array fra et sæt

min foretrukne metode til at omdanne en Set til et array bruger (...) spredningsoperatøren med et par firkantede parenteser : .

du kan endda skrive det som en one-liner:

Åh! Selvfølgelig svarer brugen af (...) spredningsoperatøren nøjagtigt til den Array.from() metode, jeg brugte før. Du er velkommen til at bruge en af dem.

når du har et array, kan du gentage det med dine sædvanlige array metoder, som en for...of loop, .forEach(), .map()og .reduce().

du kan også gentage gennem Set direkte, som jeg diskuterer i næste afsnit, fordi en Set også er en type iterable objekt, ligesom arrays selv.

Iterating gennem et sæt unikke værdier

der er et par grundlæggende måder at iterere gennem enSet i JavaScript, men de er ikke helt de samme metoder, du ville bruge til arrays:

1 — Brug sæt.prototype.nøgler () eller sæt.prototype.værdier ()

disse to metoder er ækvivalente; begge returnerer et nyt Iterator objekt inklusive værdierne for hvert element i Set i indsætningsrækkefølge.

at have et Iterator objekt giver os mulighed for at ringe til .next() metoden direkte, hvis det er noget, du skal gøre i din JavaScript-kode.

Arfat Salman har en dejlig artikel, der forklarer iteratorer over på CodeBurst.io.

2 — Brug sæt.prototype.forEach () med en tilbagekaldsfunktion

.forEach() – metoden for en Set svarer til metoden med samme navn for arrays, så du kan kalde det direkte på et Set objekt.

” callbackFn en gang for hver værdi, der er til stede i Set – objektet, i indsætningsrækkefølge. Hvis en thisArg parameter er angivet, vil den blive brugt som this værdien for hver påkaldelse af callbackFn.”- MDN Docs

selvfølgelig kan du bruge en pilfunktion som tilbagekaldsfunktionen, det samme som du ville gøre, når du arbejder med et array.

3 — Brug en til…af Loop direkte med det nye sæt

som Set er en type iterabelt objekt, en for...of loop fungerer på samme måde med en Set som det ville med et JavaScript-array.