W3docs

JavaScript Map e Set

In questo capitolo imparerai Map e Set in JavaScript: strutture dati che ampliano le capacità del linguaggio e semplificano le attività comuni.

Questo capitolo tratta due collezioni con chiave introdotte nel moderno JavaScript: Map (coppie chiave-valore) e Set (valori unici). Imparerai cosa fanno, quando usarle al posto di semplici object e array, come iterarle e i pattern che userai ogni giorno, come la deduplicazione di un array o la costruzione di un contatore di frequenze.

JavaScript Map

Una Map è una collezione di coppie chiave-valore, simile a un object normale — ma con differenze importanti che la rendono la scelta migliore in molte situazioni.

Map vs. object semplice: quando usare una Map

Preferisci una Map a un object semplice quando:

  • Le chiavi non sono string. Le chiavi di un object vengono sempre convertite in string (o simboli). Una Map permette di usare qualsiasi valore come chiave: object, funzioni, numeri, persino NaN.
  • Aggiungi e rimuovi voci spesso. Le Map sono ottimizzate per inserimenti e cancellazioni frequenti, e map.size fornisce il conteggio direttamente (gli object richiedono Object.keys(obj).length).
  • Hai bisogno di un ordine di iterazione garantito. Una Map itera sempre nell'ordine di inserimento.
  • Vuoi evitare collisioni con il prototipo. Un object semplice eredita chiavi come toString e constructor; una Map non ha tali chiavi predefinite, quindi le chiavi fornite dall'utente non possono mai confliggere con esse.

Usa un object semplice quando i dati hanno una struttura fissa e nota (un record), oppure quando hai bisogno della serializzazione JSON — JSON.stringify funziona sugli object ma non sulle Map.

Creare e manipolare le Map

Per creare una Map si usa new Map(). Supporta i seguenti metodi e proprietà:

  • map.set(key, value): Aggiunge o aggiorna una coppia chiave-valore. Restituisce la Map, quindi le chiamate possono essere concatenate.
  • map.get(key): Restituisce il valore associato a una chiave (undefined se assente).
  • map.has(key): Restituisce true se la chiave esiste.
  • map.delete(key): Rimuove una coppia chiave-valore.
  • map.clear(): Rimuove tutto.
  • map.size: Il numero di coppie chiave-valore.

Poiché set() restituisce la Map, è possibile concatenare le chiamate:

javascript— editable

Usare qualsiasi valore come chiave

A differenza degli object, una Map mantiene le chiavi così come sono. Il numero 1 e la string "1" sono chiavi diverse, e object o funzioni possono essere chiavi (confrontate per riferimento):

javascript— editable

Iterare su una Map

Una Map itera nell'ordine di inserimento e offre tre metodi iteratori più forEach:

  • map.keys() — un iterabile di chiavi.
  • map.values() — un iterabile di valori.
  • map.entries() — un iterabile di coppie [key, value] (questo è il comportamento predefinito, quindi for...of map funziona direttamente).
  • map.forEach((value, key) => ...) — esegue una callback per ogni voce.
javascript— editable

Conversione tra Map e object

Una Map può essere costruita a partire dalle voci di un object e riconvertita in un object:

javascript— editable

JavaScript Set

Un Set è una collezione di valori unici — ogni valore può comparire una sola volta. È strettamente correlato a un array, ma senza duplicati e senza accesso tramite indice.

Set vs. array: quando usare un Set

Preferisci un Set a un array quando:

  • L'unicità è importante. Un Set rifiuta automaticamente i duplicati, quindi non occorre mai controllare prima di aggiungere un valore.
  • Verifichi spesso l'appartenenza. set.has(value) è veloce e si legge chiaramente, mentre array.includes(value) scansiona l'intero array ogni volta.

Usa un array quando hai bisogno dell'accesso per indice, dei duplicati, o dei metodi come map/filter/reduce. (Puoi sempre convertire tra i due.)

Lavorare con i Set

  • new Set(iterable): Crea un Set, opzionalmente a partire da un array o da qualsiasi iterabile.
  • set.add(value): Aggiunge un valore (restituisce il Set, quindi le chiamate sono concatenabili). I duplicati vengono ignorati.
  • set.has(value): Restituisce true se il valore è presente.
  • set.delete(value): Rimuove un valore.
  • set.size: Il numero di valori.
  • set.clear(): Rimuove tutto.
javascript— editable

Deduplicare un array (l'uso principale)

Il motivo più comune per usare un Set è rimuovere i duplicati da un array. Usa lo spread per trasformare il Set di nuovo in un array con [...new Set(arr)]:

javascript— editable

Iterare su un Set

I Set iterano nell'ordine di inserimento e supportano for...of e forEach:

javascript— editable

Unione, intersezione e differenza

I Set rendono semplici le classiche operazioni insiemistiche. I motori moderni forniscono anche metodi integrati set.union(), set.intersection() e set.difference(), ma ecco l'approccio portabile usando gli array:

javascript— editable

Uno scenario reale: contatore di frequenza delle parole

Questo esempio mostra perché una Map spesso batte un object semplice. Contiamo quante volte ogni parola compare in una frase. Con una Map, le chiavi rimangono veri valori string, size è immediato e non c'è rischio che una parola entri in conflitto con una proprietà ereditata:

javascript— editable
Informazione

Sia Map che Set sono iterabili, quindi funzionano con for...of, l'operatore spread (...) e la destrutturazione. Inoltre, JavaScript fornisce WeakMap e WeakSet, che consentono di raccogliere le chiavi con il garbage collector. Scopri di più nella nostra pagina JavaScript WeakMap e WeakSet.

Riepilogo dei metodi

Map

OperazioneCodice
Crearenew Map() o new Map(Object.entries(obj))
Aggiungere / aggiornaremap.set(key, value) (concatenabile)
Leggeremap.get(key)
Verificaremap.has(key)
Rimuoveremap.delete(key)
Contaremap.size
Iterarefor (let [k, v] of map), map.keys(), map.values(), map.entries(), map.forEach()
Convertire in objectObject.fromEntries(map)

Set

OperazioneCodice
Crearenew Set() o new Set(array)
Aggiungereset.add(value) (concatenabile, ignora i duplicati)
Verificareset.has(value)
Rimuovereset.delete(value)
Contareset.size
Iterarefor (let v of set), set.forEach()
Deduplicare un array[...new Set(array)]

Regola pratica: usa una Map quando hai bisogno di dati con chiavi non-string, aggiornamenti frequenti o ordine garantito; usa un Set quando hai bisogno di una collezione di valori unici con verifiche di appartenenza rapide. Per tutto il resto, i semplici object e array rimangono gli strumenti giusti.

Esercitazione

Pratica
Quali sono alcune proprietà di JavaScript Map e Set?
Quali sono alcune proprietà di JavaScript Map e Set?
Was this page helpful?