Impara Destrutturazione degli Oggetti per un Codice più Pulito | Tecniche Avanzate di Manipolazione degli Oggetti

La destrutturazione degli oggetti è una funzionalità che consente di estrarre proprietà specifiche da un oggetto e assegnarle a variabili. Questo può portare a un codice più conciso e leggibile, soprattutto quando si lavora con oggetti che possiedono molte proprietà.

Comprendere la destrutturazione degli oggetti

La destrutturazione degli oggetti è un metodo per estrarre valori dagli oggetti e assegnarli a variabili distinte. La destrutturazione utilizza una sintassi simile ai letterali oggetto, ma posta sul lato sinistro di un'assegnazione.

Ecco la sintassi di base per la destrutturazione degli oggetti:

const { property1, property2, ...} = sourceObject;

property1, property2: nomi delle variabili che conterranno i valori dell'oggetto;
sourceObject: oggetto dal quale si estraggono le proprietà;
L'ordine non è rilevante: le proprietà vengono abbinate per nome.

Destrutturazione degli oggetti nella pratica


              12345678910
            
const person = {
  fullName: "Amerigo Vespucci",
  nationality: "Italian",
  occupation: "Explorer, Cartographer",
};

const { fullName, nationality, occupation } = person;
console.log(fullName); // Output: Amerigo Vespucci
console.log(nationality); // Output: Italian
console.log(occupation); // Output: Explorer, Cartographer

Ora fullName, nationality e occupation sono variabili indipendenti che contengono i rispettivi valori.

Fornire valori predefiniti

Se l'oggetto non contiene una proprietà, è possibile assegnare un valore predefinito:


              123456789
            
const person = {
  fullName: "Amerigo Vespucci",
  nationality: "Italian",
};

const { fullName, nationality, birthDate = "March 9, 1454" } = person;
console.log(fullName); // Output: Amerigo Vespucci
console.log(nationality); // Output: Italian
console.log(birthDate); // Output: March 9, 1454

Se birthDate è assente, viene utilizzato il valore predefinito.

Ridenominazione delle variabili

È possibile rinominare le variabili estratte utilizzando la sintassi :.


              1234567891011
            
const weather = {
  city: "Melbourne",
  minTemperature: 65,
  maxTemperature: 78,
};

const { city, minTemperature: min, maxTemperature: max } = weather;

console.log(city); // Output: Melbourne
console.log(min); // Output: 65
console.log(max); // Output: 78

Utile quando nomi più brevi migliorano la leggibilità o per evitare conflitti di denominazione.

Destrutturazione di Oggetti Annidati

È possibile destrutturare anche proprietà all'interno di oggetti annidati.


              123456789101112131415161718192021
            
const person = {
  name: "Dean Mayert",
  profession: "Neuropsychologist",
  education: {
    degree: "Ph.D. in Neuropsychology",
    university: "Mind Institute",
    graduationYear: 2008,
  },
};

const {
  name,
  profession,
  education: { degree, university, graduationYear },
} = person;

console.log(name); // Output: Dean Mayert
console.log(profession); // Output: Neuropsychologist
console.log(degree); // Output: Ph.D. in Neuropsychology
console.log(university); // Output: Mind Institute
console.log(graduationYear); // Output: 2008

È possibile estrarre sia valori di primo livello che profondamente annidati in un'unica espressione chiara.

Tutto è chiaro?

Grazie per i tuoi commenti!

Sezione 3. Capitolo 7

Chieda ad AI

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

Suggested prompts:

Can you explain how object destructuring works with arrays?

What happens if a property is missing and no default value is provided?

Can you show more examples of nested destructuring?

Scorri per mostrare il menu

Comprendere la destrutturazione degli oggetti

Ecco la sintassi di base per la destrutturazione degli oggetti:

const { property1, property2, ...} = sourceObject;

property1, property2: nomi delle variabili che conterranno i valori dell'oggetto;
sourceObject: oggetto dal quale si estraggono le proprietà;
L'ordine non è rilevante: le proprietà vengono abbinate per nome.

Destrutturazione degli oggetti nella pratica


              12345678910
            
const person = {
  fullName: "Amerigo Vespucci",
  nationality: "Italian",
  occupation: "Explorer, Cartographer",
};

const { fullName, nationality, occupation } = person;
console.log(fullName); // Output: Amerigo Vespucci
console.log(nationality); // Output: Italian
console.log(occupation); // Output: Explorer, Cartographer

Ora fullName, nationality e occupation sono variabili indipendenti che contengono i rispettivi valori.

Fornire valori predefiniti

Se l'oggetto non contiene una proprietà, è possibile assegnare un valore predefinito:


              123456789
            
const person = {
  fullName: "Amerigo Vespucci",
  nationality: "Italian",
};

const { fullName, nationality, birthDate = "March 9, 1454" } = person;
console.log(fullName); // Output: Amerigo Vespucci
console.log(nationality); // Output: Italian
console.log(birthDate); // Output: March 9, 1454

Se birthDate è assente, viene utilizzato il valore predefinito.

Ridenominazione delle variabili

È possibile rinominare le variabili estratte utilizzando la sintassi :.


              1234567891011
            
const weather = {
  city: "Melbourne",
  minTemperature: 65,
  maxTemperature: 78,
};

const { city, minTemperature: min, maxTemperature: max } = weather;

console.log(city); // Output: Melbourne
console.log(min); // Output: 65
console.log(max); // Output: 78

Utile quando nomi più brevi migliorano la leggibilità o per evitare conflitti di denominazione.

Destrutturazione di Oggetti Annidati

È possibile destrutturare anche proprietà all'interno di oggetti annidati.


              123456789101112131415161718192021
            
const person = {
  name: "Dean Mayert",
  profession: "Neuropsychologist",
  education: {
    degree: "Ph.D. in Neuropsychology",
    university: "Mind Institute",
    graduationYear: 2008,
  },
};

const {
  name,
  profession,
  education: { degree, university, graduationYear },
} = person;

console.log(name); // Output: Dean Mayert
console.log(profession); // Output: Neuropsychologist
console.log(degree); // Output: Ph.D. in Neuropsychology
console.log(university); // Output: Mind Institute
console.log(graduationYear); // Output: 2008

È possibile estrarre sia valori di primo livello che profondamente annidati in un'unica espressione chiara.

Tutto è chiaro?

Grazie per i tuoi commenti!

Sezione 3. Capitolo 7

Destrutturazione degli Oggetti per un Codice più Pulito

Comprendere la destrutturazione degli oggetti

Destrutturazione degli oggetti nella pratica

Fornire valori predefiniti

Ridenominazione delle variabili

Destrutturazione di Oggetti Annidati

1. Cosa fa il seguente codice?

2. Come possiamo fornire valori predefiniti per le variabili durante la destrutturazione di oggetti?

3. Nella destrutturazione di oggetti, come possiamo rinominare le variabili durante l'assegnazione?

Destrutturazione degli Oggetti per un Codice più Pulito

Comprendere la destrutturazione degli oggetti

Destrutturazione degli oggetti nella pratica

Fornire valori predefiniti

Ridenominazione delle variabili

Destrutturazione di Oggetti Annidati

1. Cosa fa il seguente codice?

2. Come possiamo fornire valori predefiniti per le variabili durante la destrutturazione di oggetti?

3. Nella destrutturazione di oggetti, come possiamo rinominare le variabili durante l'assegnazione?