Assegnazione Destrutturante in JavaScript
Impara la destrutturazione in JavaScript: spacchetta array e object, imposta valori predefiniti, rinomina variabili, usa pattern nidificati e rest, scambia variabili e destruttura parametri di funzione.
Comprendere la Destrutturazione in JavaScript
L'assegnazione destrutturante è una sintassi che consente di estrarre valori da array o proprietà da object in variabili distinte in un'unica istruzione compatta. Introdotta in ES6 (ES2015), sostituisce l'accesso ripetitivo proprietà per proprietà e rende il codice che lavora con dati strutturati molto più leggibile.
Senza destrutturazione si scrive codice come questo:
Con la destrutturazione, la stessa intenzione si esprime su una sola riga. Il resto di questo capitolo tratta le forme per array e object, i valori predefiniti, la rinominazione, i pattern nidificati, il pattern rest, lo scambio di variabili, la destrutturazione dei parametri di funzione e il problema comune di ({ a } = {}).
Destrutturazione degli Array: Estrarre gli Elementi
La destrutturazione degli array assegna gli elementi dell'array a variabili distinte in base alla loro posizione (indice). Le variabili a sinistra rispecchiano l'ordine dei valori a destra. È particolarmente utile per i valori di ritorno delle funzioni e per l'iterazione su coppie chiave/valore.
Destrutturazione di Base degli Array
Una variabile senza un elemento corrispondente diventa undefined, ed è qui che entrano in gioco i valori predefiniti (vedi sotto).
Saltare Elementi e Valori Predefiniti
Lascia un "vuoto" (uno slot vuoto tra virgole) per saltare gli elementi di cui non hai bisogno. Aggiungi = value per assegnare a una variabile un valore di riserva che viene utilizzato solo quando il valore estratto è undefined:
Poiché la destrutturazione funziona su qualsiasi iterabile, si abbina naturalmente con il pattern rest per raccogliere gli elementi rimanenti:
Destrutturazione degli Object: Estrarre le Proprietà
La destrutturazione degli object offre un modo conveniente per estrarre più proprietà dagli object. Questa tecnica può migliorare la gestione degli object di configurazione o l'elaborazione di dati provenienti da strutture complesse.
Destrutturazione Semplice degli Object
A differenza degli array, la destrutturazione degli object fa la corrispondenza in base al nome della proprietà, non alla posizione, quindi l'ordine delle chiavi nel pattern non ha importanza.
Rinominare le Variabili e Impostare i Valori Predefiniti
Usa la sintassi nomeProprietà: nuovoNome per assegnare una proprietà a una variabile con un nome diverso — utile quando il nome della proprietà è in conflitto con una variabile esistente o non è un identificatore valido. I valori predefiniti funzionano allo stesso modo degli array:
Puoi rinominare e fornire un valore predefinito allo stesso tempo con proprietà: nuovoNome = predefinito:
Tecniche Avanzate di Destrutturazione
La destrutturazione avanzata comprende strutture nidificate e l'uso del parametro rest per aggregare proprietà o elementi rimanenti.
Destrutturazione Nidificata
I pattern possono essere nidificati per accedere in profondità a object e array allo stesso tempo. La forma del pattern rispecchia semplicemente la forma dei dati:
Nota che size: e items: qui non sono variabili — sono solo il percorso nella struttura. Solo width, height, item1 e item2 diventano variabili.
Usare il Pattern Rest
Il pattern rest (...nome) raccoglie tutte le proprietà rimanenti non destrutturate in un nuovo object. Per saperne di più, consulta Parametri Rest e Sintassi Spread:
Applicazioni Pratiche della Destrutturazione
La destrutturazione si rivela preziosa in varie applicazioni pratiche, come:
- Scambio di Variabili: Semplifica il processo di scambio di valori tra variabili.
- Gestione dei Parametri di Funzione: Migliora la gestione di più parametri, in particolare per funzioni con numerosi parametri opzionali.
Scambio di Variabili
La destrutturazione permette di scambiare due valori senza una variabile temporanea. L'array sul lato destro viene costruito prima, poi spacchettato nelle variabili a sinistra:
Parametri di Funzione
Destrutturare un parametro permette a una funzione di accettare un "object di opzioni" ed estrarre le impostazioni nominate con valori predefiniti sensati — molto più pulito di una lunga lista di parametri sensibile all'ordine. Il = {} finale è ciò che consente al chiamante di omettere completamente l'argomento:
Per saperne di più sui parametri, consulta il capitolo Funzioni JavaScript.
Il Problema di ({ a } = {})
Quando si destruttura una variabile esistente (non in una dichiarazione const/let), è necessario racchiudere l'istruzione tra parentesi. Altrimenti JavaScript interpreta la { iniziale come l'inizio di un blocco di codice, non di un pattern object, e genera un errore di sintassi:
Le parentesi sono necessarie solo per la destrutturazione di object in variabili già dichiarate. La destrutturazione degli array ([a, b] = [1, 2]) non ha questo problema perché [ non inizia mai un blocco di istruzioni.
Un problema correlato: quando sia la variabile che il suo valore predefinito provengono da una sorgente che potrebbe essere assente, assegna all'intero parametro un valore predefinito di {} (come in drawChart sopra). Senza di esso, chiamare la funzione senza argomenti genera un errore, perché non è possibile leggere una proprietà da undefined.
Conclusione
La destrutturazione in JavaScript è una funzionalità potente che offre codice più leggibile, conciso e manutenibile. Adottando questo approccio, gli sviluppatori possono gestire in modo efficiente l'estrazione di dati da array e object, dando luogo a strutture di codice più pulite ed efficaci.