cum se utilizează Set în JavaScript ES6 pentru a găsi elemente unice

a Set este o colecție unică de articole și are avantajul față de obiectele JavaScript pe care le puteți itera prin elementele unui Set în ordinea inserției.

„obiectul Set vă permite să stocați valori unice de orice tip, indiferent dacă sunt valori primitive sau referințe de obiecte.”- MDN Docs

cu alte cuvinte, puteți bucla printr-un Set ca o matrice, iar elementele rămân în ordinea în care au fost găsite. Proprietățile unui obiect JavaScript nu își păstrează ordinea de inserare, astfel încât ordinea în care proprietățile au fost adăugate unui obiect se pierde în traducere dacă utilizați încercați să filtrați elemente unice folosind un obiect.

Set este o caracteristică ES6 acceptată în toate browserele moderne, inclusiv IE11, conform paginii pentru Set() pe CanIUse.com.

în acest articol, veți învăța cum să utilizați Set pentru a gestiona sarcina comună de a găsi o listă de elemente unice într-o matrice, indiferent dacă trebuie să găsiți valori primitive unice (cum ar fi numere sau șiruri) sau obiecte.

voi acoperi atât folosind Set cu referințe de obiecte (comportamentul implicit), cât și cu conținutul acelor obiecte (găsirea obiectelor unice după valoare).

cum set verifică egalitatea valorii

Set folosește operatorul de egalitate triplă (===) cunoscut și sub numele de operator de egalitate strictă pentru a verifica egalitatea valorilor sau obiectelor primitive.

„o valoare în Setpoate apărea o singură dată; este unică în colecția Set.”- MDN Docs

cu toate acestea, există câteva diferențe cheie cu punerea în aplicare a comparației egalității pentru Set față de ===, cel puțin de la ECMAScript 2015 (ES6).

pentru Set, +0 (zero pozitiv) și -0 (zero negativ) sunt considerate a fi aceeași valoare, chiar dacă +0 !== -0 în JavaScript.

în mod similar, Set tratează NaN (nu-a-număr) diferit de ===, prin faptul că Set face ca toate valorile NaNsă fie egale și va stoca doar una în Set.

NaN este de obicei singura valoare care nu se egalează în JavaScript, ceea ce înseamnă că NaN === NaN este fals și NaN !== NaN este adevărat.

pentru detalii despre cum funcționează NaN, consultați articolul meu despre cum să verificați NaN:

valorile nedefinite (undefined) pot fi, de asemenea, stocate într-un Set și din nou va fi păstrată doar o valoare undefined. Acesta este un comportament normal pentru ===, totuși.

luate împreună, comportamentul Set este un pic mai aproape de cel al unei alte caracteristici ES6 Object.is() comparativ cu ===.

folosind Set pentru valori Primitive unice într-o matrice

folosind Set este simplă, în ceea ce privește JavaScript obiecte merge: te sun Set() constructor cu newcuvânt cheie: new Set() // Set .

echivalentul metodei .push() a matricelor (Array.prototype.push()) pentru un Set se numește .add() (Set.prototype.add()). Funcționează în același mod — cu excepția faptului că numai una din fiecare valoare unică va fi adăugată la Set.

asta înseamnă că ai putea bucla printr-o matrice folosind.forEach() (Array.prototype.forEach()) sau o buclă for...of, apoi .add()fiecare element la un nou Set. Obiectul rezultat Set va avea doar valorile unice.

mai simplu, puteți trece doar matrice la Set() constructor direct. Acest lucru funcționează deoarece constructorul Set() acceptă un obiect iterabil, ca o matrice, ca parametru unic.

” obiecte iterabile încorporate String, Array, obiecte asemănătoare matricei (de exemplu, arguments sau NodeList), TypedArray, Map, Set, și iterabile definite de utilizator.”- MDN Docs

parametrul constructorului este opțional; new Set()face un Set gol.

pentru a converti un Setînapoi la o matrice, o metodă de a face acest lucru este Array.from(). Voi vorbi despre o altă metodă folosind operatorul de răspândire (...) mai târziu, dar metoda Array.from() funcționează la fel de bine și este ușor de citit.

