Articolo originale: How to Use Array and Object Destructuring in JavaScript
L'assegnazione destrutturante è una fantastica funzionalità che è arrivata con ES6. La destrutturazione è un'espressione JavaScript che rende possibile spacchettare i valori dagli array o le proprietà dagli oggetti, in variabili distinte. Cioè possiamo estrarre dati da array e oggetti e assegnarli a delle variabili.
Perché è necessario?
Immagina di voler estrarre i dati da un array. Come avresti fatto in passato?
let introduction = ["Hello", "I" , "am", "Sarah"];
let greeting = introduction[0];
let name = introduction[3];
console.log(greeting);//"Hello"
console.log(name);//"Sarah"
Come puoi vedere, quando vogliamo estrarre dei dati da un array, dobbiamo fare la stessa cosa ancora e ancora.
L'assegnazione destrutturante ES6 rende più semplice l'estrazione dei dati. Ma come si usa?
Prima parleremo dell'assegnazione destrutturante con gli array e poi ci sposteremo alla destrutturazione di oggetti.
Iniziamo!
Destrutturazione base di array
Se vogliamo estrarre dati da un array, usare l'assegnazione destrutturante è piuttosto semplice.
Facciamo riferimento al nostro primo esempio per gli array. Invece di eseguire quel processo ripetitivo, possiamo fare così:
let introduction = ["Hello", "I" , "am", "Sarah"];
let [greeting, pronoun] = introduction;
console.log(greeting);//"Hello"
console.log(pronoun);//"I"
Possiamo anche fare questo, con lo stesso risultato:
let [greeting, pronoun] = ["Hello", "I" , "am", "Sarah"];
console.log(greeting);//"Hello"
console.log(pronoun);//"I"Dichiarare variabili prima dell'assegnazione
Le variabili possono essere dichiarate prima di essere assegnate, così:
let greeting, pronoun;
[greeting, pronoun] = ["Hello", "I" , "am", "Sarah"];
console.log(greeting);//"Hello"
console.log(pronoun);//"I"
Nota che le variabili sono impostate da sinistra a destra, quindi la prima variabile ottiene il primo elemento nell'array, la seconda variabile ottiene il secondo elemento nell'array e così via.
Saltare degli elementi in un array
E se volessimo ottenere il primo e l'ultimo elemento del nostro array invece del primo e del secondo, assegnando solo due variabili? Si può fare anche questo. Guarda all'esempio qui sotto:
let [greeting,,,name] = ["Hello", "I" , "am", "Sarah"];
console.log(greeting);//"Hello"
console.log(name);//"Sarah"
Cosa è successo?
Guarda l'array sul lato sinistro dell'assegnazione della variabile. Nota che invece di avere solo una virgola, ne ha tre. La virgola è il separatore usato per saltare i valori in un array. Quindi se vuoi saltare un elemento in un array, usa semplicemente una virgola.
Facciamo un altro esempio. Saltiamo il primo e il terzo elemento della lista. Come possiamo fare?
let [,pronoun,,name] = ["Hello", "I" , "am", "Sarah"];
console.log(pronoun);//"I"
console.log(name);//"Sarah"
È la virgola che compie la magia, quindi se vogliamo saltare tutti gli elementi, possiamo farlo in questo modo:
let [,,,,] = ["Hello", "I" , "am", "Sarah"];
Assegnare il resto di un array
E se volessimo assegnare una parte dell'array a delle variabili e il resto degli elementi dell'array a una particolare variabile? In questo caso, possiamo agire così:
let [greeting,...intro] = ["Hello", "I" , "am", "Sarah"];
console.log(greeting);//"Hello"
console.log(intro);//["I", "am", "Sarah"]
Usando questo modello, puoi estrarre e assegnare la parte rimanente di un array a una variabile.
Assegnazione destrutturante con le funzioni
È possibile anche estrarre dati da un array restituito da una funzione. Diciamo che abbiamo una funzione che restituisce un array come nell'esempio qui sotto:
function getArray() {
return ["Hello", "I" , "am", "Sarah"];
}
let [greeting,pronoun] = getArray();
console.log(greeting);//"Hello"
console.log(pronoun);//"I"
Otteniamo lo stesso risultato.
Usare dei valori predefiniti
I valori predefiniti possono essere assegnati alle variabili nel caso in cui il valore estratto dall'array sia undefined:
let [greeting = "hi",name = "Sarah"] = ["Hello"];
console.log(greeting);//"Hello"
console.log(name);//"Sarah"
Quindi name ripiega su "Sarah" perché non è definito nell'array.
Scambiare valori usando l'assegnazione destrutturante
Un'ultima cosa: possiamo usare l'assegnazione destrutturante per scambiare i valori delle variabili:
let a = 3;
let b = 6;
[a,b] = [b,a];
console.log(a);//6
console.log(b);//3
E adesso, passiamo alla destrutturazione di oggetti.
Destrutturazione di oggetti
Per prima cosa, vediamo perché è necessaria la destrutturazione di oggetti.
Diciamo che vogliamo estrarre dati da un oggetto e assegnarli a nuove variabili. Prima di ES6, come avremmo fatto?
let person = {name: "Sarah", country: "Nigeria", job: "Developer"};
let name = person.name;
let country = person.country;
let job = person.job;
console.log(name);//"Sarah"
console.log(country);//"Nigeria"
console.log(job);//Developer"
Puoi vedere quanto è tedioso estrarre tutti i dati. Dobbiamo fare ripetutamente la stessa cosa. La destrutturazione ES6 salva la nostra giornata. Andiamo subito al dunque.
Destrutturazione base di oggetti
Ripetiamo l'esempio precedente con ES6. Invece di assegnare i valori uno alla volta, possiamo usare l'oggetto sulla sinistra per estrarre i dati:
let person = {name: "Sarah", country: "Nigeria", job: "Developer"};
let {name, country, job} = person;
console.log(name);//"Sarah"
console.log(country);//"Nigeria"
console.log(job);//Developer"
Otterrai lo stesso risultato. È valido anche assegnare le variabili tramite un oggetto che non è stato dichiarato:
let {name, country, job} = {name: "Sarah", country: "Nigeria", job: "Developer"};
console.log(name);//"Sarah"
console.log(country);//"Nigeria"
console.log(job);//Developer"
Variabili dichiarate prima di essere assegnate
Le variabili negli oggetti possono essere dichiarate prima di essere assegnate con la destrutturazione. Proviamoci:
let person = {name: "Sarah", country: "Nigeria", job: "Developer"};
let name, country, job;
{name, country, job} = person;
console.log(name);// Error : "Unexpected token ="
Un momento, cos'è successo?! Oh, abbiamo dimenticato di aggiungere () prima delle parentesi graffe.
Le parentesi ( ) attorno all'istruzione sono richieste dalla sintassi quando usiamo l'assegnazione destrutturante di oggetti letterali senza una dichiarazione. Questo perché le parentesi graffe {} sul lato sinistro sono considerate un blocco e non un oggetto letterale. Dunque, ecco come farlo nel modo corretto:
let person = {name: "Sarah", country: "Nigeria", job: "Developer"};
let name, country, job;
({name, country, job} = person);
console.log(name);//"Sarah"
console.log(job);//"Developer"
È anche importante notare che usando questa sintassi, le parentesi () dovrebbero essere precedute da un punto e virgola. Altrimenti potrebbero essere usate per eseguire una funzione della riga precedente.
Nota che le variabili nell'oggetto sul lato sinistro dovrebbero avere lo stesso nome delle chiavi delle proprietà nell'oggetto person. Se i nomi sono diversi, otterrai undefined:
let person = {name: "Sarah", country: "Nigeria", job: "Developer"};
let {name, friends, job} = person;
console.log(name);//"Sarah"
console.log(friends);//undefined
Ma se vuoi usare un nuovo nome per le variabili, c'è un modo per farlo.
Usare un nuovo nome di variabile
Se vogliamo assegnare i valori di un oggetto a delle nuove variabili invece di usare il nome delle proprietà, possiamo fare in questo modo:
let person = {name: "Sarah", country: "Nigeria", job: "Developer"};
let {name: foo, job: bar} = person;
console.log(foo);//"Sarah"
console.log(bar);//"Developer"
Quindi i valori estratti vengono assegnati alle nuove variabili foo e bar.
Usare valori predefiniti
I valori predefiniti possono anche essere usati nella destrutturazione di oggetti, nel caso in cui una variabile sia undefined nell'oggetto da cui vogliamo estrarre i dati:
let person = {name: "Sarah", country: "Nigeria", job: "Developer"};
let {name = "myName", friend = "Annie"} = person;
console.log(name);//"Sarah"
console.log(friend);//"Annie"
Quindi se il valore non è undefined, la variabile conserva il valore estratto dall'oggetto come nel caso di name. Altrimenti, viene usato il valore predefinito, come nel caso di friend.
Possiamo impostare dei valori predefiniti anche quando assegniamo valori a una nuova variabile:
let person = {name: "Sarah", country: "Nigeria", job: "Developer"};
let {name:foo = "myName", friend: bar = "Annie"} = person;
console.log(foo);//"Sarah"
console.log(bar);//"Annie"
Quindi name è stato estratto da person e assegnato a una variabile diversa. friend, d'altro canto, era undefined in person, quindi alla nuova variabile bar è stato assegnato il valore predefinito.
Computed Property Name
Computed property name è un'altra funzionalità degli oggetti letterali che funziona anche per la destrutturazione. Puoi specificare il nome di una proprietà attraverso un'espressione se lo inserisci in parentesi quadre:
let prop = "name";
let {[prop] : foo} = {name: "Sarah", country: "Nigeria", job: "Developer"};
console.log(foo);//"Sarah"
Combinare array e oggetti
Gli array possono essere usati anche con gli oggetti nella destrutturazione di oggetti:
let person = {name: "Sarah", country: "Nigeria", friends: ["Annie", "Becky"]};
let {name:foo, friends: bar} = person;
console.log(foo);//"Sarah"
console.log(bar);//["Annie", "Becky"]
Annidamento nella destrutturazione di oggetti
Quando operiamo una destrutturazione, gli oggetti possono anche essere annidati:
let person = {
name: "Sarah",
place: {
country: "Nigeria",
city: "Lagos" },
friends : ["Annie", "Becky"]
};
let {name:foo,
place: {
country : bar,
city : x}
} = person;
console.log(foo);//"Sarah"
console.log(bar);//"Nigeria"
Il resto nella destrutturazione di oggetti
La sintassi rest può essere anche usata per scegliere chiavi di proprietà che non sono ancora state raccolte dallo schema di destrutturazione. Queste chiavi e i loro valori vengono copiati in un nuovo oggetto:
let person = {name: "Sarah", country: "Nigeria", job: "Developer" friends: ["Annie", "Becky"]};
let {name, friends, ...others} = person;
console.log(name);//"Sarah"
console.log(friends);//["Annie", "Becky"]
console.log(others);// {country: "Nigeria", job: "Developer"}
Qui, le proprietà rimanenti le cui chiavi non sono comprese tra i nomi delle variabili elencate, sono assegnate alla variabile others. La sintassi rest è ...others. others può essere rinominata in qualsiasi modo desideri.
Un'ultima cosa – vediamo come possiamo usare la destrutturazione di oggetti nelle funzioni.
Destrutturazione di oggetti e funzioni
La destrutturazione di oggetti può essere usata per assegnare parametri a delle funzioni:
function person({name: x, job: y} = {}) {
console.log(x);
}
person({name: "Michelle"});//"Michelle"
person();//undefined
person(friend);//Error : friend is not defined
Nota le parentesi graffe {} sul lato destro dei parametri dell'oggetto. Rendono possibile chiamare la funzione senza passare argomenti. Ecco perché otteniamo undefined. Se le rimuoviamo riceveremo un messaggio di errore.
Possiamo assegnare anche dei valori predefiniti ai parametri:
function person({name: x = "Sarah", job: y = "Developer"} = {}) {
console.log(x);
}
person({name});//"Sarah"
Come abbiamo visto in tutti questi esempi, con la destrutturazione di array e oggetti possiamo fare tante cose.
Grazie per aver letto questo articolo. :)