Aller au contenu principal

Destructuration

Destructuration en JavaScript

Notions théoriques​

La destructuration est une fonctionnalité pratique de JavaScript qui permet d'extraire des valeurs de données emballées dans des objets ou des tableaux.

C'est une manière élégante d'extraire les propriétés d'un objet ou les éléments d'un tableau en une seule instruction.

Destructuration d'objets​

Pour les objets, la destructuration permet d'extraire les propriétés d'un objet directement dans des variables.

let etudiant = {
    nom: "Dupont",
    prenom: "Jean",
    age: 20
};

let { nom, prenom, age } = etudiant;

console.log(nom); // Affiche "Dupont"
console.log(prenom); // Affiche "Jean"
console.log(age); // Affiche 20
Bonne pratique - Destructuration selective

La destructuration permet d'extraire seulement les proprietes dont on a besoin, sans tout recuperer.

Destructuration de tableaux​

Pour les tableaux, la destructuration permet d'extraire les éléments d'un tableau dans des variables.

let nombres = [1, 2, 3];

let [un, deux, trois] = nombres;

console.log(un); // Affiche 1
console.log(deux); // Affiche 2
console.log(trois); // Affiche 3
Bonne pratique - Ignorer des elements

En destructuration de tableau, utiliser une virgule pour ignorer un element : let [premier, , troisieme] = arr;

Exemple pratique​

let etudiant = {
    nom: "Dupont",
    prenom: "Jean",
    age: 20,
    notes: [15, 12, 14, 16, 13]
};

let { nom, prenom, age, notes } = etudiant;

console.log(nom); // Affiche "Dupont"
console.log(prenom); // Affiche "Jean"
console.log(age); // Affiche 20

let [note1, note2, note3, note4, note5] = notes;

console.log(note1); // Affiche 15
console.log(note2); // Affiche 12
console.log(note3); // Affiche 14
console.log(note4); // Affiche 16
console.log(note5); // Affiche 13

Test de mémorisation/compréhension​


Qu'est-ce que la destructuration en JavaScript ?


Comment peut-on extraire les propriétés d'un objet en JavaScript ?


Comment peut-on extraire les éléments d'un tableau en JavaScript ?


TP pour réfléchir et résoudre des problèmes​

Dans ce TP, nous allons utiliser la destructuration pour extraire les propriétés ou éléments d'objets et de tableaux.

  1. Créez un objet etudiant qui contient les propriétés nom, prenom, age et notes (5 notes entre 1 et 20).
  1. Utilisez la destructuration pour extraire les propriétés nom, prenom, age et notes de l'objet etudiant dans des variables.
  1. Affichez les valeurs des variables nom, prenom et age sur la console, avec console.log().
  1. Utilisez la destructuration pour extraire les 5 notes du tableau notes dans des variables.
  1. Affichez les valeurs des variables de notes sur la console, avec console.log().
Bonne pratique - Destructuration en parametre

La destructuration peut aussi s'utiliser directement dans les parametres de fonction : function afficher({ nom, age }) { ... }

Une solution