Hoe gebruik je Set in JavaScript ES6 om unieke Items

Een Set is een unieke collectie van voorwerpen, en het heeft het voordeel ten opzichte van JavaScript-objecten, die u kunt doorlopen door de items van een Set inbrengen in orde.

“met het Set object kunt u unieke waarden van elk type opslaan, of het nu gaat om primitieve waarden of objectreferenties.”- MDN Docs

met andere woorden, je kunt door een Set lus als een array, en de items blijven in de volgorde waarin ze werden gevonden. De eigenschappen van een JavaScript-object behouden hun invoegvolgorde niet, dus de volgorde waarin de eigenschappen zijn toegevoegd aan een object gaat verloren in vertaling Als Gebruik probeert unieke items te filteren met behulp van een object.

Set is een ES6-functie die wordt ondersteund in alle moderne browsers, inclusief IE11, volgens de pagina voor Set() op CanIUse.com.

In dit artikel leert u hoe u Set kunt gebruiken om de algemene taak van het vinden van een lijst met unieke items in een array af te handelen, of u nu unieke primitieve waarden (zoals getallen of tekenreeksen) of objecten moet vinden.

Ik zal zowel Set gebruiken met objectverwijzingen (het standaardgedrag) als met de inhoud van die objecten (unieke objecten vinden op basis van waarde).

Hoe Set Checks waarde gelijkheid

Set gebruikt de triple equality operator (===) ook bekend als de strict equality operator om de gelijkheid van primitieve waarden of objecten te controleren.

“een waarde in de Set kan slechts één keer voorkomen; ze is uniek in de verzameling van Set.”- MDN Docs

er zijn echter enkele belangrijke verschillen met de implementatie van gelijkheidsvergelijking voor Set versus ===, tenminste sinds ECMAScript 2015 (ES6).

voor Set, +0 (positieve nul) en -0 (negatieve nul) worden beschouwd als dezelfde waarde, hoewel +0 !== -0 in JavaScript.

evenzo behandelt Set NaN (Geen-a-getal) anders dan ===, in die zin dat Set alle NaN waarden gelijk maakt en slechts één in de Setopslaat.

NaN is meestal de enige waarde die zichzelf niet gelijk in JavaScript, wat betekent dat NaN === NaN onwaar is en NaN !== NaN waar.

voor meer informatie over hoe NaN werkt, zie mijn artikel over hoe te controleren op NaN:

ongedefinieerde waarden (undefined) kunnen ook worden opgeslagen in een Set, en opnieuw wordt slechts één undefined waarde behouden. Dat is normaal gedrag voor ===.

samen is het gedrag van Set iets dichter bij dat van een andere ES6-functie Object.is() vergeleken met ===.

het gebruik van Set voor unieke primitieve waarden in een Array

het gebruik van Set is eenvoudig, voor zover JavaScript-objecten gaan: U noemt de Set() constructor met het new trefwoord: new Set() // Set .

het equivalent van de .push() methode van arrays (Array.prototype.push()) voor een Set wordt .add() (Set.prototype.add()) genoemd. Het werkt op dezelfde manier — behalve dat slechts één van elke unieke waarde zal worden toegevoegd aan de Set.

dat betekent dat u door een array kunt lusenmet .forEach() (Array.prototype.forEach()) of een for...of lus, dan .add() elk item naar een nieuwe Set. Het resulterende Set object zal alleen de unieke waarden hebben.

eenvoudiger is het om de array direct door te geven aan de Set() constructor. Dat werkt omdat de Set() constructor een iterabel object, zoals een array, als enige parameter accepteert.

” ingebouwde iterbare objecten String, Array, array-achtige objecten (bijv. arguments of NodeList), TypedArray, Map, Set, en door de gebruiker gedefinieerde iterables.”- MDN Docs

de parameter van de constructeur is optioneel; new Set() maakt een lege Set.

om een Set terug te converteren naar een array, is een methode om dit te doen Array.from(). Ik zal het later hebben over een andere methode met behulp van de spread operator (...), maar de Array.from() methode werkt net zo goed en is gemakkelijk te lezen.

