JavaScript oggetto Destrutturazione

Sommario: in questo tutorial, imparerete a conoscere la destrutturazione oggetto JavaScript che assegna le proprietà di un oggetto a singole variabili.

Se vuoi imparare come destrutturare un array, puoi controllare il tutorial di destrutturazione dell’array.

Introduzione all’assegnazione di destrutturazione dell’oggetto JavaScript

Supponiamo di avere un oggetto person con due proprietà: firstNamee lastName.

Code language: JavaScript (javascript)

Prima ES6, quando si desidera assegnare le proprietà di person oggetto di variabili, in genere si fa così:

Code language: JavaScript (javascript)

ES6 introduce l’oggetto destrutturazione sintassi che fornisce un modo alternativo per assegnare le proprietà di un oggetto di variabili:

Code language: JavaScript (javascript)

In questo esempio, il firstName e lastName proprietà sono assegnati al fName e lName variabili rispettivamente.

In questa sintassi:

Code language: JavaScript (javascript)

L’identificatore prima dei due punti (:) è la proprietà dell’oggetto e l’identificatore dopo i due punti è la variabile.

Si noti che il nome della proprietà è sempre a sinistra se si tratta di una sintassi di destrutturazione oggetto letterale o oggetto.

Se le variabili hanno gli stessi nomi delle proprietà dell’oggetto, è possibile rendere il codice più conciso come segue:

Code language: JavaScript (javascript)

In questo esempio, abbiamo dichiarato due variabili firstName e lastName e assegnato le proprietà dell’oggetto person alle variabili nella stessa istruzione.

È possibile separare la dichiarazione e l’assegnazione. Tuttavia, è necessario circondare le variabili tra parentesi:

Se non si utilizzano le parentesi, il motore JavaScript interpreterà il lato sinistro come un blocco e genererà un errore di sintassi.

Quando si assegna una proprietà che non esiste a una variabile utilizzando la destrutturazione dell’oggetto, la variabile viene impostata su undefined. Ad esempio:

Code language: JavaScript (javascript)

In questo esempio, la proprietà middleName non esiste nell’oggetto person, pertanto la variabile middleNameè undefined.

Impostazione dei valori predefiniti

È possibile assegnare un valore predefinito alla variabile quando la proprietà di un oggetto non esiste. Biru:

Code language: JavaScript (javascript)

In questo esempio, abbiamo assegnato la stringa vuota alla variabile middleName quando l’oggetto person non ha la proprietà middleName.

Inoltre, assegniamo la proprietà currentAge alla variabile age con il valore predefinito di 18.

Tuttavia, quando l’oggetto person ha la proprietà middleName , l’assegnazione funziona come al solito:

Code language: JavaScript (javascript)

Destrutturazione di un oggetto null

Una funzione può restituire un oggetto o null in alcune situazioni. Ad esempio:

Code language: JavaScript (javascript)

E si utilizza l’oggetto destrutturazione assegnazione:

Code language: JavaScript (javascript)

Il codice genererà un TypeError:

Code language: JavaScript (javascript)

Per evitare ciò, è possibile utilizzare l’operatore OR (||) per eseguire il fallback dell’oggetto null su un oggetto vuoto:

Code language: JavaScript (javascript)

Ora, non si verificherà alcun errore. E firstName e lastName saranno undefined.

Destrutturazione dell’oggetto nidificato

Supponendo di avere un oggetto employee che ha un oggetto name come proprietà:

Code language: JavaScript (javascript)

La seguente istruzione destruttura le proprietà dell’oggetto nidificato name in singole variabili:

Code language: JavaScript (javascript)

È possibile fare più di assegnazione di un immobile a più variabili:

Code language: JavaScript (javascript)

Destrutturazione gli argomenti della funzione

si Supponga di avere una funzione che visualizza l’oggetto di persona:

Code language: JavaScript (javascript)

È possibile destructure oggetto argomento passato alla funzione come questa:

Code language: JavaScript (javascript)

sembra meno prolisso, soprattutto quando si utilizzano molte proprietà dell’argomento in oggetto. Questa tecnica è spesso utilizzata in React.

Sommario

• Oggetto destrutturazione assegna le proprietà di un oggetto a variabili con gli stessi nomi per impostazione predefinita.