Aperçu

L'affectation par déstructuration est une extension de l'opérateur d'affectation.

C'est une sorte de correspondance de motifs pour les tableaux ou les objets, puis elle affecte des valeurs aux variables qu'ils contiennent.

Elle est concise et lisible lors de l'écriture du code, avec une sémantique plus claire ; elle facilite également la récupération des champs de données dans des objets complexes.


Modèle de déstructuration

Dans la déstructuration, les deux parties suivantes sont impliquées :

    La source de la déstructuration, le côté droit de l'expression d'affectation par déstructuration.
  • La cible de la déstructuration, le côté gauche de l'expression d'affectation par déstructuration.

Déstructuration du modèle de tableau (Array)

Basique

let [a, b, c] = [1, 2, 3]; // a = 1 // b = 2 // c = 3

Imbriquable

let [a, [[b], c]] = [1, [[2], 3]]; // a = 1 // b = 2 // c = 3

Ignorable

let [a, , b] = [1, 2, 3]; // a = 1 // b = 3

Déstructuration incomplète

let [a = 1, b] = []; // a = 1, b = undefined

Opérateur de reste

let [a, ...b] = [1, 2, 3]; //a = 1 //b = [2, 3]

Chaînes de caractères, etc.

En déstructuration de tableau, si la cible de déstructuration est un objet itérable, une affectation par déstructuration peut être effectuée. Un objet itérable est une donnée qui implémente l'interface Iterator.

let [a, b, c, d, e] = 'hello'; // a = 'h' // b = 'e' // c = 'l' // d = 'l' // e = 'o'

Valeurs par défaut de déstructuration

let [a = 2] = [undefined]; // a = 2

Lorsque le motif de déstructuration a un résultat de correspondance et que ce résultat est undefined, la valeur par défaut sera déclenchée comme résultat renvoyé.

let [a = 3, b = a] = []; // a = 3, b = 3 let [a = 3, b = a] = [1]; // a = 1, b = 1 let [a = 3, b = a] = [1, 2]; // a = 1, b = 2
  • Le résultat de correspondance de a et b est undefined, ce qui déclenche les valeurs par défaut :a = 3; b = a =3
  • a est normalement déstructuré et affecté, résultat de correspondance : a = 1, le résultat de correspondance de b est undefined, ce qui déclenche la valeur par défaut :b = a =1
  • a et b sont normalement déstructurés et affectés, résultat de la correspondance :a = 1,b = 2

Déstructuration du modèle objet (Object)

Basique

let { foo, bar } = { foo: 'aaa', bar: 'bbb' }; // foo = 'aaa' // bar = 'bbb' let { baz : foo } = { baz : 'ddd' }; // foo = 'ddd'

Imbriquable et ignorable

let obj = {p: ['hello', {y: 'world'}] }; let {p: [x, { y }] } = obj; // x = 'hello' // y = 'world' let obj = {p: ['hello', {y: 'world'}] }; let {p: [x, { }] } = obj; // x = 'hello'

Déstructuration incomplète

let obj = {p: [{y: 'world'}] }; let {p: [{ y }, x ] } = obj; // x = undefined // y = 'world'

Opérateur de reste

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}; // a = 10 // b = 20 // rest = {c: 30, d: 40}

Valeurs par défaut de déstructuration

let {a = 10, b = 5} = {a: 3}; // a = 3; b = 5; let {a: aa = 10, b: bb = 5} = {a: 3}; // aa = 3; bb = 5;