Déstructuration en JavaScript
Syntaxe de l'assignation par déstructuration
La syntaxe de l'assignation par déstructuration permet de décomposer les propriétés d'un objet en variables :
let {firstName, lastName} = person; Elle peut également décomposer des tableaux et d'autres itérables :
let [firstName, lastName] = person; Déstructuration d'objet
Exemple
// Créer un objet
const person = {
firstName: "John",
lastName: "Doe",
age: 50
};
// Déstructuration
let {firstName, lastName} = person; L'ordre des propriétés n'a pas d'importance :
Exemple
// Créer un objet
const person = {
firstName: "John",
lastName: "Doe",
age: 50
};
// Déstructuration
let {lastName, firstName} = person; Remarque :
La déstructuration n'est pas destructive.
La déstructuration ne modifie pas l'objet original.
Valeurs par défaut d'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: "John",
lastName: "Doe",
age: 50
};
// Déstructuration
let {firstName, lastName, country = "US"} = person; Alias de propriété d'objet
Exemple
// Créer un objet
const person = {
firstName: "John",
lastName: "Doe",
age: 50
};
// Déstructuration
let {lastName : name} = person; Déstructuration de chaînes
Une utilisation de la déstructuration consiste à décomposer les caractères d'une chaîne.
Exemple
// Créer une chaîne
let name = "formation-ti.org";
// Déstructuration
let [a1, a2, a3, a4, a5] = name; Remarque :
La déstructuration peut être utilisée avec n'importe quel itérable.
Déstructuration de tableaux
Nous pouvons extraire des variables de tableau dans nos propres variables :
Exemple
// Créer un tableau
const fruits = ["Bananes", "Oranges", "Pommes", "Mangues"];
// Déstructuration
let [fruit1, fruit2] = fruits; Ignorer les valeurs de tableau
Nous pouvons ignorer les valeurs de tableau en utilisant deux virgules ou plus :
Exemple
// Créer un tableau
const fruits = ["Bananes", "Oranges", "Pommes", "Mangues"];
// Déstructuration
let [fruit1,,,fruit2] = fruits; Valeurs de position de tableau
Nous pouvons extraire des valeurs à partir d'emplacements d'index spécifiques d'un tableau :
Exemple
// Créer un tableau
const fruits = ["Bananes", "Oranges", "Pommes", "Mangues"];
// Déstructuration
let {[0]:fruit1 ,[1]:fruit2} = fruits; La propriété Rest
Vous pouvez terminer une syntaxe de déstructuration avec une propriété rest.
Cette syntaxe stockera toutes les valeurs restantes dans un nouveau tableau :
Exemple
// Créer un tableau
const numbers = [10, 20, 30, 40, 50, 60, 70];
// Déstructuration
const [a,b, ...rest] = numbers Déstructuration des Maps
Exemple
// Créer une Map
const fruits = new Map([
["pommes", 500],
["bananes", 300],
["oranges", 200]
]);
// Déstructuration
let text = "";
for (const [key, value] of fruits) {
text += key + " est " + value;
} Échanger des variables JavaScript
Vous pouvez échanger les valeurs de deux variables en utilisant une assignation par déstructuration :
Exemple
let firstName = "John";
let lastName = "Doe";
// Déstructuration
[firstName, lastName] = [lastName, firstName]; Support des navigateurs
La déstructuration est une fonctionnalité ES6 .
ES6 est entièrement pris en charge dans tous les navigateurs modernes depuis juin 2017 :
| Chrome 51 | Edge 15 | Firefox 54 | Safari 10 | Opera 38 |
| Mai 2016 | Avr 2017 | Juin 2017 | Sep 2016 | Juin 2016 |
En savoir plus :
Définitions d'objets JavaScript
Constructeurs d'objets JavaScript
Déstructuration d'objets JavaScript
Prototypes d'objets JavaScript
Itérations d'objets JavaScript
Getters & Setters d'objets JavaScript