Map e Set in JavaScript: quando preferirli a oggetti e array

Due collezioni oltre a oggetti e array

Oggetti e array semplici coprono gran parte di ciò che serve ai programmi JavaScript, ma non sono stati progettati per ogni compito. Map e Set sono collezioni integrate che colmano due lacune specifiche: ricerche per chiave quando le chiavi non sono stringhe, e controlli di appartenenza senza duplicati.

Fanno parte del linguaggio da ES2015. Sono entrambe iterabili, hanno entrambe una proprietà .size e funzionano bene con l'operatore spread. Il modello mentale è semplice:

• Map: come un oggetto, ma le chiavi possono essere qualsiasi cosa e l'ordine viene preservato.
• Set: come un array, ma i valori sono unici e la ricerca è veloce.

Creare e usare una Map

Una Map contiene coppie chiave/valore. La crei con new Map() e usi .set(), .get(), .has() e .delete():

const scores = new Map();

scores.set("ada", 97);
scores.set("boris", 84);
scores.set("chen", 91);

console.log(scores.get("ada"));
console.log(scores.has("boris"));
console.log(scores.size);

scores.delete("boris");
console.log(scores.size);

Puoi anche passare al costruttore un array di coppie [key, value] per popolarla:

const scores = new Map([
  ["ada", 97],
  ["boris", 84],
]);

console.log(scores.get("ada"));

Questa forma ad array di due elementi compare ovunque ci siano di mezzo le Map: è il modo in cui le voci vengono rappresentate quando iteri.

Map contro oggetto: perché preoccuparsene?

Gli oggetti semplici sembrano fare lo stesso lavoro. Il più delle volte è così. Ma le Map sistemano alcuni spigoli specifici:

const obj = {};
obj.toString = "oops";
console.log(obj.toString);

const map = new Map();
map.set("toString", "safe");
console.log(map.get("toString"));
console.log(map.size);

Gli oggetti ereditano da Object.prototype, quindi chiavi come toString, constructor e hasOwnProperty esistono già su ogni oggetto. Le Map non hanno questo bagaglio: le chiavi che imposti sono le uniche che esistono.

Le altre differenze da conoscere:

• Qualsiasi tipo di chiave. Le Map accettano come chiavi oggetti, funzioni, numeri, booleani. Gli oggetti convertono in silenzio le chiavi non stringa in stringhe: obj[1] e obj["1"] sono la stessa posizione.
• Ordine di inserimento garantito. Le Map iterano nell'ordine in cui le voci sono state aggiunte. Anche gli oggetti lo fanno quasi sempre, ma le chiavi stringa che sembrano numeri vengono ordinate per prime: una trappola sottile.
• Dimensione integrata. map.size è O(1). Per un oggetto dovresti scrivere Object.keys(obj).length, che ricostruisce un array.
• Ottimizzate per i cambiamenti frequenti. I motori ottimizzano le Map per aggiunte e rimozioni frequenti. Gli oggetti sono ottimizzati per record dalla forma stabile.

Usa un oggetto quando modelli un record con chiavi stringa note ({ name, email, age }). Usa una Map quando le chiavi sono dinamiche, non sono stringhe, oppure quando aggiungerai e rimuoverai voci spesso.

Scorrere una Map

Le Map sono iterabili, quindi for...of funziona direttamente e destrutturare ogni voce viene naturale:

const scores = new Map([
  ["ada", 97],
  ["boris", 84],
  ["chen", 91],
]);

for (const [name, score] of scores) {
  console.log(`${name}: ${score}`);
}

Se vuoi solo le chiavi o solo i valori, chiama .keys() o .values(). E c'è anche .forEach(), se lo preferisci:

const scores = new Map([["ada", 97], ["boris", 84]]);

for (const name of scores.keys()) console.log(name);
for (const score of scores.values()) console.log(score);

scores.forEach((value, key) => console.log(key, value));

Per trasformare di nuovo una Map in un oggetto semplice o in un array, usa lo spread:

const scores = new Map([["ada", 97], ["boris", 84]]);

const asArray = [...scores];
const asObject = Object.fromEntries(scores);

console.log(asArray);
console.log(asObject);

Creare e usare un Set

Un Set contiene valori unici. Aggiungere un valore già presente non ha alcun effetto:

const tags = new Set();

tags.add("javascript");
tags.add("tutorial");
tags.add("javascript");

console.log(tags.size);
console.log(tags.has("tutorial"));

tags.delete("tutorial");
console.log([...tags]);

