Dénstruction JavaScript

Syntaxe d'affectation de déstructuration

La syntaxe d'affectation de déstructuration dépaque les propriétés d'un objet dans des variables :

let {firstName, lastName} = person;

Il peut également dépaqueter des tableaux et d'autres objets itérables :

let [firstName, lastName] = person;

Déstructuration d'objet

Exemple

// Créer un objet
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// Destructuration
let {firstName, lastName} = person;

Essayer par vous-même

L'ordre des propriétés n'a pas d'importance :

Exemple

// Créer un objet
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// Destructuration
let {lastName, firstName} = person;

Essayer par vous-même

Valeur par défaut de l'objet

Pour les propriétés potentiellement manquantes, nous pouvons définir des valeurs par défaut :

Exemple

// Créer un objet
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// Destructuration
let {firstName, lastName, country = "US"} = person;

Essayer par vous-même

Alias de propriété d'objet

Exemple

// Créer un objet
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// Destructuration
let {lastName: name} = person;

Essayer par vous-même

Déstructuration de chaîne

Une utilisation de la déstructuration est de dépaqueter les caractères d'une chaîne.

Exemple

// Créer une chaîne
let name = "W3Schools";
// Destructuration
let [a1, a2, a3, a4, a5] = name;

Essayer par vous-même

Déstructuration de tableau

Nous pouvons extraire des variables d'un tableau dans leurs propres variables :

Exemple

// Création d'un tableau
const fruits = ["Bananas", "Oranges", "Apples", "Mangos"];
// Destructuration
let [fruit1, fruit2] = fruits;

Essayer par vous-même

Sauter des valeurs du tableau

Nous pouvons utiliser deux ou plus de virgules pour sauter des valeurs d'un tableau :

Exemple

// Création d'un tableau
const fruits = ["Bananas", "Oranges", "Apples", "Mangos"];
// Destructuration
let [fruit1,,,fruit2] = fruits;

Essayer par vous-même

Valeur de position du tableau

Nous pouvons extraire des valeurs à partir de positions spécifiques de l'index d'un tableau :

Exemple

// Création d'un tableau
const fruits = ["Bananas", "Oranges", "Apples", "Mangos"];
// Destructuration
let {[0]: fruit1, [1]: fruit2} = fruits;

Essayer par vous-même

Propriétés restantes

On peut utiliser les propriétés restantes à la fin de la syntaxe de déstructuration.

Cette syntaxe stockera toutes les valeurs restantes dans un nouveau tableau :

Exemple

// Création d'un tableau
const numbers = [10, 20, 30, 40, 50, 60, 70];
// Destructuration
const [a, b, ...rest] = numbers;

Essayer par vous-même

Destructuration Map

Exemple

// Création d'un Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  
]
// Destructuration
let text = "";
for (const [key, value] of fruits) {
  text += key + " is " + value;
}

Essayer par vous-même

Échanger des variables JavaScript

Il est possible d'échanger les valeurs de deux variables à l'aide de l'affectation par déstructuration :

Exemple

let firstName = "Bill";
let lastName = "Gates";
// Destructuration
[firstName, lastName] = [lastName, firstName];

Essayer par vous-même