Déstructuration de tableau en

À propos de Déstructuration de tableau

L'affectation par déstructuration de tableau est un moyen concis d'extraire des valeurs d'un tableau. Sa syntaxe est semblable à celle d'un littéral de tableau, mais du côté gauche de l'affectation plutôt que du côté droit.

const frenchNumbers = ['quatre-vingts', 'quatre-vingt-dix', 'cent'];
const [french80, french90, french100] = frenchNumbers;

french80;
// => 'quatre-vingts'
french90;
// => 'quatre-vingt-dix'
french100;
// => 'cent'

Réaffectation

Comme les variables sont associées aux valeurs du tableau par leur position, la syntaxe de déstructuration permet d'affecter ou de réaffecter plusieurs variables dans une seule expression.

let [a, b] = ['world', 'hello'];
[b, a] = [a, b];

a;
// => 'hello'
b;
// => 'world'

Cela fonctionne aussi pour les tableaux imbriqués.

let [a, b, c] = ['orange', 'purple', 'green'];
[[a, b], c] = [[c, a], b];

a;
// => 'green'
b;
// => 'orange'
c;
// => 'purple'

Ignorer des valeurs

La syntaxe permet de sauter des valeurs lors de l'affectation, par exemple pour ignorer certaines positions dans le tableau. Dans l'exemple ci-dessous, imaginons une fonction getUserInfo qui renvoie un tableau contenant le prénom, le nom et l'adresse d'un utilisateur.

getUserInfo();
// => ["Valerie", "Noir", "Sunny Lane 523"]

const [, , streetAddress] = getUserInfo();

streetAddress;
// => "Sunny Lane 523"

Ne pas utiliser toutes les valeurs

Il n'est pas non plus nécessaire d'utiliser toutes les valeurs lors de l'affectation.

const [firstName, lastName] = getUserInfo();

firstName;
// => "Valerie"

lastName;
// => "Noir"

Extraire plus de valeurs qu'il n'y en a

Il est même possible d'extraire plus de valeurs que le tableau n'en contient ; les variables en trop se voient affecter undefined. Cela peut être utile quand on ne connaît pas à l'avance le nombre de valeurs.

const pickAtLeastOne = ['first choice', 'second choice'];
const [first, second, third, fourth] = pickAtLeastOne;

first;
// => "first choice"

second;
// => "second choice"

third;
// => undefined

fourth;
// => undefined

Valeurs par défaut

L'affectation par déstructuration de tableau permet de fournir des valeurs par défaut lorsqu'il n'y en a aucune dans le tableau source.

const [first, second, third = 'none selected', fourth] = pickAtLeastOne;

third;
// => 'none selected'

fourth;
// => undefined

Concepts associés

object-destructuring rest-and-spread