L'unicità viene stabilita con la stessa regola di uguaglianza di ===, con una stranezza: dentro un Set NaN è considerato uguale a se stesso, anche se ovunque altro NaN === NaN vale false.

Passa un iterabile al costruttore per popolare un Set: è da qui che nasce il trucco per eliminare i duplicati.

const numbers = [1, 2, 2, 3, 3, 3, 4];
const unique = [...new Set(numbers)];

console.log(unique);

Una riga, qualsiasi tipo primitivo. Con gli array di oggetti non funziona (due oggetti diversi con gli stessi campi restano due valori diversi), ma per stringhe, numeri e booleani è il modo idiomatico di eliminare i duplicati.

Set contro array: quando cambiare

Array e Set contengono entrambi una collezione di valori, quindi quando scegliere l'uno o l'altro?

Scegli un Set quando:

• I valori devono essere unici e vuoi che sia il runtime a garantirlo.
• Fai molti controlli di appartenenza. set.has(x) è O(1); array.includes(x) è O(n). Dentro un ciclo, questa differenza si accumula in fretta.
• Ti basta l'ordine di inserimento. I Set iterano in ordine di inserimento ma non supportano l'accesso per indice.

Resta sugli array quando:

• Ti serve l'accesso per posizione: arr[0], slicing, ordinamento.
• I duplicati hanno un significato: un carrello con due articoli uguali.
• Userai molto i metodi degli array come .map, .filter, .reduce. I Set non li hanno; dovresti prima convertirli in array con lo spread.

Un rapido esempio orientato alle prestazioni:

const banned = new Set(["spam", "scam", "ads"]);
const messages = ["hello", "spam", "hi", "ads", "hey"];

const clean = messages.filter(m => !banned.has(m));
console.log(clean);

Se banned fosse un array, ogni callback di filter scorrerebbe l'intera lista. Come Set, ogni ricerca richiede tempo costante.

Scorrere un Set

Stessa storia delle Map: for...of funziona e basta, e lo spread ti dà un array.

const tags = new Set(["javascript", "tutorial", "map-set"]);

for (const tag of tags) {
  console.log(tag);
}

const asArray = [...tags];
console.log(asArray);

I Set espongono anche .keys(), .values() e .entries() per simmetria con le Map, anche se per un Set chiavi e valori sono la stessa cosa. Nella maggior parte dei casi itererai direttamente.

Un esempio completo: contare i visitatori unici per pagina

Combiniamo le due cose: una Map che associa i percorsi delle pagine a un Set di ID dei visitatori.

const visits = [
  { path: "/", user: "u1" },
  { path: "/", user: "u2" },
  { path: "/about", user: "u1" },
  { path: "/", user: "u1" },
  { path: "/about", user: "u3" },
];

const uniqueByPage = new Map();

for (const { path, user } of visits) {
  if (!uniqueByPage.has(path)) {
    uniqueByPage.set(path, new Set());
  }
  uniqueByPage.get(path).add(user);
}

for (const [path, users] of uniqueByPage) {
  console.log(`${path}: ${users.size} unique visitors`);
}

La Map gestisce l'associazione tra percorso e contenitore; il Set gestisce l'eliminazione dei duplicati dentro ogni contenitore. Fare lo stesso con un oggetto semplice e degli array funzionerebbe, ma dovresti scrivere controlli indexOf e guardie hasOwnProperty in più per tutto il tempo.

WeakMap e WeakSet, in breve

Esistono due collezioni collegate per un caso d'uso ristretto: WeakMap e WeakSet. Mantengono riferimenti deboli, cioè una voce la cui chiave (per WeakMap) o il cui valore (per WeakSet) non ha altri riferimenti viene eliminata automaticamente dal garbage collector.

const cache = new WeakMap();

function getMetadata(obj) {
  if (!cache.has(obj)) {
    cache.set(obj, { accessedAt: Date.now() });
  }
  return cache.get(obj);
}

const user = { name: "Ada" };
console.log(getMetadata(user));

Accettano solo oggetti come chiavi, non sono iterabili e non hanno .size. È voluto: se potessi iterarle, il lavoro del garbage collector diventerebbe osservabile. Sono utili per memorizzare metadati su oggetti che non ti appartengono, e rare nel codice di tutti i giorni.

Prossimo passo: JSON

Map e Set sono ottime in memoria, ma nessuna delle due sopravvive intatta a JSON.stringify: le Map diventano {} e anche i Set diventano {}. La prossima pagina parla di JSON: come serializzare e fare il parsing dei dati, e gli schemi per gestire le collezioni introdotte qui quando devono attraversare una rete o un file.