Dans ce didacticiel, vous découvrirez les affectations de déstructuration JavaScript à l'aide d'exemples.
Destructuration JavaScript
L'affectation de déstructuration introduite dans ES6 facilite l'attribution de valeurs de tableau et de propriétés d'objet à des variables distinctes. Par exemple,
avant ES6:
// assigning object attributes to variables const person = ( name: 'Sara', age: 25, gender: 'female' ) let name = person.name; let age = person.age; let gender = person.gender; console.log(name); // Sara console.log(age); // 25 console.log(gender); // female
Depuis ES6:
// assigning object attributes to variables const person = ( name: 'Sara', age: 25, gender: 'female' ) // destructuring assignment let ( name, age, gender ) = person; console.log(name); // Sara console.log(age); // 25 console.log(gender); // female
Remarque : l'ordre du nom n'a pas d'importance dans la déstructuration des objets.
Par exemple, vous pouvez écrire le programme ci-dessus sous la forme:
let ( age, gender, name ) = person; console.log(name); // Sara
Remarque : lors de la déstructuration d'objets, vous devez utiliser le même nom pour la variable que la clé d'objet correspondante.
Par exemple,
let (name1, age, gender) = person; console.log(name1); // undefined
Si vous souhaitez attribuer différents noms de variable à la clé d'objet, vous pouvez utiliser:
const person = ( name: 'Sara', age: 25, gender: 'female' ) // destructuring assignment // using different variable names let ( name: name1, age: age1, gender:gender1 ) = person; console.log(name1); // Sara console.log(age1); // 25 console.log(gender1); // female
Destructuration des baies
Vous pouvez également effectuer la déstructuration des tableaux de la même manière. Par exemple,
const arrValue = ('one', 'two', 'three'); // destructuring assignment in arrays const (x, y, z) = arrValue; console.log(x); // one console.log(y); // two console.log(z); // three
Attribuer des valeurs par défaut
Vous pouvez affecter les valeurs par défaut aux variables lors de l'utilisation de la déstructuration. Par exemple,
let arrValue = (10); // assigning default value 5 and 7 let (x = 5, y = 7) = arrValue; console.log(x); // 10 console.log(y); // 7
Dans le programme ci-dessus, arrValue n'a qu'un seul élément. Par conséquent,
- la variable x sera 10
- la variable y prend la valeur par défaut 7
Dans la déstructuration d'objets, vous pouvez transmettre les valeurs par défaut de la même manière. Par exemple,
const person = ( name: 'Jack', ) // assign default value 26 to age if undefined const ( name, age = 26) = person; console.log(name); // Jack console.log(age); // 26
Permutation des variables
Dans cet exemple, deux variables sont permutées à l'aide de la syntaxe d'affectation de déstructuration.
// program to swap variables let x = 4; let y = 7; // swapping variables (x, y) = (y, x); console.log(x); // 7 console.log(y); // 4
Ignorer les éléments
Vous pouvez ignorer les éléments indésirables dans un tableau sans les affecter à des variables locales. Par exemple,
const arrValue = ('one', 'two', 'three'); // destructuring assignment in arrays const (x, , z) = arrValue; console.log(x); // one console.log(z); // three
Dans le programme ci-dessus, le deuxième élément est omis en utilisant le séparateur virgule ,.
Attribuer les éléments restants à une seule variable
Vous pouvez affecter les éléments restants d'un tableau à une variable à l'aide de la syntaxe de diffusion … . Par exemple,
const arrValue = ('one', 'two', 'three', 'four'); // destructuring assignment in arrays // assigning remaining elements to y const (x,… y) = arrValue; console.log(x); // one console.log(y); // ("two", "three", "four")
Ici, oneest affecté à la variable x. Et le reste des éléments du tableau est affecté à la variable y.
Vous pouvez également affecter le reste des propriétés de l'objet à une seule variable. Par exemple,
const person = ( name: 'Sara', age: 25, gender: 'female' ) // destructuring assignment // assigning remaining properties to rest let ( name,… rest ) = person; console.log(name); // Sara console.log(rest); // (age: 25, gender: "female")
Remarque : la variable avec la syntaxe étalée ne peut pas avoir de virgule à la fin ,. Vous devez utiliser cet élément rest (variable avec une syntaxe étalée) comme dernière variable.
Par exemple,
const arrValue = ('one', 'two', 'three', 'four'); // throws an error const (… x, y) = arrValue; console.log(x); // eror
Affectation de destruction imbriquée
Vous pouvez effectuer une déstructuration imbriquée pour les éléments du tableau. Par exemple,
// nested array elements const arrValue = ('one', ('two', 'three')); // nested destructuring assignment in arrays const (x, (y, z)) = arrValue; console.log(x); // one console.log(y); // two console.log(z); // three
Ici, les variables y et z se voient attribuer des éléments imbriqués twoet three.
Afin d'exécuter l'affectation de déstructuration imbriquée, vous devez enfermer les variables dans une structure de tableau (en les enfermant à l'intérieur ()).
Vous pouvez également effectuer une déstructuration imbriquée pour les propriétés d'objet. Par exemple,
const person = ( name: 'Jack', age: 26, hobbies: ( read: true, playGame: true ) ) // nested destructuring const (name, hobbies: (read, playGame)) = person; console.log(name); // Jack console.log(read); // true console.log(playGame); // true
Afin d'exécuter l'affectation de déstructuration imbriquée pour les objets, vous devez enfermer les variables dans une structure d'objet (en les enfermant à l'intérieur ()).
Remarque : la fonction d'affectation de destruction a été introduite dans ES6 . Certains navigateurs peuvent ne pas prendre en charge l'utilisation de l'affectation de déstructuration. Visitez le support Javascript Destructuring pour en savoir plus.
