Come usare Set in JavaScript ES6 per trovare oggetti unici

Un Set è una collezione unica di oggetti, e presenta il vantaggio, rispetto JavaScript oggetti che è possibile scorrere gli elementi di un Set in ordine di inserzione.

“L’oggetto Set consente di memorizzare valori univoci di qualsiasi tipo, siano essi valori primitivi o riferimenti a oggetti.”- MDN Docs

In altre parole, puoi scorrere un Set come un array e gli elementi rimangono nell’ordine in cui sono stati trovati. Le proprietà di un oggetto JavaScript non mantengono il loro ordine di inserimento, quindi l’ordine in cui le proprietà sono state aggiunte a un oggetto viene perso nella traduzione se si tenta di filtrare elementi univoci utilizzando un oggetto.

Set è una funzionalità ES6 supportata in tutti i browser moderni, incluso IE11, in base alla pagina per Set() su CanIUse.com.

In questo articolo, imparerai come usare Set per gestire il compito comune di trovare un elenco di elementi univoci in un array, sia che tu debba trovare valori primitivi univoci (come numeri o stringhe) o oggetti.

Coprirò sia usando Set con riferimenti agli oggetti (il comportamento predefinito) sia con il contenuto di quegli oggetti (trovando oggetti unici per valore).

Come Impostare i Controlli di Valore Uguaglianza

Set utilizza il triplo operatore di uguaglianza (===) noto anche come l’operatore di uguaglianza rigorosa al fine di verificare la parità di valori primitivi o oggetti.

“Un valore in Set può verificarsi solo una volta; è univoco nella raccolta di Set.”- MDN Docs

Tuttavia, ci sono alcune differenze chiave con l’implementazione del confronto di uguaglianza per Set rispetto a ===, almeno da ECMAScript 2015 (ES6).

Per Set, +0 (zero positivo) e -0 (zero negativo) sono considerati lo stesso valore, anche se +0 !== -0 in JavaScript.

Allo stesso modo, Set tratta NaN (non-a-number) in modo diverso da ===, in quanto Set rende tutti i valori NaN uguali e ne memorizzerà solo uno nel Set.

NaN è in genere l’unico valore che non è uguale a se stesso in JavaScript, il che significa che NaN === NaN è falso e NaN !== NaN è vero.

Per i dettagli su come funziona NaN, vedi il mio articolo su Come controllare NaN:

I valori non definiti (undefined) possono anche essere memorizzati in un Set, e di nuovo verrà mantenuto solo un valore undefined. Questo è un comportamento normale per ===, però.

Nel loro insieme, il comportamento di Set è un po ‘ più vicino a quello di un’altra funzionalità ES6 Object.is() rispetto a ===.

Utilizzo di Set per Unico Primitivi Valori in un Array

Uso Set è semplice, per quanto riguarda gli oggetti JavaScript andare: si chiama il Set() costruttore con il new parola chiave: new Set() // Set .

L’equivalente del metodo .push() degli array (Array.prototype.push()) per un Set è chiamato .add()(Set.prototype.add()). Funziona allo stesso modo, tranne per il fatto che solo uno di ogni valore univoco verrà aggiunto a Set.

Ciò significa che è possibile eseguire il ciclo di un array utilizzando .forEach() (Array.prototype.forEach()) o un ciclo for...of, quindi .add()ogni elemento in un nuovo Set. L’oggetto Set risultante avrà solo i valori univoci.

Più semplicemente, puoi semplicemente passare direttamente l’array al costruttore Set(). Funziona perché il costruttore Set() accetta un oggetto iterabile, come un array, come unico parametro.

” oggetti iterabili incorporati String, Array, oggetti simili a array (ad esempio, arguments o NodeList), TypedArray, Map, Set, e iterabili definiti dall’utente.”- MDN Docs

Il parametro del costruttore è facoltativo; new Set()rende vuoto Set.

Per convertire un Setin un array, un metodo per farlo è Array.from(). Parlerò di un altro metodo che utilizza l’operatore spread (...) in seguito, ma il metodo Array.from() funziona altrettanto bene ed è facile da leggere.

