Categorie
Javascript Programmazione

{JS} new Map () & new Set()

Gli oggetti Set e Map

In JavaScript quando si ha bisogno di gestire insiemi di dati si fa ricorso agli array, ECMAScript 6, definisce due nuove strutture di dati molto più comode che ci facilitano nell’effettuare le operazioni più comuni.

Set e Map sono entrambi oggetti iterabili.

Note: In JS qualunque oggetto in grado di essere trattato come una sequenza è definito un oggetto iterable (iterabile).

new Map()

Map è una collezione di dati identificati da chiavi, proprio come un Object (Oggetto). La principale differenza è che Map accetta chiavi di qualsiasi tipo inclusi gli oggetti.

Sintassi Map vuoto
var ilMioMap = new Map();
Sintassi Map con chavi-valori
var ilMioMap = new Map([[chiave,valore],[chiave,valore],[chiave,valore]]);

Proprietà

La proprietà size indica il numero di elemento contenuti nella struttura dati Map.

sizeindica il numero di elemento contenuti
ilMioMap.size; // Risultato 0

Metodi

Metodi per gestire
.set(chiave, valore)registra una nuova coppia chiave-valore
.get(chiave)recupera il valore di una chiave
.has(chiave)verifica esistenza di una chiave
.delete(chiave)cancella la chiave ed il valore contenuto
.clear()rimuove tutto il contenuto di Map
Tipi di chiavi
var ilMioMap = new Map();

ilMioMap.set('1', 'str1');   // una chiave di tipo stringa
ilMioMap.set(1, 'num1');     // una chiave di tipo numerico
ilMioMap.set(true, 'bool1'); // una chiave di tipo booleano

A differenza degli oggetti, le chiavi non vengono convertite a stringa sono quindi ammesse chiavi di qualunque tipo.
Il fatto di poter utilizzare oggetti come chiavi è una delle caratteristiche più importanti fornite dalla struttura dati Map.

Contatore di visite dell’utente
// Creiamo l'utente
var luca = { nome: "Luca" };

// Creiamo un contenitore di visite di tipo Map
var contatoreVisite= new Map();

// Memorizziamo le visite dell'utente "luca"; luca è un oggetto che utilizziamo come chiave e a cui associamo un valore

contatoreVisite.set(luca, 10);

//Stampiamo recuperando il valore associato all'oggetto
document.write( contatoreVisite.get(luca) ); // 10
Metodi per iterare

Dell’oggetto Map possiamo ciclare sia i soli valori sia le sole proprietà si le intere coppie chiave-valore.
Per fare questo aggiungiamo uteriori metodi.

.keys()recupera tutte le chiavi per ciclarle
.values()recupera tutti i valori per ciclarli
.entries()recupera tutte le coppie chiavi-valori

Vedremo l’utilità di questi metodi all’interno del ciclo for-of.

for..ofCiclo for-of; utilizzato di default
.forEach()Metodo simile a forEach() degli array
for..of

Possiamo iterare Map con i cicli for-of, che è il sistema utilizzato di default.
Nel sottostante esempio cicleremo il Map “frutta”, prima le sole chiavi, mediante il metodo frutta.keys(), che recupera tutti le chiavi di “frutta”, a seguire, i soli valori con frutta.values() ed in fine le coppie chiavi-valori.

var frutta = new Map([['fragole', 50],['arancie', 10],['limoni', 5]]);

for ( var frutto of frutta.keys() ) {
document.write(frutto)};
// Risultato fragole,arancie,limoni

for ( var frutto of frutta.values() ) {
document.write(frutto)};
//Risultato 50,10,5

for ( var frutto of frutta.entries() ) {
document.write(frutto)};
//Risultato fragole,500 arancie,10 limoni,5
Nota: 
1. Utilizziamo il ciclo for-of in quanto cicliamo un oggetto (Map).
2. Nell'ultimo ciclo Avremmo potuto omettere entries(), in quanto, se omesso, è sottointeso che dovrà ciclare la coppia chiavi-valori.
.forEach()

Il metodo forEach degli oggetti Map è simile a quello utilizzato dagli Array.

