Il moderno JavaScript ha molte nuove funzionalità che semplificano la scrittura di codice in modo semplice e strutturato. Una delle utili funzionalità moderne disponibili in ES6+ è la destrutturazione di array e oggetti.
Framework JavaScript come React.js e Angular incoraggiano l'uso di questa tecnica. Quindi è essenziale capire cos'è la destrutturazione e come usarla durante la scrittura del codice.
Che cos'è la destrutturazione di oggetti e array in JavaScript?
La destrutturazione in JavaScript si riferisce al processo di decompressione dei valori da un array o da un oggetto. Fornisce un modo più conciso per ottenere valori da matrici o oggetti senza operazioni pesanti quando sei interessato a singoli elementi o valori di matrici in un oggetto.
È utile anche durante l'elaborazione dei valori restituiti da una funzione o un'espressione complessa. Questo concetto è uno dei
best practice da seguire durante la scrittura del codice React.Come destrutturare gli array
Ecco un codice di esempio per avere un'idea della destrutturazione dell'array:
cost ar = [1, 2];
cost [a, b] = arr;
consolare.log (a) // stampa 1 sulla console
consolare.log (b) // stampa 2 sulla console
Questo codice utilizza la destrutturazione per assegnare i valori da arr—1 e 2 — alle variabili UN E B, rispettivamente. Questo è il concetto fondamentale alla base della destrutturazione. Hai un array o un oggetto sul lato destro e decomprimi gli elementi e li assegni a singole variabili sul lato sinistro.
Sotto il cofano, JavaScript copia i valori da arr e li assegna alle variabili sul lato sinistro in questo modo:
cost ar = [1,2];
cost a = arr[0];
cost b = arr[1];
Come puoi vedere, la destrutturazione è un modo più conciso per farlo, a differenza dell'uso dell'oggetto o della notazione tra parentesi. Tuttavia, questa sintassi sarà probabilmente utile quando si lavora con matrici o funzioni complesse che restituiscono matrici o stringhe.
Controlla il codice di esempio qui sotto:
cost [giorno, mese, data, anno, ora, fuso orario] = Data().diviso(' ')
// Calling Date() restituisce la data corrente nel formato:
// lun 20 febbraio 2023 13:07:29 GMT+0000
consolare.log (giorno) // stampa lun
consolare.log (mese) // stampa Feb
consolare.log (data) // stampa 20
In questo esempio di codice, creiamo una nuova stringa con la data corrente chiamando Data(). Successivamente, usiamo diviso(), UN Metodo stringa JavaScript, per separare gli elementi nella stringa usando lo spazio come separatore. diviso(' ') restituisce un array e usiamo la destrutturazione per assegnare i valori alle singole variabili.
Ricorda che se il tuo array contiene più elementi di quelli che stai decomprimendo, JavaScript ignorerà gli elementi extra.
cost ar = [1, 2, 3, 4];
cost [a, b] = arr;
consolare.log (a) // stampa 1
consolare.log (b) // stampa 2
// i valori 3 e 4 non sono assegnati ad alcuna variabile; vengono ignorati
In questo caso, se vuoi memorizzare gli elementi rimanenti in una variabile, usa un parametro rest come questo:
cost ar = [1, 2, 3, 4];
cost [a, b, ...riposo] = arr;
consolare.log (riposo) // stampa [3,4]
A volte, potresti non interessarti a un oggetto specifico. Il modello di destrutturazione di JavaScript consente inoltre di saltare determinati elementi utilizzando una virgola vuota.
cost ar = [1, 2, 3, 4];
cost [a,, c] = arr;
consolare.log (c) // stampa 3
Il codice sopra usa lo spazio vuoto per ignorare il valore 2 nella matrice arr. Invece di assegnare valore 2 a variabile C, passa all'elemento successivo nell'array. Ignora anche il quarto valore perché non specifica una variabile in cui memorizzarlo.
Al contrario, se hai bisogno di meno articoli di quelli che stai disimballando, il processo assegnerà il file non definito valore a quelle variabili extra.
cost ar = [1];
cost [a, b] = arr;
consolare.log (a) // stampa 1
consolare.log (b) // stampa undefined
Per evitare di avere variabili non definite, puoi impostare valori predefiniti se non sei sicuro della lunghezza dell'array come segue (l'assegnazione di valori predefiniti non è un requisito):
cost ar = [1];
cost [un = '10', b = 'non fornito'] = arr;
consolare.log (a) // stampa 1
consolare.log (b) // stampa "non fornito"
Questa destrutturazione assegna il valore 1 a variabile UN, sovrascrivendo il suo valore predefinito. Variabile B mantiene il valore predefinito perché non viene fornito un valore.
Come destrutturare gli oggetti
La destrutturazione degli oggetti non è molto diversa dagli array. L'unica differenza è che gli array sono iterabili e gli oggetti no, risultando in un modo leggermente diverso di fare le cose.
Quando si lavora con gli oggetti, anche le variabili sul lato sinistro dell'operatore di assegnazione vengono inizializzate come oggetti:
cost persona = {nome: 'Alvin', età: 10, altezza: 1};
cost {nome, età, altezza} = persona;
consolare.log (nome) // stampa 'Alvin'
consolare.log (altezza) // stampa 1
Dal codice, stiamo usando i nomi delle proprietà da persona oggetto. Tuttavia, non è necessario utilizzare i nomi esatti delle proprietà nell'oggetto. È possibile destrutturare e memorizzare i valori in diversi nomi di variabile come segue:
cost persona = {nome: 'Alvin', età: 10, altezza: 1};
cost {nome: nome di battesimo, età: anni, altezza: currentHeight} = persona;
consolare.log (nome) // stampa 'Alvin'
consolare.log (altezza corrente) // stampa 1
Si inizia specificando il valore della proprietà che si desidera destrutturare, quindi si specifica il nome della variabile che si utilizzerà per memorizzare il valore dopo i due punti. E come gli array, sarà la destrutturazione di un nome di proprietà che non esiste non definito.
Per gestire ciò, puoi allo stesso modo specificare i valori predefiniti nel caso in cui il nome della proprietà che desideri assegnare a una variabile non sia disponibile:
cost persona = {nome: 'Alvin', età: 10, altezza: 1};
cost {nome, età, altezza, posizione='In tutto il mondo'} = persona;
consolare.log (nome) // stampa 'Alvin'
consolare.log (posizione) // stampa 'in tutto il mondo'
L'ordine delle variabili sul lato sinistro non ha importanza con un oggetto poiché gli oggetti memorizzano i valori in coppie chiave-valore. Pertanto, il codice seguente produrrà gli stessi risultati:
cost persona = {nome: 'Alvin', età: 10, altezza: 1};
cost {età, altezza, nome} = persona;
consolare.log (nome) // stampa 'Alvin'
consolare.log (altezza) // stampa 1
Infine, analogamente agli array, puoi anche utilizzare il parametro rest per destrutturare diversi valori in una variabile in questo modo:
cost persona = {nome: 'Alvin', età: 10, altezza: 1};
cost {nome,... resto} = persona;
consolare.log (nome) // stampa 'Alvin'
consolare.log (riposo) // stampa { età: 10, altezza: 1 }
Basta notare che il parametro rest deve sempre essere l'ultimo. In caso contrario, JavaScript genererà un'eccezione.
Migliora la qualità del tuo codice con la destrutturazione di JavaScript
Le funzionalità moderne di Javascript, come la destrutturazione, ti consentono di scrivere codice altamente leggibile. Utilizzando la destrutturazione, puoi decomprimere rapidamente i valori da matrici e oggetti. La destrutturazione può anche rivelarsi utile in altre situazioni, come scambiare i valori di due variabili. Si spera che ora tu capisca cosa significa destrutturazione in JavaScript e che tu possa essere in grado di usarlo mentre scrivi il codice.
