Come usare la destrutturazione degli oggetti in JavaScript

La destrutturazione degli oggetti è un’utile funzione JavaScript per estrarre proprietà dagli oggetti e legarli alle variabili.

Cosa c’è di meglio, la destrutturazione degli oggetti può estrarre più proprietà in un’istruzione, può accedere alle proprietà dagli oggetti nidificati e può impostare un valore predefinito se la proprietà non esiste.

In questo post, spiegherò come utilizzare la destrutturazione degli oggetti in JavaScript.

1. La necessità di destrutturazione dell’oggetto

Immagina di voler estrarre alcune proprietà di un oggetto. In un ambiente pre-ES2015, è necessario scrivere il seguente codice:

var hero = { name: 'Batman', realName: 'Bruce Wayne'};var name = hero.name;var realName = hero.realName;name; // => 'Batman',realName; // => 'Bruce Wayne'

Il valore della proprietà hero.name viene assegnato alla variabile name. Allo stesso modo il valore hero.realName viene assegnato a realName.

Un modo per accedere alle proprietà e assegnarle alle variabili richiede codice boilerplate. Scrivendo var name = hero.name, devi menzionare il namevincolante 2 volte, e lo stesso per realName.

Ecco dove è utile la sintassi di destrutturazione dell’oggetto: puoi leggere una proprietà e assegnare il suo valore a una variabile senza duplicare il nome della proprietà. Inoltre, puoi leggere più proprietà dallo stesso oggetto in una sola istruzione!

Rifattorizziamo lo script precedente e applichiamo la destrutturazione dell’oggetto per accedere alle proprietà name e realName:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { name, realName } = hero;name; // => 'Batman',realName; // => 'Bruce Wayne'

const { name, realName } = hero è un oggetto destrutturazione assegnazione. Questa istruzione definisce le variabili name e realName, quindi assegna loro i valori delle proprietà hero.name e hero.realName corrispondentemente.

Confronto tra i 2 approcci per accedere alle proprietà dell’oggetto:

const name = hero.name;const realName = hero.realName;// is equivalent to:const { name, realName } = hero;

è visibile che la destrutturazione dell’oggetto è più maneggevole perché né i nomi delle proprietà né la variabile oggetto sono duplicati.

2. Estrazione di una proprietà

La sintassi di base della destrutturazione degli oggetti è piuttosto semplice:

const { identifier } = expression;

Dove identifier è il nome della proprietà a cui accedere e expression dovrebbe valutare un oggetto. Dopo la destrutturazione, la variabile identifier contiene il valore della proprietà.

Ecco il codice equivalente utilizzando una proprietà della funzione di accesso:

const identifier = expression.identifier;

proviamo oggetto destrutturazione in pratica:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { name } = hero;name; // => 'Batman'

L’istruzione const { name } = hero definisce la variabile name e la inizializza con il valore di hero.name proprietà.

3. Estrazione di più proprietà

Per destrutturare l’oggetto in più proprietà, enumerare tutte le proprietà che si desidera aggiungendo virgole , in-between:

const { identifier1, identifier2, ..., identifierN } = expression;

Dove identifier1, …, identifierN sono nomi di proprietà a cui accedere e expression dovrebbe valutare un oggetto. Dopo la destrutturazione, le variabili identifier1, …, identifierN contengono i valori delle proprietà corrispondenti.

Ecco il codice equivalente:

const identifier1 = expression.identifier1;const identifier2 = expression.identifier2;// ...const identifierN = expression.identifierN;

Diamo un’occhiata di nuovo all’esempio dalla prima sezione, dove vengono estratte 2 proprietà:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { name, realName } = hero;name; // => 'Batman',realName; // => 'Bruce Wayne'

const { name, realName } = hero crea 2 variabili name e realName assegnate con i valori delle proprietà corrispondenti hero.namee hero.realName.

4. Valori predefiniti

Se l’oggetto destrutturato non ha la proprietà specificata nell’assegnazione destrutturazione, alla variabile viene assegnato undefined. Vediamo come succede:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { enemies } = hero;enemies; // => undefined

Dopo la destrutturazione la variabile enemies è undefined perché la proprietà enemiesnon esiste nell’oggetto hero.

Fortunatamente, è possibile impostare un valore predefinito se la proprietà non esiste nell’oggetto destrutturato. Ecco la sintassi di base:

const { identifier = defaultValue } = expression;

Dove identifier è il nome della proprietà a cui accedere e expression dovrebbe valutare un oggetto. Dopo la destrutturazione, la variabile identifier contiene il valore della proprietà o viene assegnata con defaultValue se la proprietà identifier non esiste.

Ecco il codice equivalente:

const identifier = expression.identifier === undefined ? defaultValue : expression.identifier;

Cambiamo l’esempio di codice precedente e usiamo la funzione valore predefinito:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { enemies = } = hero;enemies; // => 

Ora, invece di essere undefined, la variabile enemies è impostata su .

5. Alias

Se si desidera creare variabili con nomi diversi rispetto alle proprietà, è possibile utilizzare la funzione di aliasing di destrutturazione degli oggetti.

const { identifier: aliasIdentifier } = expression;

identifier è il nome della proprietà a cui accedere, aliasIdentifier è il nome della variabile e expression dovrebbe valutare un oggetto. Dopo la destrutturazione, la variabile aliasIdentifier contiene il valore della proprietà.

Il codice equivalente:

const aliasIdentifier = expression.identifier;

Ecco un esempio di oggetto destrutturazione funzione di alias:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { realName: secretName } = hero;secretName; // => 'Bruce Wayne'

Guardando const { realName: secretName } = hero, il destucturing definisce una nuova variabile secretName (alias variabile), e le assegna il valore hero.realName.

6. Estrazione di proprietà da oggetti nidificati

Negli esempi precedenti, gli oggetti erano semplici: le proprietà hanno tipi di dati primitivi (ad esempio stringhe).

Spesso gli oggetti possono essere nidificati in altri oggetti. In altre parole, alcune proprietà possono contenere oggetti.

In tal caso, è comunque possibile utilizzare la destrutturazione dell’oggetto e accedere alle proprietà da deep. Ecco la sintassi di base:

const { nestedObjectProp: { identifier } } = expression;

nestedObjectProp è il nome della proprietà che contiene un oggetto nidificato. identifier è il nome della proprietà a cui accedere dall’oggetto nidificato. expression dovrebbe valutare l’oggetto destrutturato.

Dopo la destrutturazione, la variabile identifier contiene il valore della proprietà dell’oggetto nidificato.

La sintassi di cui sopra è equivalente a:

const identifier = expression.nestedObjectProp.identifier;

Il livello di nidificazione da cui è possibile estrarre le proprietà è illimitato. Se si desidera estrarre le proprietà da deep, è sufficiente aggiungere più parentesi graffe nidificate:

const { propA: { propB: { propC: { .... } } } } = object;

Ad esempio, l’oggetto hero contiene un oggetto nidificato { city: 'Gotham'}.

const hero = { name: 'Batman', realName: 'Bruce Wayne', address: { city: 'Gotham' }};// Object destructuring:const { address: { city } } = hero;city; // => 'Gotham'

L’oggetto destrutturazione const { address: { city } } = hero consente di accedere alla proprietà city dall’oggetto nidificato.

7. Estrazione di una proprietà nome dinamico

È possibile estrarre in variabili proprietà con un nome dinamico (il nome della proprietà è noto in fase di runtime):

const { : identifier } = expression;

propName expression dovrebbe valutare un nome di proprietà (di solito una stringa) e identifier dovrebbe indicare il nome della variabile creato dopo la destrutturazione. Il secondo expression dovrebbe valutare l’oggetto che desideri distruggere.

Un codice equivalente senza oggetto destrutturazione:

const identifier = expression;

vediamo un esempio in cui prop > contiene il nome della proprietà:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const prop = 'name';const { : name } = hero;name; // => 'Batman'

const { : name } = hero è un oggetto destrutturazione che assegna alla variabile name valore hero, dove prop è una variabile che tiene il nome della proprietà.

8. Oggetto Rest dopo la destrutturazione

La sintassi rest è utile per raccogliere le proprietà rimanenti dopo la destrutturazione:

const { identifier, ...rest } = expression;

Dove identifier è il nome della proprietà a cui accedere e expression dovrebbe valutare un oggetto.

Dopo la destrutturazione, la variabile identifier contiene il valore della proprietà. rest variabile è un oggetto semplice con le proprietà rimanenti.

Ad esempio, estraiamo la proprietà name, ma manteniamo il resto delle proprietà:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { name, ...realHero } = hero;realHero; // => { realName: 'Bruce Wayne' }

La destrutturazione const { name, ...realHero } = hero estrae la proprietà name.

Allo stesso tempo, le proprietà rimanenti (realName in questo caso) vengono raccolte nella variabile realHero: { realName: 'Bruce Wayne' }.

9. Casi d’uso comuni

9.1 Proprietà Bind alle variabili

Come visto in molti esempi prima, l’oggetto destrutturazione lega i valori delle proprietà alle variabili.

La destrutturazione dell’oggetto può assegnare valori alle variabili dichiarate utilizzando const, lete var. O anche assegnare a una variabile già esistente.

Ad esempio, ecco come destrutturare usando l’istruzione let :

// letconst hero = { name: 'Batman',};let { name } = hero;name; // => 'Batman'

Come destructure utilizzando var istruzione:

// varconst hero = { name: 'Batman',};var { name } = hero;name; // => 'Batman'

E come destructure a una variabile dichiarata:

// existing variablelet name;const hero = { name: 'Batman',};({ name } = hero);name; // => 'Batman'

io trovo soddisfacente per combinare for..of ciclo con oggetto destrutturazione per estrarre il diritto di proprietà di distanza:

const heroes = ;for (const { name } of heroes) { console.log(name); // logs 'Batman', 'Joker'}

9.2 Parametro di funzione destrutturazione

in generale, l’oggetto destrutturazione può essere posizionato in qualsiasi punto in cui assegnazione avviene.

Ad esempio, è possibile distruggere un oggetto all’interno dell’elenco dei parametri di una funzione:

const heroes = ;const names = heroes.map( function({ name }) { return name; });names; // => 

function({ name }) destruttura il parametro della funzione, creando una variabile name che contiene il valore della proprietà name.

10. Sommario

La destrutturazione dell’oggetto è una potente funzionalità che consente di estrarre le proprietà da un oggetto e associare questi valori alle variabili.

Mi piace particolarmente la destrutturazione degli oggetti è la sintassi concisa e la capacità di estrarre più variabili in un’unica istruzione.

Speriamo che il mio post ti abbia aiutato a vedere quanto sia utile la destrutturazione degli oggetti!