La destrutturazione degli oggetti è un’utile funzione JavaScript (ECMAScript 6) per estrarre proprietà dagli oggetti e associarli a variabili. Come abbiamo visto nel ES6 Destrutturazione di oggetti tutorial, la destrutturazione degli oggetti può estrarre più proprietà in un’unica istruzione, accedere alle proprietà da oggetti nidificati e può impostare un valore predefinito se la proprietà non esiste. Nel seguito di oggi, daremo un’occhiata alla destrutturazione mista (Object e Array), nonché a come destrutturare gli argomenti di funzioni e metodi.

Che cos’è la destrutturazione mista in JavaScript?

Come accennato nell’introduzione, la destrutturazione mista implica la dichiarazione e l’impostazione di variabili da un oggetto che contiene attributi di array o da un array di oggetti. Per illustrare, ecco un Oggetto Persona che contiene elementi nidificati di Oggetti e Matrici:

const person = {
  name: 'Rob',
  location: {
    city: 'Ottawa',
    country: 'Canada',
    phoneNumbers: ['555-1234', '555-2345'],
  },
};

Possiamo quindi utilizzare ES6 Destructuring per assegnare tutte le proprietà dell’oggetto a singole variabili replicando la struttura dell’oggetto:

const {
  name,
  location: {
    city,
    country,
    phoneNums: [phone1, phone2],
  },
} = person;

// Now we can reference each variable without having to use dot (.) attribute accessors.
// Outputs "I am Rob from Ottawa, Canada. You can reach me at 555-1234 or 555-2345."
console.log(
  `I am ${name} from ${city}, ${country}. You can reach me at ${phone1} or ${phone2}.`
);

Possiamo anche utilizzare ES6 Destructuring per assegnare elementi Array a singole variabili, purché si conosca in anticipo la lunghezza dell’array. Ecco un esempio che mostra come si fa:

const dataArray = [
  { data: 1 },
  { data: 2 },
  { data: 3 }
];

const [
  { data: val0 },
  { data: val1 },
  { data: val2 }
] = dataArray;

//Outputs "1, 2, 3"
console.log(`${val0}, ${val1}, ${val2}`);

Il trucco è sostituire i valori degli elementi con variabili in cui memorizzarli.

Leggi: Una guida per lavorare con le variabili CSS

Destrutturazione di argomenti di funzione oggetto in JavaScript

Gli oggetti passati alle funzioni possono essere destrutturati all’interno della firma della funzione in cui sono definiti gli argomenti della funzione. Questa volta, replicheremo la struttura dell’oggetto nell’elenco degli argomenti:

//Programmer Object containing nested elements
const programmer = {
  name: 'George',
  age: 29,
  skills: {
    languages: 'JavaScript, HTML, CSS',
    databases: 'MySQL, MS SQL, MongoDB',
  },
};

//The programmer object is destructured within the parameters of the function that is passed in
const displayEmployeeInfo = ({ name, age, skills: { languages, databases } }) => {
  console.log(
    `The employee name is ${name} and his age is ${age}. 
		 He knows the following languages - ${languages} 
		 and is familiar with the databases - ${databases}.`
  );
}

//Invoke the displayEmployeeInfo() function with the programmer object
//Output: The employee name is George and his age is 29. He knows the following 
//languages - JavaScript, HTML, CSS and is familiar with the databases - MySQL, 
//MS SQL, MongoDB 
displayEmployeeInfo(programmer); 

Parametri destrutturati e valori di default

Come qualsiasi parametro di funzione, possiamo assegnare valori predefiniti alle nostre variabili locali direttamente nella firma della funzione. Ecco il displayEmployeeInfo() funzionare nuovamente con valori di default assegnati alle competenze, alle lingue e alle variabili del database:

//Programmer Object without skills
const programmer = {
  name: 'George',
  age: 29,
  skills: {
    languages: 'JavaScript, HTML, CSS'
  }
};

const displayEmployeeInfo = ({ name, age, skills: { languages="none", databases="none" } }) => {
  console.log(
    `The employee name is ${name} and his age is ${age}. 
     He knows the following languages - ${languages} 
     and is familiar with the databases - ${databases}.`
  );
}

//Invoke the displayEmployeeInfo() function with the programmer object
//Output: The employee name is George and his age is 29. He knows the following 
//languages - JavaScript, HTML, CSS and is familiar with the databases - none
displayEmployeeInfo(programmer); 

Rendere i parametri destrutturati facoltativi

Si noti che, anche se abbiamo specificato valori predefiniti per alcune variabili, se dovessimo chiamare il displayEmployeeInfo() funzione senza argomenti otterremmo un errore perché i parametri destrutturati sono sempre richiesti.

const displayEmployeeInfo = ({ name, age, skills: { languages="none", databases="none" } }) => {
  console.log(
    `The employee name is ${name} and his age is ${age}. 
     He knows the following languages - ${languages} 
     and is familiar with the databases - ${databases}.`
  );
}

//Invoking the displayEmployeeInfo() function with no arguments
//throws the Error "TypeError: (destructured parameter) is undefined"
displayEmployeeInfo(); 

La chiave per evitare l’errore precedente consiste nell’assegnare un oggetto di fallback letterale a tutti gli oggetti di livello superiore, inclusi l’oggetto programmatore e l’oggetto abilità nidificato.

const displayEmployeeInfo = ({ name = "John Doe", age = "unknown", skills: { languages="none", databases="none" } = {} } = {}) => {
  document.write(
    `The employee name is ${name} and his age is ${age}. 
    He knows the following languages - ${languages} 
    and is familiar with the databases - ${databases}.`
  );
}

//Invoking the function displayEmployeeInfo with the programmer object
//Output: The employee name is John Doe and his age is unknown. He knows the following 
//languages - none and is familiar with the databases - none
displayEmployeeInfo(); 

Considerazioni finali sulla destrutturazione di oggetti misti e argomenti di funzione in ES6

In questo tutorial di sviluppo Web, abbiamo esplorato un paio delle applicazioni più avanzate della sintassi di destrutturazione di ES6. Per quanto potente sia la destrutturazione di per sé, sono in grado di semplificare ulteriormente il codice se combinati con altre funzionalità di ES6 come Spread Syntax e Rest Parameters.

Troverai un demo degli esempi di codice di oggi su codepen.io. Lì, puoi guardare il codice e osservare l’output prodotto.

Leggi: Strumenti di gestione dei progetti per sviluppatori Web