var frutta = new Map([['fragole', 50],['arancie', 10],['limoni', 5]]);

// esegue la funzione per ogni coppia contenuta in Map
frutta.forEach( function(value, key, map){
  document.write(`${key}: ${value}`); 
});

// Risultato fragole:50 arancie:10 limoni:5

Convertire elementi

da Object a Map

Se abbiamo un semplice oggetto, e vogliamo utilizzarlo per creare una Map, possiamo utilizzare un metodo integrato degli oggetti Object.entries(obj) il quale ritorna un array di coppie chiave/valore nello stesso formato.

var objectPersona = { name: "John", age: 30 };
var mapPersona = new Map(Object.entries(objectPersona));

//Otterremo  mapPersona([["name","John"],["age",30]]);

da Map a Object

Esiste un metodo Object.fromEntries che fa esattamente l’opposto: dato un array di coppie [key, value], ne crea un oggetto.

var frutta = Object.fromEntries([
  ['fragola', 50],
  ['arancie', 10],
  ['limoni', 5]
]);

// Otterremo frutta = { fragola: 50, arancie: 10, limoni: 5 }

new Set()

Un Set può contenere dati di qualsiasi tipo (Stringhe, Numeri, Booleani, Objcet ecc.) ma senza duplicati.
E’ un tipo di collezione speciale – “set di valori” (senza chiavi), dove ogni valore può apparire una sola volta.

var ilMioSet = new Set();

Convertire array e stringhe in Set

E’ possibile convertire un array o una stringa in un oggetto Set.

var array = [1,2,3,4,5];
var testo = "Lorem ipsum dolor sit amet";
var ilMioSet = new Set(array);
var ilMioSecondoSet = new Set(testo);

Proprietà

La proprietà size indica il numero di elemento contenuti nella struttura dati Set.

sizeindica il numero di elemento contenuti
var ilMioSet = new Set([1, 2, 3, 4, 5]);
ilMioSet.size; // Risultato 5

Metodi

L’oggetto Set ha ulteriori metodi proprietari.

has()verifica se un elemento è contenuto nel set
add()aggiunge un elemento al set
delete()cancella un elemento dal set
clear()elimina tutti gli elementi contenuti nel set
var ilMioSet = new Set([1,2,3,4,5]);
ilMioSet.has(3); // risultato true
ilMioSet.add(6); // aggiunge il 6
ilMioSet.delete(1); // rimuove l'1
ilMioSet.clear(); // cancella tutti i valori del Set

La principale caratteristica dei set è che ripetute chiamate di .add(value) con lo stesso valore non fanno nulla. Questo è il motivo per cui in un Set ogni valore può comparire una sola volta.

Contatore visite uniche
var visiteUniche = new Set();

var john = { name: "John" };
var pete = { name: "Pete" };
var mary = { name: "Mary" };

// Visitatori che ritornano più volte
visiteUniche.add(john);
visiteUniche.add(pete);
visiteUniche.add(mary);
visiteUniche.add(john);
visiteUniche.add(mary);

// visiteUniche mantiene solo valori unici
document.write(visiteUniche.size); // Risultato 3
Metodi per iterare

I metodi per iterare gli elementi di un Set sono gli stessi di Map.

for..ofCiclo for-of; utilizzato di default
.forEach()Metodo simile a forEach() degli array
for..of
var ilMioSet = new Set(["oranges", "apples", "bananas"]);

for (let value of ilMioSet){
document.write(value);
}
.forEach()
var ilMioSet = new Set(["oranges", "apples", "bananas"]);

ilMioSet.forEach( function(value, valueAgain, ilMioSet){
  document.write(value);
});

La funzione callback inserita nel forEach ha 3 argomenti:
un value, poi lo stesso valore valueAgain, e poi l’oggetto riferito da this, che è lo stesso set “ilMioSet”.
Questo particolare sintassi è data da questioni di compatibilità con Map ma può aiutare rimpiazzare Map con Set, e vice versa.

Per lo stesso motivo, sono supportati anche i metodi di iterazione di Map:

  • set.keys() – restituisce i valori
  • set.values() – lo stesso di set.keys()
  • set.entries() – restituisce una coppia [value, value]

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *