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, etc. : Noms des variables auxquelles les valeurs des propriétés correspondantes de sourceObject seront affectées. Les propriétés de l'objet sont déstructurées par nom de propriété, et non par ordre. L'ordre n'a aucune importance ;
sourceObject : L'objet à partir duquel on souhaite extraire les propriétés.

Déstructuration d'objet en pratique

Considérons un exemple où nous avons un objet représentant les informations d'une personne :


              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

Nous pouvons maintenant utiliser fullName, nationality et occupation comme variables distinctes contenant les valeurs correspondantes de l'objet person.

Fournir des valeurs par défaut

Il est également possible de fournir des valeurs par défaut pour les variables au cas où la propriété ne serait pas trouvée dans l'objet source :


              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

Dans cet exemple, la variable birthDate recevra la valeur "March 9, 1454" si l'objet person ne possède pas de propriété birthDate avec une valeur.

Renommer les variables

En utilisant la syntaxe :, il est possible d’assigner les valeurs des propriétés à des variables portant des noms différents. Par exemple :


              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

Il est désormais possible d’utiliser les variables min et max à la place de minTemperature et maxTemperature.

Décomposition d’objets imbriqués

La décomposition peut également être appliquée aux objets imbriqués. Par exemple, si l’objet contient des objets en tant que propriétés, il est possible de décomposer les propriétés imbriquées :


              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

Dans cet exemple, il est possible d’accéder à la fois aux propriétés de premier niveau comme name et profession ainsi qu’aux propriétés imbriquées comme degree, university et graduationYear grâce à la décomposition.

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

Awesome!

Completion rate improved to 2.27

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, etc. : Noms des variables auxquelles les valeurs des propriétés correspondantes de sourceObject seront affectées. Les propriétés de l'objet sont déstructurées par nom de propriété, et non par ordre. L'ordre n'a aucune importance ;
sourceObject : L'objet à partir duquel on souhaite extraire les propriétés.

Déstructuration d'objet en pratique

Considérons un exemple où nous avons un objet représentant les informations d'une personne :


              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

Nous pouvons maintenant utiliser fullName, nationality et occupation comme variables distinctes contenant les valeurs correspondantes de l'objet person.

Fournir des valeurs par défaut

Il est également possible de fournir des valeurs par défaut pour les variables au cas où la propriété ne serait pas trouvée dans l'objet source :


              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

Dans cet exemple, la variable birthDate recevra la valeur "March 9, 1454" si l'objet person ne possède pas de propriété birthDate avec une valeur.

Renommer les variables

En utilisant la syntaxe :, il est possible d’assigner les valeurs des propriétés à des variables portant des noms différents. Par exemple :


              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

Il est désormais possible d’utiliser les variables min et max à la place de minTemperature et maxTemperature.

Décomposition 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

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

Renommer les variables

Décomposition 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'un objet ?

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

Awesome!

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

Renommer les variables

Décomposition 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'un objet ?

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