Oggetti built-in Map e Set

In questo video parleremo di due nuovi oggetti built-in introdotti dall'ECMAScript 6: oggetto Map e oggetto Set.
L'oggetto Map è usato per creare "mappe" ovvero collezioni di coppie chiave/valore. Prima dell'introduzione di questo oggetto, per questo scopo, veniva usato un normale oggetto letterale, però a volte si poteva andare incontro ad inconvenienti come il sovrascrivere proprietà esistenti. Vedremo un paio di modi per creare un oggetto Map e poi parleremo dei suoi metodi e proprietà: size, has(), delete() e clear().
L'oggetto Set è usato per creare collezione di valori unici, pensatelo come ad un array che non può contenere due volte lo stesso valore. Anche in questo caso, vedremo un paio di modi per creare un oggetto Set (di cui uno usando l'operatore "spread") e poi parleremo dei suoi metodi e proprietà: size, add(), delete() e clear().

Trascrizione: (click per espandere)
salve a tutti oggi parleremo di due
nuovi oggetti built in
introdotti con l'ecma script 6 e
l'oggetto Map e l'oggetto Set allora
l'oggeto map è usato per fare una
collezione di coppie chiave valore si
normalmente prima si usava un normale
oggetto in cui si dava il nome della
proprietà è un valore alla proprietà
però per fare questo tipo di collezioni
adesso c'è uno specifico oggetto e
perché usando un normale oggetto in
alcuni casi potevano esserci qualche
problema
comunque andiamo a vedere come funziona
all'oggetto map allora io dichiaro la
mia solita variabile la chiamo map anzi
map object e keyword new e Map questo
e' l'oggetto map adesso io ho creato un
nuovo oggetto map e adesso vado a
popolarlo con le coppie chiave valore
quindi io metto map object e per
assegnare una coppia chiave valore si
usa il metodo set e si passano due
argomenti l'argomento chiave che può
essere qualsiasi può essere una stringa
può essere un numero può essere un
booleano e il suo valore e mettiamo che
in questo caso valga 123 poi mettiamo
faccio un'altra assegnazione e quindi
map object metto chiave2 e in
questo caso ci metto 456 adesso se io
voglio vedere quante coppie chiave
valore ci sono dentro a un oggetto map si
usa sempre
map object
e la proprietà size adesso io
la metto dentro a un console.log
ok se adesso andiamo a vedere l'output
come vedete ho due proprie due coppie
chiave valore adesso io cancello una
coppia per cancellare una coppia si usa
sempre il nome dell'oggetto e il metodo
delete e poi si specifica usando la
chiave quale coppia chiave/valore
voglio cancellare diciamo che voglio
cancellare la prima quindi qui specifico
la chiave ecco qui adesso se vado a
rivedere quanto lungo è il mio oggetto o
meglio quante copie valore ha il mio
oggetto adesso mi ritrovo una coppia
chiave valore diciamo che voglio vedere
se esiste una coppia chiave valore
dentro l'oggetto quindi voglio che mi
ritorni un booleano se esiste quindi un
vero è un falso si usa sempre map object
e il metodo has e poi si specifica
dentro il nome della chiave diciamo che
io voglio vedere la chiave numero due se
esiste ovviamente questo qui lo devo
mettere dentro a un console log per
vedere il suo output console.log
ecco qui e mi dice che è vero se io
mettevo dentro la chiave che avevo
cancellato precedentemente mi diceva
falso
se io voglio cancellare in un colpo solo
tutte le coppie chiave/valore di uno di un oggetto map uso il
nome dell'oggetto e il metodo clear
ok se adesso io vado a vedere quante
quante coppie chiave/valore ci sono dentro
l'oggetto lui mi dirà che ci sono zero
perché ho cancellato tutto quel metodo
clear vi faccio vedere un'altra maniera
per creare l'oggetto map
allora io posso creare un oggetto map e
assegnargli le proprietà chiave/valore
subito appena lo costruisco quindi per
esempio chiamo questo oggetto map due
quindi new map
e dentro ci passò un array di coppie
chiave valore allora c'è questo array e
le coppie chiave valore le passo a loro
volta come array quindi come fosse un
array di un array quindi questa è la mia
prima coppia chiave/valore e metto prop1
e le assegna un numero 123 poi ci metto
una seconda propria coppia chiave valore
in questo caso magari la chiamo cento
questa è la chiave è il suo valore è
2 per esempio quindi come vi dicevo
posso usare stringa posso usare numeri
non ci sono problemi possono usare
qualsiasi cosa come chiave e poi ci
metto dentro un altro prop 3 mettiamo
e qui ci metto
bla bla bla quindi adesso io ho creato
questo oggetto map e mentre lo creò gli
assegnano anche subito tre coppie chiave/valore se quindi adesso vado a
vedere quante proprietà ha o
meglio quante coppie ha quindi map due mi
ritrovo che ha tre proprieta' ecco qua
vi faccio vedere un'altra maniera per
creare all'oggetto map cioè
concatenando i set come abbiamo visto
qui usare li metodo 7set posso anche
concatenarlo quindi io ho const chiamiamola
map tre allora new map e allora si
mette così poi si passa alla proprietà
set ed entro il set ci metto le mie
proprietà come ho fatto prima quindi
possiamo metterci chiave 1 e il valore
890 poi ci concateno un altro set e ci
passo dentro un'altra chiave chiave 2
e ci metto dentro un valore 345 per
esempio e poi posso concatenare quante
chiavi voglio qui ci metto chiave 3 e
ci passo dentro il valore cento ok se
adesso voglio andare a vedere quanto
lungo e' il mio map allora si usa map3
adesso abbiamo detto andiamo a vedere
e 3 anche questo perché ho creato
subito 3 map 3 chiave/valore
andiamo a vedere adesso l'oggetto set
l'oggetto set serve per creare una
collezione però di valori unici mentre
prima qui potevo mettere anche
valori che erano doppi l'oggetto set
accetta solo valori unici e pensatelo
come a un'array di valori unici non ha le
coppie chiave/valore ha solo valori e
possono essere unici andiamo a vedere
come si crea un set
allora io chiamo set1 qui keyword
new è oggetto set
ecco qui e dentro abbiamo detto che è
come un'array quindi ci metto dentro dei
miei i miei valori può essere rosso poi
posso avere un green e posso avere anche
un blu ecco qui quindi sa se io tre
valori dentro al mio set posso andare a
vedere quanto lungo e' console.log
set1 l'abbiamo chiamato e si dice si usa
size anzi queste qua le commento così non
danno fastidio
ecco qua io ho tre valori dentro al mio
set vi faccio vedere anche una maniera
per creare un set allora qui abbiamo
creato il set passandoci dentro
direttamente i valori io posso creare
anche un set chiamiamolo set2 quindi il
keyword set e concatenando
il metodo add e dentro ogni add ci passò
un argomento che è il valore quindi
posso usare red add qui ci metto dentro
un green
qui ci metto dentro blu qui andiamo a
vedere quanto lungo e' anche questo è lungo
tre se io voglio cancellare un valore
del mio del mio set
ad esempio voglio sul set1
voglio cancellare un valore uso la il
metodo delete e specifico il valore
che voglio cancellare ad esempio voglio
cancellare il green del metodo set1 e
andiamo a vedere adesso quanto vale il
set1 di lunghezza quindi set1
adesso dovrebbe essere due infatti
perché ho cancellato se io voglio
cancellare completamente un set metto set1 e clear
come vedete sono abbastanza simili
essendo stati creati nello stesso
momento i due oggetti built in
hanno usato metodi molto simili
andiamo a vedere adesso quanto lungo è
il set1 e come vedete adesso ho zero perché
completamente cancellato
adesso vi faccio vedere perché vi dico
che accetta solo valori unici perché se
io ho un'array ad esempio e lo chiamò
array1 e dentro ci metto 1 2 3 e 4 e poi
ho un'array che lo chiamo 2 e dentro ci
metto
3 4 5 e 6
adesso se io voglio unire i due array
in un set
allora come faccio creo un nuovo set
nuovo set e dentro il keyword new set e
dentro qui ci passo i miei due array come
posso passarli? posso passarli con
l'operatore spread che abbiamo già visto
altre volte quindi set1
ah scusate array1 e poi ho
operatore spread array2
quindi in linea teorica uno dice dovrei
avere otto elementi dentro al mio set
però vi ho detto che non accetta
non accetta elementi doppi quindi adesso
andiamo a vedere quanto quanto vale il
nuovo set di lunghezza size e vedete che
ha sei elementi perché avrà 12 34 poi
essendo il 3 4 doppi non vengono
considerati questi doppioni qui e poi
avrà 56 con questo è tutto ci sentiamo
la prossima ciao
File del video: