Negli ultimi anni, i cibi destrutturati sono diventati di gran moda tra i buongustai, per cui gli chef scompongono i piatti secondo la loro idea centrale (destrutturazione) e poi li ricostruiscono dai loro componenti di base (ristrutturazione). Cosa c’entra questo con JavaScript? Inoltre, supporta anche la destrutturazione e la ristrutturazione di Array e Oggetti. Fino al rilascio di ECMAScript 6 (ES6), la parte di destrutturazione dell’equazione era molto più difficile da ottenere rispetto alla ristrutturazione, poiché richiedeva diverse righe di codice. Ora, la possibilità di destrutturare un array o un oggetto in una riga di codice offre numerose possibilità di codifica. In questo tutorial sullo sviluppo web, ci concentreremo sulla destrutturazione degli oggetti oggi; il prossimo articolo si concentrerà sulla destrutturazione mista (Object e Array), insieme ad alcuni dei suoi usi più avanzati.

Stai cercando di imparare lo sviluppo web in un formato di corso online? Dai un’occhiata al nostro elenco di alcuni dei migliori Corsi di sviluppo web e HTML.

Nozioni di base sulla destrutturazione di JavaScript

Il Caratteristiche avanzate dell’array TypeScript/ES6 l’articolo ha toccato la destrutturazione degli array e ha confrontato la nuova sintassi ES6 con quella delle versioni precedenti di JavaScript (JS). Ad esempio, abbiamo assegnato gli elementi di un array a quattro variabili separate:

// in pre-ES6 Javascript
var ivoryKnightMembers = ['John', 'Rob', 'George', 'Steve'];
var john   = ivoryKnightMembers[0], 
    rob    = ivoryKnightMembers[1],
    George = ivoryKnightMembers[2], 
    Steve  = ivoryKnightMembers[3];

// using ES6 destructuring
let ivoryKnightMembers = ['John', 'Rob', 'George', 'Steve'];
let [john, rob, george, steve] = ivoryKnightMembers;

In quel tutorial JavaScript, abbiamo definito la destrutturazione come una funzionalità di EcmaScript 2015 e Typescript che consente di suddividere la struttura di un’entità. Sebbene tale definizione fosse sufficiente nel contesto dell’argomento in questione, ometteva alcuni altri punti sulla destrutturazione, come ad esempio:

• Può essere applicato a una struttura complessa (ad esempio, un array o un oggetto).
• Può essere utilizzato sia per l’assegnazione di variabili che per la dichiarazione di variabili.
• Supporta la sintassi di destrutturazione nidificata per gestire le strutture nidificate.

Quindi copriamo ciascuno di questi punti a turno mentre si applicano agli oggetti.

Esempi di destrutturazione di oggetti in JavaScript

Il frammento di codice sopra è un esempio di destrutturazione di Array in un’assegnazione di variabile. Poiché gli oggetti JS memorizzano i loro attributi come array associativi, possiamo anche inserire un valore letterale Object sul lato sinistro di un’espressione di assegnazione per la destrutturazione dell’oggetto:

const band = {
    drummer: 'George',
    bassist: 'Steve',
    guitarist: 'Rob',
    vocalist: 'John'
};

// Object Destructuring
const { drummer, bassist, guitarist, vocalist } = band;

// Outputs "George, Steve, Rob, John"
console.log(drummer, bassist, guitarist, vocalist); 

Assegnazione di nuovi valori a variabili locali

Il frammento di codice successivo mostra come utilizzare la destrutturazione degli oggetti per assegnare nuovi valori alle variabili locali. Si noti che dobbiamo usare una coppia di parentesi racchiuse (()) nell’espressione di assegnazione. In caso contrario, il valore letterale dell’oggetto destrutturante verrà considerato come un’istruzione di blocco, che genererà un errore perché un blocco non può apparire sul lato sinistro di un’espressione di assegnazione:

// Initialize local variables
let drummer="George";
let bassist="Steve";
let guitarist="Rob";
let vocalist="John";

const band = {
    drummer: 'George',
    bassist: 'Steve',
    guitarist: 'Rob',
    vocalist: 'John'
};

// Reassign firstname and lastname using destructuring
// Enclose in a pair of parentheses, since this is an assignment expression
({ drummer, guitarist } = band);

// bassist and vocalist remain unchanged
// Outputs "George, Steve, Rob, John"
console.log(drummer, bassist, guitarist, vocalist);  

Assegnazione di valori di default e destrutturazione in JS

L’assegnazione della destrutturazione è molto flessibile, consentendo di assegnare variabili che non corrispondono ad alcuna chiave sull’oggetto destrutturato. Se lo fai, JS creerà felicemente la variabile e le assegnerà un valore di non definito. Altrimenti, puoi assegnare tu stesso un valore predefinito in questo modo:

const band = {
    drummer: 'George',
    bassist: 'Steve',
    guitarist: 'Rob',
    vocalist: 'John'
};

// Assign default value of 'Allan' to keyboardist if undefined
const { drummer, bassist, guitarist, keyboardist="Allan", vocalist } = band;

// List band members using ES6 template literals
// Outputs "Ivory Knight are George, Steve, Rob, Allan, and John"
console.log(`Ivory Knight are ${drummer}, ${bassist}, ${guitarist}, ${keyboardist}, and ${vocalist}.`);

Leggi: Utilizzo di variabili JavaScript e funzioni integrate

Modifica dei nomi delle variabili in JavaScript

Probabilmente stai già pensando che l’assegnazione di variabili usando la destrutturazione sia roba piuttosto potente. Bene, migliora ancora. Gli sviluppatori Web non si limitano a variabili che hanno lo stesso nome della chiave oggetto corrispondente. I programmatori possono assegnare un nome di variabile diverso usando la sintassi [object_key]:[variable_name]. Vuoi impostare alcuni valori predefiniti? Puoi assegnarne alcuni usando la sintassi [object_key]:[variable_name] = [default_value]:

const band = {
    drummer: 'George',
    bassist: 'Steve',
    guitarist: 'Rob',
    vocalist: 'John'
};

// Assign default value of 'Allan' to keyboards if undefined
const { drums: drummer, bass: bassist="New guy", guitars: guitarist, keyboards="Allan", vocals: vocalist } = band;

// List band members using ES6 template literals
// Outputs "Ivory Knight are George, New guy, Rob, Allan, and John"
console.log(`Ivory Knight are ${drums}, ${bass}, ${guitars}, ${keyboards}, and ${vocals}.`);

Destrutturazione di oggetti annidati in JavaScript

Come sicuramente saprai, gli oggetti stessi possono contenere altri oggetti. Pertanto, ha senso che anche gli oggetti figlio possano essere destrutturati. Ecco un esempio che mostra come farlo:

const band = {
    drummer: 'George',
    bassist: 'Steve',
    guitarist: 'Rob',
    vocalist: 'John',
    backupVocals: {
      lowBackups: 'Steve',
      highBackups: 'Rob'
    }
};

// Assign to local variables
const { drummer, bassist, guitarist, vocalist, backupVocals: {lowBackups, midBackups="N/A", highBackups} } = band;

// Outputs "Backup vocals performed by Steve, N/A, Rob."
console.log(`Backup vocals performed by ${lowBackups}, ${midBackups}, ${highBackups}.`);

Considerazioni finali sulla destrutturazione di oggetti ES6

In questo tutorial di sviluppo web, abbiamo imparato come destrutturare gli oggetti usando la sintassi ES6. Il prossimo articolo si concentrerà sulla destrutturazione mista (Object e Array), insieme ad alcuni dei suoi usi più avanzati.

Mentre lo aspetti, perché non dai un’occhiata la demo dei frammenti di codice di oggi? Puoi anche giocare con loro se vuoi!

Leggi di più Tutorial di programmazione JavaScript e guide allo sviluppo software.