Una reintroduzione all'assegnazione di destrutturazione

Se scrivi JavaScript probabilmente hai familiarità con ES2015 e tutti i nuovi standard linguistici che sono stati introdotti. Uno di questi standard che ha visto un'incredibile popolarità è l'assegnazione di destrutturazione. La capacità di "immergersi" in un array o in un oggetto e fare riferimento a qualcosa al suo interno in modo più diretto. Di solito va qualcosa del genere.

 const response = { status: 200, data: {} } // instead of response.data we get... const {data} = response //now data references the data object directly const objectList = [ { key: 'value' }, { key: 'value' }, { key: 'value' } ] // instead of objectList[0], objectList[1], etc we get... const [obj, obj1, obj2] = objectList // now each object can be referenced directly

Tuttavia, l'assegnazione di destrutturazione è un pezzo di sintassi così potente che molti sviluppatori, anche quelli che lo utilizzano da quando è stato rilasciato per la prima volta, dimenticano alcune delle cose che può fare. In questo post, esamineremo cinque esempi del mondo reale per la destrutturazione di oggetti e array, a volte entrambi! E solo per divertimento, includerò un esempio strano che mi sono imbattuto proprio l'altro giorno.

1. Destrutturazione annidata

Essere in grado di accedere a una chiave di primo livello all'interno di un oggetto o al primo elemento di un array è potente, ma è anche alquanto limitante. Rimuove solo un livello di complessità e finiamo comunque con una serie di punti o [0] riferimenti per accedere a ciò che stiamo veramente cercando.

A quanto pare, la destrutturazione può funzionare oltre il livello superiore. E possono esserci validi motivi per farlo. Prendi questo esempio di risposta di un oggetto da una richiesta HTTP. Vogliamo andare oltre l'oggetto dati e accedere solo all'utente. Finché conosciamo le chiavi che stiamo cercando, non è un problema.

 const response = { status: 200, data: { user: { name: 'Rachel', title: 'Editor in Chief' }, account: {}, company: 'Smashing Magazine' } } const {data: {user}} = response // user is { name: 'Rachel', title: 'Editor in Chief'}

Lo stesso può essere fatto con gli array nidificati. In questo caso, non è necessario conoscere la chiave poiché non ce n'è. Quello che devi sapere è la posizione di ciò che stai cercando. Dovrai fornire una variabile di riferimento (o un segnaposto virgola) per ogni elemento fino a quello che stai cercando (ci arriveremo più avanti). La variabile può essere denominata qualsiasi cosa poiché non sta tentando di trovare una corrispondenza con un valore all'interno dell'array.

 const smashingContributors = [['rachel', ['writer', 'editor', 'reader']], ['laurie', ['writer', 'reader']]] const [[rachel, roles]] = smashingContributors // rachel is 'rachel' // roles is [ 'writer', 'editor', 'reader' ]

Tieni presente che queste funzionalità dovrebbero essere utilizzate con giudizio, come con qualsiasi strumento. Riconosci il tuo caso d'uso e il pubblico della tua base di codice. Considera la leggibilità e la facilità di modifica lungo la strada. Ad esempio, se stai cercando di accedere solo a un sottoarray, forse una mappa sarebbe più adatta.

2. Destrutturazione di oggetti e array

Gli oggetti e gli array sono strutture di dati comuni. Così comune, infatti, che spesso l'uno compare dentro l'altro. Oltre alla destrutturazione nidificata, possiamo accedere alle proprietà nidificate anche se si trovano in un tipo di struttura dati diverso da quella esterna a cui stiamo accedendo.

Prendi questo esempio di un array all'interno di un oggetto.

 const organization = { users: ['rachel', 'laurie', 'eric', 'suzanne'], name: 'Smashing Magazine', site: 'https://www.smashingmagazine.com/' } const {users:[rachel]} = organization // rachel is 'rachel'

Vale anche il caso d'uso opposto. Una serie di oggetti.

 const users = [{name: 'rachel', title: 'editor'}, {name: 'laurie', title: 'contributor'}] const [{name}] = users // name is 'rachel'

A quanto pare, in questo esempio abbiamo un piccolo problema. Possiamo accedere solo al nome del primo utente; in caso contrario, proveremo a utilizzare 'name' per fare riferimento a due stringhe diverse, che non sono valide. Il nostro prossimo scenario di destrutturazione dovrebbe risolverlo.

3. Alias

Come abbiamo visto nell'esempio sopra (quando abbiamo tasti ripetuti all'interno di oggetti diversi che vogliamo estrarre), non possiamo farlo nel modo "tipico". I nomi delle variabili non possono essere ripetuti nello stesso ambito (questo è il modo più semplice per spiegarlo, ovviamente è più complicato di così).

 const users = [{name: 'rachel', title: 'editor'}, {name: 'laurie', title: 'contributor'}] const [{name: rachel}, {name: laurie}] = users // rachel is 'rachel' and laurie is 'laurie'