hier is een codefragment dat Set demonstreert met primitieve waarden, zoals getallen en tekenreeksen, om de unieke waarden in een JavaScript-array te vinden.

vond u het leuk dat de one-liner de unieke items in een array vond met Set?

Ja, ik ook! 🤩 Bedankt ES6.

merk op dat de volgorde van de resulterende Set of array de “invoegvolgorde” is — de volgorde waarin de waarden werden gevonden in de oorspronkelijke array of lijst.

unieke objectverwijzingen in een Array met behulp van Set

bij het werken met primitieve waarden zoals getallen of tekenreeksen, werkt een Set object precies zoals u zou verwachten — alleen unieke waarden worden behouden.

wanneer echter met objecten wordt gewerkt, worden alle objecten die dezelfde gegevens bevatten door Set als verschillende objecten beschouwd omdat ze verschillende objectverwijzingen hebben – de werkelijke “pointers” in het geheugen naar die objecten.

om het anders te zeggen, een array met alleen het nummer 1 erin zal nooit gelijk zijn aan een andere array, zelfs als het ook alleen maar bevat 1: !== // true

we kunnen echter nog steeds Set gebruiken om unieke objectverwijzingen te vinden in een array of ander herhalbaar object. Dat is super handig als hetzelfde object meerdere keren is toegevoegd aan een array, en we willen alleen de unieke objecten.

bijvoorbeeld, als u een object toewijst aan een variabele en deze variabele vervolgens herhaaldelijk toevoegt aan een array, kunt u Set gebruiken om de duplicaten te verwijderen:

het begrip van objectverwijzingen in JavaScript is iets wat ik eerder heb aangepakt, in mijn artikel over deep copying objects in JavaScript:

Later in dit artikel zal ik het hebben over het gebruik van Set om objecten te vergelijken op basis van de waarden die ze bevatten in plaats van de objectverwijzingen die ernaar verwijzen.

Hoe maak ik een Array van een Set

Mijn favoriete methode om een Set om te zetten in een array is het gebruik van de (...) spread operator met een paar vierkante haakjes : .

je kunt het zelfs schrijven als een one-liner:

Wow! Natuurlijk is het gebruik van de (...) spread operator exact gelijk aan de Array.from() methode die ik eerder gebruikte. Voel je vrij om een van beide te gebruiken.

als je eenmaal een array hebt, kun je er doorheen itereren met je gebruikelijke array methoden, zoals een for...of lus, .forEach(), .map() en .reduce().

u kunt ook direct door Set itereren, zoals ik in de volgende paragraaf bespreek, omdat een Set ook een type itereerbaar object is, net als arrays zelf.

itereren door een Set unieke waarden

er zijn een paar basis manieren voor itereren door een Set in JavaScript, maar het zijn niet helemaal dezelfde methoden die je zou gebruiken voor arrays:

1 — Use Set.prototype.keys () of Set.prototype.waarden ()

deze twee methoden zijn gelijkwaardig; beide retourneren een nieuw Iterator object inclusief de waarden voor elk element in de Set in de invoegvolgorde.

het hebben van een Iterator object stelt ons in staat om de .next() methode direct aan te roepen, als dat iets is wat u in uw JavaScript code zou moeten doen.

Arfat Salman heeft een mooi artikel waarin iterators worden uitgelegd CodeBurst.io.

2 — Gebruik Set.prototype.forEach () met een Callback functie

de .forEach() methode voor een Set is vergelijkbaar met de methode met dezelfde naam voor arrays, dus je kunt het direct aanroepen op een Set object.

” callbackFn eenmaal voor elke waarde in het Set object, in invoegvolgorde. Als een parameter thisArg wordt opgegeven, wordt deze gebruikt als de waarde this voor elke aanroep van callbackFn.”- MDN Docs

natuurlijk kunt u een pijlfunctie gebruiken als de callback functie, hetzelfde als u zou doen wanneer u met een array werkt.

3-Gebruik A Voor…van Lus direct met de nieuwe Set

omdat Set een type iterbaar object is, zal een lus for...of op dezelfde manier werken met een Set als met een JavaScript-array.