Ecco un frammento di codice che dimostra l’utilizzo di Set con valori primitivi, come numeri e stringhe, per trovare i valori univoci in un array JavaScript.

Ti è piaciuto il one-liner per trovare gli elementi unici in un array usando Set?

Sì, anche io! Thanks Grazie ES6.

Si noti che l’ordine del Set o array risultante è l ‘ “ordine di inserimento” — l’ordine in cui i valori sono stati trovati nell’array o nell’elenco originale.

Unici Riferimenti a Oggetti in un Array Utilizzando Set

Quando si lavora con valori primitivi, come i numeri o stringhe, un Set oggetto funziona proprio come ci si aspetta non solo unici valori sono mantenuti.

Tuttavia, quando si lavora con gli oggetti, tutti gli oggetti che contengono gli stessi dati sono considerati oggetti diversi da Set perché hanno riferimenti agli oggetti diversi — i “puntatori” effettivi in memoria a quegli oggetti.

Per dirla in un altro modo, un array con solo il numero 1 non sarà mai uguale a un altro array, anche se contiene solo 1: !== // true

Tuttavia, possiamo ancora usare Set per trovare riferimenti a oggetti univoci in un array o in un altro oggetto iterabile. Questo è super utile se lo stesso oggetto potrebbe essere stato aggiunto più volte a un array e vogliamo solo gli oggetti unici.

Ad esempio, se si assegna un oggetto a una variabile e quindi si aggiunge ripetutamente tale variabile a un array, è possibile utilizzare Set per rimuovere i duplicati:

Comprendere il concetto di riferimenti a oggetti in JavaScript è qualcosa che ho affrontato prima, in un mio articolo su una profonda copia di oggetti in JavaScript:

di Seguito in questo articolo, Parlerò con Set per confrontare oggetti in base ai valori in essi contenuti, invece, i riferimenti a oggetti che punta a loro.

Come Fare una Matrice Da un Set

il Mio metodo preferito per girare un Set in un array utilizzando la (...) diffusione operatore con una coppia di parentesi quadre : .

Si può anche scrivere come un one-liner:

Wow! Ovviamente, l’utilizzo dell’operatore di spread (...) è esattamente equivalente al metodo Array.from() che stavo usando prima. Sentiti libero di usare uno dei due.

Una volta che hai un array, puoi scorrere attraverso di esso con i tuoi soliti metodi di array, come un ciclo for...of, .forEach(), .map()e .reduce().

Puoi anche scorrere direttamente Set, come discuto nella prossima sezione, perché un Set è anche un tipo di oggetto iterabile, proprio come gli array stessi.

Scorrere un Insieme di Valori Univoci

Ci sono un paio di modi di base per scorrere un Set in JavaScript, ma non sono affatto gli stessi metodi che si dovrebbe utilizzare per gli array:

1 — Utilizzare il Set.prototipo.chiavi() o Set.prototipo.values()

Questi due metodi sono equivalenti; entrambi restituiscono un nuovo oggetto Iterator che include i valori per ciascun elemento in Set in ordine di inserimento.

Avere un oggetto Iterator ci consente di chiamare direttamente il metodo .next(), se è qualcosa che dovresti fare nel tuo codice JavaScript.

Arfat Salman ha un bel articolo che spiega gli iteratori su CodeBurst.io.

2 — Utilizzare Set.prototipo.forEach () con una funzione di callback

Il metodo .forEach() per un Set è simile al metodo con lo stesso nome per gli array, quindi puoi chiamarlo direttamente su un oggetto Set.

” callbackFn una volta per ogni valore presente nell’oggetto Set, in ordine di inserimento. Se viene fornito un parametro thisArg, verrà utilizzato come valore thisper ogni chiamata di callbackFn.”- MDN Docs

Naturalmente, è possibile utilizzare una funzione freccia come funzione di callback, lo stesso che si farebbe quando si lavora con un array.

3-Utilizzare un per…di Loop direttamente con il nuovo Set

Come Set è un tipo di oggetto iterabile, un ciclo for...of funzionerà allo stesso modo con un Set come con un array JavaScript.