hur man använder Set i JavaScript ES6 för att hitta unika objekt

a Set är en unik samling objekt, och det har fördelen över JavaScript-objekt som du kan iterera genom objekten i en Set i insättningsordning.

”objektet Set låter dig lagra unika värden av vilken typ som helst, oavsett om det är primitiva värden eller objektreferenser.”- MDN Docs

med andra ord kan du slinga genom en Set som en array, och objekten stannar i den ordning de hittades i. Egenskaperna för ett JavaScript-objekt behåller inte sin insättningsordning, så den ordning egenskaperna lades till i ett objekt går förlorad i översättning om användning försök att filtrera unika objekt med ett objekt.

Set är en ES6-funktion som stöds i alla moderna webbläsare, inklusive IE11, enligt sidan för Set() på CanIUse.com.

i den här artikeln lär du dig att använda Set för att hantera den vanliga uppgiften att hitta en lista med unika objekt i en array, oavsett om du behöver hitta unika primitiva värden (som siffror eller strängar) eller objekt.

jag täcker både med Set med objektreferenser (standardbeteendet) samt med innehållet i dessa objekt (hitta unika objekt efter värde).

hur Set kontrollerar värde jämlikhet

Set använder Triple equality operator (===) även känd som strict equality operator för att kontrollera jämlikhet av primitiva värden eller objekt.

”ett värde i Set kan bara förekomma en gång; det är unikt i Set’s samling.”- MDN Docs

det finns dock några viktiga skillnader med genomförandet av jämställdhetsjämförelse för Set kontra ===, åtminstone sedan ECMAScript 2015 (ES6).

för Set, +0 (positiv noll) och -0 (negativ noll) anses vara samma värde, även om +0 !== -0 i JavaScript.

på samma sätt behandlar Set NaN (not-a-number) annorlunda än ===, genom att Set gör alla NaNvärden lika och kommer bara att lagra en i Set.

NaN är vanligtvis det enda värdet som inte motsvarar sig själv i JavaScript, vilket betyder att NaN === NaN är falskt och NaN !== NaN är sant.

för detaljer om hur NaN fungerar, se min artikel om hur man kontrollerarNaN:

odefinierade värden (undefined) kan också lagras i ett Set, och återigen kommer endast ett undefined – värde att behållas. Det är normalt beteende för ===, fastän.

Sammantaget är beteendet hos Set lite närmare det för en annan ES6-funktion Object.is()jämfört med ===.

använda Set för unika primitiva värden i en Array

använda Set är enkelt, så långt som JavaScript-objekt går: du ringer Set() konstruktören med new nyckelordet: new Set() // Set .

motsvarande.push() – metoden för arrayer (Array.prototype.push()) för en Set kallas.add()(Set.prototype.add()). Det fungerar på samma sätt-förutom att endast ett av varje unikt värde kommer att läggas till Set.

det betyder att du kan slinga genom en array med .forEach() (Array.prototype.forEach()) eller en for...of slinga, sedan .add() varje objekt till en ny Set. Det resulterande Set – objektet har bara de unika värdena.

enklare kan du bara skicka matrisen till Set() konstruktören direkt. Det fungerar eftersom konstruktören Set() accepterar ett iterabelt objekt, som en array, som sin enda parameter.

” iterable objekt inbyggda String, Array, array-liknande objekt (t. ex. arguments eller NodeList), TypedArray, Map, Set, och användardefinierade iterables.”- MDN Docs

konstruktörens parameter är valfri; new Set()gör en tom Set.

för att konvertera en Set tillbaka till en array är en metod att göra det Array.from(). Jag pratar om en annan metod med spridningsoperatören (...) senare, men metoden Array.from() fungerar lika bra och är lättläst.

här är ett kodavsnitt som visar med Set med primitiva värden, som siffror och strängar, för att hitta de unika värdena i en JavaScript-array.

gillade Du one-liner för att hitta de unika objekten i en array med Set?

Ja, jag också! Brasilien tack ES6.

Observera att ordningen för den resulterande Set eller arrayen är ”insättningsordningen” — den ordning som värdena hittades i den ursprungliga arrayen eller listan.

unika objektreferenser i en Array med Set

när du arbetar med primitiva värden som siffror eller strängar fungerar ett Set — objekt precis som du förväntar dig att det gör-bara unika värden behålls.

men när du arbetar med objekt anses alla objekt som innehåller samma data vara olika objekt med Set eftersom de har olika objektreferenser — de faktiska ”pekarna” i minnet till dessa objekt.

för att uttrycka det på ett annat sätt kommer en array med bara siffran 1 i den aldrig att motsvara en annan array, även om den bara innehåller 1: !== // true

vi kan dock fortfarande använda Set för att hitta unika objektreferenser i en array eller annat iterabelt objekt. Det är super användbart om samma objekt kan ha lagts till flera gånger i en array, och vi vill bara ha de unika objekten.

om du till exempel tilldelar ett objekt till en variabel och sedan lägger till den variabeln i en array upprepade gånger kan du använda Set för att ta bort dubbletterna:

förstå begreppet objektreferenser i JavaScript är något jag har tacklat tidigare, i min artikel om djupkopiering av objekt i JavaScript:

senare i den här artikeln talar jag om att använda Set för att jämföra objekt med de värden de innehåller istället för objektreferenser som pekar på dem.

hur man gör en Array från en uppsättning

min favoritmetod för att göra en Set till en array använder (...) spridningsoperatören med ett par fyrkantiga parenteser : .

du kan även skriva det som en one-liner:

Wow! Naturligtvis är användningen av (...) spridningsoperatören exakt ekvivalent med Array.from() – metoden jag använde tidigare. Känn dig fri att använda någon.

när du har en array kan du iterera genom den med dina vanliga arraymetoder, som en for...of loop, .forEach(), .map() och .reduce().

du kan också iterera genom Set direkt, som jag diskuterar i nästa avsnitt, eftersom en Set också är en typ av iterabelt objekt, precis som arrays själva.

Iterating genom en uppsättning unika värden

det finns ett par grundläggande sätt att iterera genom en Set i JavaScript, men de är inte riktigt samma metoder som du skulle använda för arrayer:

1 — Använd Set.prototypstadiet.nycklar () eller Set.prototypstadiet.värden()

dessa två metoder är ekvivalenta; båda returnerar ett nytt Iterator – objekt inklusive värdena för varje element i Set i insättningsordning.

med ett Iterator – objekt kan vi ringa .next() – metoden direkt, om det är något du behöver göra i din JavaScript-kod.

Arfat Salman har en trevlig artikel som förklarar iteratorer över på CodeBurst.io.

2-Använd Set.prototypstadiet.forEach () med en återuppringningsfunktion

.forEach() – metoden för en Set liknar metoden med samma namn för arrayer, så du kan ringa den direkt på ett Set – objekt.

” callbackFn en gång för varje värde som finns i Set – objektet, i insättningsordning. Om en thisArg – parameter tillhandahålls kommer den att användas som this – värde för varje anrop av callbackFn.”- MDN Docs

Naturligtvis kan du använda en pilfunktion som återuppringningsfunktion, samma som du skulle göra när du arbetar med en array.

3 — använd en för…av Loop direkt med den nya uppsättningen

som Set är en typ av iterabelt objekt, kommer en for...of loop att fungera på samma sätt med en Set som med en JavaScript-array.