Cache temporanea in Javascript con oggetti

di Morgan Pizzini, in HTML5, JavaScript,

Nello script #461 abbiamo visto come i Set siano una risorsa facile, immediata e ottimale per la gestione di una cache lato client. Hanno però un grosso limite: nel confrontare l'esistenza di un elemento al proprio interno non sono ottimizzati per i tipi riferimento. Quando la cache è composta da stringhe o numeri, l'univocità del dato è garantita dall'equazione 'valore1' === 'valore1'. Ma quando parliamo di oggetti {id:'1'} === {id:'1'} non è mai vera. Ed è per questo motivo che dobbiamo essere noi sviluppatori ad adeguare l'approccio alla cache.

const data = [
  { id: 1, name: "A" },
  { id: 1, name: "A" },
  { id: 2, name: "B" }
];

const map = new Map();

data.forEach(item => {
  // basica: id
  map.set(item.id, item);

  // composita: id+name
  map.set(`${item.id}+${item.name}`, item);
});

const unique = [...map.values()];

Il primo approccio si avvale dell'utilizzo di un dizionario (Map) la cui chiave diventa la proprietà o l'aggregato di proprietà che identifica l'oggetto univocamente. Il secondo metodo prende invece spunto dalla capacità nativa di gestione dei tipi valore, in questo caso stringhe, convertendo tutto l'oggetto in una stringa JSON per poi tornare nella forma oggetto al termine dei confronti

const unique = [
  ...new Set(data.map(item => JSON.stringify(item)))
].map(item => JSON.parse(item));

Benchè il codice risulti compatto è però una metodologia che impiega molte risorse e l'impatto può scalare sia a causa della grandezza del dataset che per grandezza dell'oggetto stesso. Facciamo dunque un passo indietro e semplifichiamo il primo metodo utilizzando questa versione

const seen = new Set();

const unique = data.filter(item => {
  if (seen.has(item.id)) return false;
  seen.add(item.id);
  return true;
});

Utilizzando il filter riusciamo ad evitare l'utilizzo di un iteratore come il forEach e a non allocare un dizionario di appoggio. Il codice risulta più compatto, ma soprattutto più leggibile, valore importantissimo in contesti da migliaia e migliaia di righe di codice.

Commenti

Visualizza/aggiungi commenti

| Condividi su: LinkedIn, Facebook

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi