Destrutturazione
Posted by vanni on Saturday, 12 May 2018
In questo video parleremo di un nuovo concetto introdotto con l'ECMAScript 6: la destrutturazione (o destructuring in inglese).
La destrutturazione serve per popolare singole variabili, in maniera molto compatta e sintetica, con i valori delle proprietà di un oggetto o gli elementi di un array. Quindi con la destrutturazione possiamo, con una sola riga di codice, andare ad estrapolare i valori contenuti in oggetti e array, ed andare ad assegnarli a nuove variabili.
In questo video vedremo anche come l'ES6 permette di accoppiare una variabile e una proprietà che hanno lo stesso nome in maniera veloce e sintetica e, infine, vedremo un altro esempio di come può essere usato l'operatore spread.
Trascrizione: (click per espandere)
salve a tutti in questo video parlerò
della destrutturazione un concetto
introdotto con l'ecma script 6
allora diciamo che io
creo una variabile la chiamo booleano
eccola qui e gli assegno un valore "true"
poi diciamo che io ho un oggetto che si
chiama lo chiamo oggetto quindi
molto semplice allora questo oggetto gli
metto detto tre proprietà allora intanto
gli metto una proprietà stringa eccola
qui bla bla bla poi ci metto dentro una
proprietà numero ok ci mettono dentro
quattro anzi qua ho sbagliato perché si
e poi ci mette dentro booleano lo chiamo
booleano e ci voglio mettere dentro il
mio booleano allora booleano come vedete
io qui sto assegnando il valore di una
variabile della mia variabile booleano
ha una proprietà booleano dell'oggetto
quando io sto assegnando una variabile
che ha lo stesso nome della proprietà
ecma script 6 ha introdotto la possibilità di
accorciare questa sintassi e basta fare
così automaticamente io sto dicendo
inserisci la variabile booleano dentro
la proprietà booleano questo non è
ancora destrutturazione questo è solo
un esempio di una nuova novità
introdotta dall'ecma script 6
adesso andiamo a vedere la
destrutturazione adesso io voglio
scompattare le proprietà di questo
oggetto salvandole in un'altra
variabile fino all'ecma script 5 come
dovevo fare dovevo fare const la
chiamavo magari parola e dovevo usare
object punto stringa per salvare il
valore della proprietà stringa dentro
alla variabile parola e stessa cosa o
poi dovevo fare per il numero e per il
booleano
con la destrutturazione e riesco a usare
una sintassi molto più compatta e ve la
faccio vedere subito allora io creo una
keyword const poi parentesi graffe
perché sto avendo a che fare con un
oggetto e poi io scrivo string quindi il
nome della proprietà a ha un nome di una
nuova variabile parola poi numero non
della seconda proprietà e la metto
dentro a una nuova viabile variabile che
si chiama num
e poi booleano la metto dentro a un
una variabile che si chiama falso e poi
uso il nome del mio oggetto quindi obj
ecco qua come vedete in questa maniera
io riesco a scompattare le proprietà del
dell'oggetto object e vado a creare in
una riga sola le tre variabili con
al loro interno il valore delle
proprietà dell'oggetto object se adesso
io vado a fare la output quindi console.log l'output di stringa anzi scusate di
parola e poi faccio l'output di num
ok e poi faccio l'output di falso ok
andiamo a vedere come vedete sono
riuscito a fare la output usando le
nuove tre variabili
eccole qua si possono fare la si può
usare la destrutturazione anche per gli
array andiamo a vedere anzi prima di
passare a quello se io vado a chiamare
voglio chiamare voglio creare tre
variabili con lo stesso nome delle
proprietà dell'oggetto posso scrivere
anche in maniera più compatta
quindi abbiamo detto la prima proprietà
e stringa e vado a creare una variabile
con il nome stringa la seconda è il
numero e vado a creare una propria una
nuova variabile con il nome della
proprietà numero e la terza è booleano
booleano e come sempre object qui se
adesso io prendo queste tre qui faccio
stringa numero booleano andiamo a vedere
booleano
ma perché ce l'avevo qui scusate e
allora cui devo assegnarlo metto falso
ecco come vedete io c'ho tre nuove
variabili col nome delle proprietà in
una maniera molto succinta riesco a
creare tre variabili con il nome delle
proprietà dell'oggetto
come vi dicevo come vi accennavo io posso
usare la destrutturazione anche per gli array
allora io ho un array diciamo arr e
mettiamo 1 2 3 e 4
adesso vado a scompattare questa array con
la destrutturazione const in questo
caso uso le parentesi quadrate perché è
un array e chiamo primo secondo
magari è così e poi diciamo che io non
voglio anche un terzo quarto ma voglio
un array con e gli ultimi due elementi se
vi ricordate c'è lo spread operator
ecco qui e posso chiamarlo miniarray
quindi array
ecco qua e vado a usare il mio array
ecco se adesso io faccio console.log di
primo io qui mi trovo 1
se faccio il console log di secondo mi
trovo anche il 2
se faccio il console log di miniarray
mi troverò un mini array con due
elementi 3 e 4
eccolo qui il mio array due elementi 3 4
quindi questo è solo un esempio di come
io posso usare lo spread operator in una
destrutturazione con questo è tutto ci
sentiamo la prossima ciao
della destrutturazione un concetto
introdotto con l'ecma script 6
allora diciamo che io
creo una variabile la chiamo booleano
eccola qui e gli assegno un valore "true"
poi diciamo che io ho un oggetto che si
chiama lo chiamo oggetto quindi
molto semplice allora questo oggetto gli
metto detto tre proprietà allora intanto
gli metto una proprietà stringa eccola
qui bla bla bla poi ci metto dentro una
proprietà numero ok ci mettono dentro
quattro anzi qua ho sbagliato perché si
e poi ci mette dentro booleano lo chiamo
booleano e ci voglio mettere dentro il
mio booleano allora booleano come vedete
io qui sto assegnando il valore di una
variabile della mia variabile booleano
ha una proprietà booleano dell'oggetto
quando io sto assegnando una variabile
che ha lo stesso nome della proprietà
ecma script 6 ha introdotto la possibilità di
accorciare questa sintassi e basta fare
così automaticamente io sto dicendo
inserisci la variabile booleano dentro
la proprietà booleano questo non è
ancora destrutturazione questo è solo
un esempio di una nuova novità
introdotta dall'ecma script 6
adesso andiamo a vedere la
destrutturazione adesso io voglio
scompattare le proprietà di questo
oggetto salvandole in un'altra
variabile fino all'ecma script 5 come
dovevo fare dovevo fare const la
chiamavo magari parola e dovevo usare
object punto stringa per salvare il
valore della proprietà stringa dentro
alla variabile parola e stessa cosa o
poi dovevo fare per il numero e per il
booleano
con la destrutturazione e riesco a usare
una sintassi molto più compatta e ve la
faccio vedere subito allora io creo una
keyword const poi parentesi graffe
perché sto avendo a che fare con un
oggetto e poi io scrivo string quindi il
nome della proprietà a ha un nome di una
nuova variabile parola poi numero non
della seconda proprietà e la metto
dentro a una nuova viabile variabile che
si chiama num
e poi booleano la metto dentro a un
una variabile che si chiama falso e poi
uso il nome del mio oggetto quindi obj
ecco qua come vedete in questa maniera
io riesco a scompattare le proprietà del
dell'oggetto object e vado a creare in
una riga sola le tre variabili con
al loro interno il valore delle
proprietà dell'oggetto object se adesso
io vado a fare la output quindi console.log l'output di stringa anzi scusate di
parola e poi faccio l'output di num
ok e poi faccio l'output di falso ok
andiamo a vedere come vedete sono
riuscito a fare la output usando le
nuove tre variabili
eccole qua si possono fare la si può
usare la destrutturazione anche per gli
array andiamo a vedere anzi prima di
passare a quello se io vado a chiamare
voglio chiamare voglio creare tre
variabili con lo stesso nome delle
proprietà dell'oggetto posso scrivere
anche in maniera più compatta
quindi abbiamo detto la prima proprietà
e stringa e vado a creare una variabile
con il nome stringa la seconda è il
numero e vado a creare una propria una
nuova variabile con il nome della
proprietà numero e la terza è booleano
booleano e come sempre object qui se
adesso io prendo queste tre qui faccio
stringa numero booleano andiamo a vedere
booleano
ma perché ce l'avevo qui scusate e
allora cui devo assegnarlo metto falso
ecco come vedete io c'ho tre nuove
variabili col nome delle proprietà in
una maniera molto succinta riesco a
creare tre variabili con il nome delle
proprietà dell'oggetto
come vi dicevo come vi accennavo io posso
usare la destrutturazione anche per gli array
allora io ho un array diciamo arr e
mettiamo 1 2 3 e 4
adesso vado a scompattare questa array con
la destrutturazione const in questo
caso uso le parentesi quadrate perché è
un array e chiamo primo secondo
magari è così e poi diciamo che io non
voglio anche un terzo quarto ma voglio
un array con e gli ultimi due elementi se
vi ricordate c'è lo spread operator
ecco qui e posso chiamarlo miniarray
quindi array
ecco qua e vado a usare il mio array
ecco se adesso io faccio console.log di
primo io qui mi trovo 1
se faccio il console log di secondo mi
trovo anche il 2
se faccio il console log di miniarray
mi troverò un mini array con due
elementi 3 e 4
eccolo qui il mio array due elementi 3 4
quindi questo è solo un esempio di come
io posso usare lo spread operator in una
destrutturazione con questo è tutto ci
sentiamo la prossima ciao
Link correlati:
Link per il video che parla dell'operatore spread
File del video: