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 hanno molte proprietà.

Comprendere la destrutturazione degli oggetti

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

Ecco la sintassi di base per la destrutturazione degli oggetti:

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

property1, property2 e così via: Questi sono i nomi delle variabili a cui verranno assegnati i valori delle corrispondenti proprietà di sourceObject. Le proprietà vengono destrutturate in base al nome della proprietà, non all'ordine. L'ordine non ha alcuna importanza;
sourceObject: L'oggetto da cui si desidera estrarre le proprietà.

Destrutturazione degli oggetti nella pratica

Consideriamo un esempio in cui abbiamo un oggetto che rappresenta le informazioni di una persona:


              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 è possibile utilizzare fullName, nationality e occupation come variabili distinte con i valori corrispondenti dell'oggetto person.

Fornire valori predefiniti

È possibile assegnare valori predefiniti alle variabili nel caso in cui la proprietà non sia presente nell'oggetto di origine:


              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

In questo esempio, la variabile birthDate verrà assegnata al valore "March 9, 1454" se l'oggetto person non contiene una proprietà birthDate con un valore.

Ridenominazione delle variabili

Utilizzando la sintassi :, è possibile assegnare i valori delle proprietà a variabili con nomi diversi. Ad esempio:


              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

Ora è possibile utilizzare le variabili min e max invece di minTemperature e maxTemperature.

Destrutturazione di Oggetti Annidati

La destrutturazione può essere applicata anche agli oggetti annidati. Ad esempio, se l'oggetto contiene altri oggetti come proprietà, è possibile destrutturare le proprietà annidate:


              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

In questo esempio, è possibile accedere sia alle proprietà di primo livello come name e profession, sia alle proprietà annidate come degree, university e graduationYear utilizzando la destrutturazione.

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 to use object destructuring with function parameters?

What happens if a property is missing when destructuring?

Can you show more examples of nested object destructuring?

Awesome!

Completion rate improved to 2.27

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 e così via: Questi sono i nomi delle variabili a cui verranno assegnati i valori delle corrispondenti proprietà di sourceObject. Le proprietà vengono destrutturate in base al nome della proprietà, non all'ordine. L'ordine non ha alcuna importanza;
sourceObject: L'oggetto da cui si desidera estrarre le proprietà.

Destrutturazione degli oggetti nella pratica

Consideriamo un esempio in cui abbiamo un oggetto che rappresenta le informazioni di una persona:


              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 è possibile utilizzare fullName, nationality e occupation come variabili distinte con i valori corrispondenti dell'oggetto person.

Fornire valori predefiniti

È possibile assegnare valori predefiniti alle variabili nel caso in cui la proprietà non sia presente nell'oggetto di origine:


              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

In questo esempio, la variabile birthDate verrà assegnata al valore "March 9, 1454" se l'oggetto person non contiene una proprietà birthDate con un valore.

Ridenominazione delle variabili

Utilizzando la sintassi :, è possibile assegnare i valori delle proprietà a variabili con nomi diversi. Ad esempio:


              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

Ora è possibile utilizzare le variabili min e max invece di minTemperature e maxTemperature.

Destrutturazione di Oggetti Annidati

La destrutturazione può essere applicata anche agli oggetti annidati. Ad esempio, se l'oggetto contiene altri oggetti come proprietà, è possibile destrutturare le proprietà annidate:


              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

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 nella destrutturazione degli oggetti?

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

Awesome!

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 nella destrutturazione degli oggetti?

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