L'alias è applicabile solo agli oggetti. Questo perché gli array possono utilizzare qualsiasi nome di variabile scelto dallo sviluppatore, invece di dover corrispondere a una chiave dell'oggetto esistente.

4. Valori predefiniti

La destrutturazione spesso presuppone che il valore a cui fa riferimento sia presente, ma se non lo fosse? Non è mai piacevole sporcare codice con valori indefiniti. È allora che i valori predefiniti tornano utili.

Diamo un'occhiata a come funzionano per gli oggetti.

 const user = {name: 'Luke', organization: 'Acme Publishing'} const {name='Brian', role='publisher'} = user // name is Luke // role is publisher

Se la chiave di riferimento ha già un valore, il valore predefinito viene ignorato. Se la chiave non esiste nell'oggetto, viene utilizzata l'impostazione predefinita.

Possiamo fare qualcosa di simile per gli array.

 const roleCounts = [2] const [editors = 1, contributors = 100] = roleCounts // editors is 2 // contributors is 100

Come per l'esempio degli oggetti, se il valore esiste, il valore predefinito viene ignorato. Osservando l'esempio sopra, potresti notare che stiamo destrutturando più elementi di quanti ne esistano nell'array. Che ne dici di destrutturare meno elementi?

5. Ignorare i valori

Una delle parti migliori della destrutturazione è che consente di accedere a valori che fanno parte di una struttura di dati più ampia. Ciò include isolare quei valori e ignorare il resto del contenuto, se lo desideri.

In realtà ne abbiamo visto un esempio prima, ma isoliamo il concetto di cui stiamo parlando.

 const user = {name: 'Luke', organization: 'Acme Publishing'} const {name} = user // name is Luke

In questo esempio, non destrutturiamo mai l' organization e va perfettamente bene. È ancora disponibile per riferimento all'interno dell'oggetto user , in questo modo.

 user.organization

Per gli array, ci sono in realtà due modi per "ignorare" gli elementi. Nell'esempio degli oggetti ci riferiamo specificamente ai valori interni usando il nome della chiave associato. Quando gli array vengono destrutturati, il nome della variabile viene assegnato per posizione. Iniziamo ignorando gli elementi alla fine dell'array.

 const roleCounts = [2, 100, 100000] const [editors, contributors] = roleCounts // editors is 2 // contributors is 100

Destrutturiamo il primo e il secondo elemento dell'array e il resto è irrilevante. Ma che ne dici di elementi successivi? Se è basato sulla posizione, non dobbiamo destrutturare ogni elemento fino a raggiungere quello che vogliamo?

A quanto pare, non lo facciamo. Invece, usiamo le virgole per implicare l'esistenza di quegli elementi, ma senza variabili di riferimento vengono ignorati.

 const roleCounts = [2, 100, 100000] const [, contributors, readers] = roleCounts // contributors is 100 // readers is 100000

E possiamo fare entrambe le cose contemporaneamente. Saltare gli elementi dove vogliamo usando il segnaposto della virgola. E ancora, come nell'esempio dell'oggetto, gli elementi "ignorati" sono ancora disponibili come riferimento all'interno dell'array roleCounts .

Esempio stravagante

La potenza e la versatilità della destrutturazione significano anche che puoi fare cose davvero bizzarre. Se torneranno utili o meno è difficile da dire, ma vale la pena sapere che è un'opzione!

Uno di questi esempi è che puoi usare la destrutturazione per creare copie poco profonde.

 const obj = {key: 'value', arr: [1,2,3,4]} const {arr, arr: copy} = obj // arr and copy are both [1,2,3,4]

Un'altra cosa per cui la destrutturazione può essere utilizzata è la dereferenziazione.

 const obj = {node: {example: 'thing'}} const {node, node: {example}} = obj // node is { example: 'thing' } // example is 'thing'

Come sempre, la leggibilità è della massima importanza e tutti questi esempi dovrebbero essere usati a livello giudiziario. Ma conoscere tutte le tue opzioni ti aiuta a scegliere quella migliore.

Conclusione

JavaScript è pieno di oggetti e array complessi. Che si tratti della risposta di una richiesta HTTP o di set di dati statici, essere in grado di accedere in modo efficiente al contenuto incorporato è importante. Usare l'assegnazione di destrutturazione è un ottimo modo per farlo. Non solo gestisce più livelli di annidamento, ma consente un accesso mirato e fornisce impostazioni predefinite in caso di riferimenti non definiti.

Anche se hai usato la destrutturazione per anni, ci sono così tanti dettagli nascosti nelle specifiche. Spero che questo articolo abbia agito come promemoria degli strumenti che la lingua ti offre. La prossima volta che scriverai del codice, forse uno di questi ti tornerà utile!