Apprendre Décomposition des Objets pour un Code Plus Lisible | Techniques Avancées de Manipulation d'Objets

La déstructuration d'objet est une fonctionnalité qui permet d'extraire des propriétés spécifiques d'un objet et de les affecter à des variables. Cela permet d'obtenir un code plus concis et lisible, en particulier lors de la manipulation d'objets comportant de multiples propriétés.

Comprendre la déstructuration d'objet

La déstructuration d'objet est une méthode permettant de décomposer les valeurs d'un objet en variables distinctes. La déstructuration utilise une syntaxe similaire à celle des littéraux d'objet, mais placée à gauche d'une affectation.

Voici la syntaxe de base pour la déstructuration d'objet :

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

property1, property2 : noms des variables qui contiendront les valeurs extraites de l'objet ;
sourceObject : objet à partir duquel les propriétés sont extraites ;
L'ordre n'a pas d'importance : les propriétés sont associées par leur nom.

Déstructuration d'objet en pratique


              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

Désormais, fullName, nationality et occupation sont des variables autonomes contenant leurs valeurs respectives.

Fournir des valeurs par défaut

Si l'objet ne contient pas une propriété, il est possible d'attribuer une valeur par défaut :


              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

Si birthDate est absent, la valeur par défaut est utilisée.

Renommage des variables

Renommage des variables extraites à l'aide de la syntaxe :.


              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 lorsque des noms plus courts améliorent la lisibilité ou pour éviter les conflits de noms.

Déstructuration d’objets imbriqués

Il est également possible de déstructurer des propriétés à l’intérieur d’objets imbriqués.


              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

Extraction de valeurs de niveau supérieur et de valeurs imbriquées en une seule expression claire.

Tout était clair ?

Merci pour vos commentaires !

Section 3. Chapitre 7

Demandez à l'IA

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

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?

Glissez pour afficher le menu

Comprendre la déstructuration d'objet

Voici la syntaxe de base pour la déstructuration d'objet :

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

property1, property2 : noms des variables qui contiendront les valeurs extraites de l'objet ;
sourceObject : objet à partir duquel les propriétés sont extraites ;
L'ordre n'a pas d'importance : les propriétés sont associées par leur nom.

Déstructuration d'objet en pratique


              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

Désormais, fullName, nationality et occupation sont des variables autonomes contenant leurs valeurs respectives.

Fournir des valeurs par défaut

Si l'objet ne contient pas une propriété, il est possible d'attribuer une valeur par défaut :


              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

Si birthDate est absent, la valeur par défaut est utilisée.

Renommage des variables

Renommage des variables extraites à l'aide de la syntaxe :.


              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 lorsque des noms plus courts améliorent la lisibilité ou pour éviter les conflits de noms.

Déstructuration d’objets imbriqués

Il est également possible de déstructurer des propriétés à l’intérieur d’objets imbriqués.


              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

Extraction de valeurs de niveau supérieur et de valeurs imbriquées en une seule expression claire.

Tout était clair ?

Merci pour vos commentaires !

Section 3. Chapitre 7

Décomposition des Objets pour un Code Plus Lisible

Comprendre la déstructuration d'objet

Déstructuration d'objet en pratique

Fournir des valeurs par défaut

Renommage des variables

Déstructuration d’objets imbriqués

1. Que fait le code suivant ?

2. Comment peut-on fournir des valeurs par défaut pour les variables lors de la déstructuration d'objet ?

3. Lors de la déstructuration d'objet, comment peut-on renommer les variables lors de l'assignation ?

Décomposition des Objets pour un Code Plus Lisible

Comprendre la déstructuration d'objet

Déstructuration d'objet en pratique

Fournir des valeurs par défaut

Renommage des variables

Déstructuration d’objets imbriqués

1. Que fait le code suivant ?

2. Comment peut-on fournir des valeurs par défaut pour les variables lors de la déstructuration d'objet ?

3. Lors de la déstructuration d'objet, comment peut-on renommer les variables lors de l'assignation ?