aici este un fragment de cod care demonstrează folosind Set cu valori primitive, cum ar fi numere și șiruri, pentru a găsi valorile unice într-o matrice JavaScript.

ți-a plăcut One-liner pentru a găsi elementele unice într-o matrice folosind Set?

Da, și eu! Mulțumiri ES6.

rețineți că ordinea Set sau a matricei rezultate este „ordinea de inserare” — ordinea în care valorile au fost găsite în matricea sau lista originală.

referințe obiect unic într — o matrice folosind Set

atunci când se lucrează cu valori primitive, cum ar fi numere sau siruri de caractere, un obiect Set funcționează la fel cum v-ați aștepta-numai valori unice sunt păstrate.

cu toate acestea, atunci când se lucrează cu obiecte, orice obiecte care conțin aceleași date sunt considerate a fi obiecte diferite de Set deoarece au referințe de obiecte diferite — „indicii” reali în memorie pentru acele obiecte.

ca să spunem altfel, o matrice cu doar numărul 1 în ea nu va egala niciodată o altă matrice, chiar dacă conține doar 1: !== // true

cu toate acestea, putem folosi în continuare Set pentru a găsi referințe de obiecte unice într-o matrice sau alt obiect iterabil. Acest lucru este foarte util dacă același obiect ar fi putut fi adăugat de mai multe ori într-o matrice și dorim doar obiectele unice.

de exemplu, dacă atribuiți un obiect unei variabile și apoi adăugați acea variabilă la o matrice în mod repetat, puteți utiliza Set pentru a elimina duplicatele:

înțelegerea conceptului de referințe de obiecte în JavaScript este ceva ce am abordat înainte, în articolul meu despre obiecte de copiere profundă în JavaScript:

mai târziu în acest articol, voi vorbi despre utilizarea Set pentru a compara obiectele după valorile pe care le conțin în loc de referințele obiectului care le indică.

cum se face o matrice dintr-un Set

metoda mea preferată de a transforma un Set într-o matrice este utilizarea operatorului de răspândire (...) cu o pereche de paranteze pătrate : .

puteți chiar să-l scrie ca un one-liner:

Wow! Desigur, utilizarea operatorului de răspândire (...) este exact echivalentă cu metoda Array.from() pe care o foloseam înainte. Simțiți-vă liber să utilizați oricare dintre ele.

odată ce aveți o matrice, puteți itera prin ea cu metodele obișnuite de matrice, cum ar fi o buclă for...of, .forEach(), .map() și .reduce().

de asemenea, puteți itera direct prin Set, așa cum discut în secțiunea următoare, deoarece un Set este, de asemenea, un tip de obiect iterabil, la fel ca matricele în sine.

iterarea printr — un Set de valori unice

există câteva modalități de bază pentru iterarea printr-un Set în JavaScript, dar nu sunt aceleași metode pe care le-ați folosi pentru matrice:

1-set de Utilizare.prototip.chei () sau Set.prototip.valori ()

aceste două metode sunt echivalente; ambele returnează un nou obiect Iterator inclusiv valorile pentru fiecare element din Set în ordinea de inserare.

având un obiect Iterator ne permite să apelăm direct metoda .next(), dacă este ceva ce ar trebui să faceți în codul JavaScript.

Arfat Salman are un articol frumos explicând iteratori peste pe CodeBurst.io.

2 — Utilizați setul.prototip.forEach () cu o funcție de apel invers

metoda .forEach() pentru un Set este similară cu metoda cu același nume pentru matrice, astfel încât să o puteți apela direct pe un obiect Set.

” callbackFn o dată pentru fiecare valoare prezentă în obiectul Set, în ordinea de inserare. Dacă este furnizat un parametru thisArg, acesta va fi utilizat ca valoare thispentru fiecare invocare a callbackFn.”- MDN Docs

desigur, puteți utiliza o funcție săgeată ca funcție de apel invers, la fel cum ați face atunci când lucrați cu o matrice.

3 — Utilizați A pentru…de buclă direct cu noul Set

ca Set este un tip de obiect iterabil, o buclă for...of va funcționa la fel cu un Set ca și cu o matrice JavaScript.