10. Déstructuration

BY admin
|

10. Déstructuration #

  • 10.1. Aperçu
    • 10.1.1. Déstructuration d’objets
    • 10.1.2. Déstructuration de tableau
    • 10.1.3. Où la déstructuration peut-elle être utilisée ?
  • 10.2. Contexte: Construire des données par rapport à extraire des données
  • 10.3. Modèles de déstructuration
    • 10.3.1. Choisissez ce dont vous avez besoin
  • 10.4. Comment les modèles accèdent-ils aux entrailles des valeurs ?
    • 10.4.1. Les modèles d’objets contraignent les valeurs aux objets
    • 10.4.2. Les modèles de tableau fonctionnent avec des itérables
  • 10.5. Valeurs par défaut
    • 10.5.1. undefined déclenche les valeurs par défaut
    • 10.5.2. Les valeurs par défaut sont calculées à la demande
    • 10.5.3. Les valeurs par défaut peuvent faire référence à d’autres variables dans le modèle
    • 10.5.4. Valeurs par défaut pour les motifs
    • 10.5.5. Valeurs par défaut plus complexes
  • 10.6. Plus de fonctionnalités de déstructuration d’objets
    • 10.6.1. Valeur de la propriété raccourcis
    • 10.6.2. Clés de propriété calculées
  • 10.7. Plus de fonctionnalités de déstructuration de tableaux
    • 10.7.1. Élision
    • 10.7.2. Opérateur de repos (...)
  • 10.8. Vous pouvez affecter à plus que de simples variables
  • 10.9. Pièges de la déstructuration
    • 10.9.1. Ne commencez pas une déclaration avec une accolade
  • 10.10. Exemples de déstructuration
    • 10.10.1. La déstructuration a renvoyé des tableaux
    • 10.10.2. Déstructuration des objets renvoyés
    • 10.10.3. Tableau – déstructuration des valeurs itérables
    • 10.10.4. Valeurs de retour multiples
  • 10.11. L’algorithme de déstructuration
    • 10.11.1. L’algorithme
    • 10.11.2. Application de l’algorithme

10.1 Aperçu #

La déstructuration est un moyen pratique d’extraire plusieurs valeurs à partir de données stockées dans des objets et des tableaux (éventuellement imbriqués). Il peut être utilisé dans des emplacements qui reçoivent des données (comme le côté gauche d’une affectation). La façon d’extraire les valeurs est spécifiée via des modèles (lisez la suite pour des exemples).

10.1.1 Déstructuration d’objets #

Déstructuration d’objets:

const obj = { first: 'Jane', last: 'Doe' };const {first: f, last: l} = obj; // f = 'Jane'; l = 'Doe'// {prop} is short for {prop: prop}const {first, last} = obj; // first = 'Jane'; last = 'Doe'

La déstructuration aide au traitement des valeurs de retour:

const obj = { foo: 123 };const {writable, configurable} = Object.getOwnPropertyDescriptor(obj, 'foo');console.log(writable, configurable); // true true

10.1.2 Déstructuration de tableau #

Déstructuration de tableau (fonctionne pour toutes les valeurs itérables):

const iterable = ;const  = iterable; // x = 'a'; y = 'b'

La déstructuration aide au traitement des valeurs de retour:

const  = /^(\d\d\d\d)-(\d\d)-(\d\d)$/ .exec('2999-12-31');

10.1.3 Où la déstructuration peut-elle être utilisée ? #

La déstructuration peut être utilisée aux emplacements suivants (je montre des modèles de tableau à démontrer; les modèles d’objets fonctionnent tout aussi bien):

// Variable declarations:const  = ;let  = ;var  = ;// Assignments: = ;// Parameter definitions:function f() { ··· }f();

Vous pouvez également vous déstructurer dans une boucle for-of:

const arr = ;for (const  of arr.entries()) { console.log(index, element);}// Output:// 0 a// 1 b

10.2 Contexte: Construire des données par rapport à extraire des données #

Pour bien comprendre ce qu’est la déstructuration, examinons d’abord son contexte plus large.

JavaScript a des opérations pour construire des données, une propriété à la fois:

const obj = {};obj.first = 'Jane';obj.last = 'Doe';

La même syntaxe peut être utilisée pour extraire des données. Encore une fois, une propriété à la fois:

const f = obj.first;const l = obj.last;

De plus, il existe une syntaxe pour construire plusieurs propriétés en même temps, via un littéral d’objet:

const obj = { first: 'Jane', last: 'Doe' };

Avant ES6, il n’existait aucun mécanisme correspondant d’extraction de données. C’est ce qu’est la déstructuration – elle vous permet d’extraire plusieurs propriétés d’un objet via un modèle d’objet. Par exemple, sur le côté gauche d’une tâche:

const { first: f, last: l } = obj;

Vous pouvez également déstructurer des tableaux via des motifs:

const  = ; // x = 'a'; y = 'b'

10.3 Modèles de déstructuration #

Les deux parties suivantes sont impliquées dans la déstructuration:

  • Source de déstructuration : les données à déstructurer. Par exemple, le côté droit d’une affectation de déstructuration.
  • Cible de déstructuration : le motif utilisé pour la déstructuration. Par exemple, le côté gauche d’une affectation de déstructuration.

La cible de déstructuration est l’un des trois modèles suivants:

  • Cible d’affectation. Par exemple: x
    • Une cible d’affectation est généralement une variable. Mais dans l’affectation de déstructuration, vous avez plus d’options, comme je l’expliquerai plus tard.
  • Modèle d’objet. Par exemple: { first: "pattern", last: "pattern" }
    • Les parties d’un modèle d’objet sont des propriétés, les valeurs de propriété sont à nouveau des modèles (récursivement).
  • Motif de tableau. Par exemple:
    • Les parties d’un motif de tableau sont des éléments, les éléments sont à nouveau des motifs (récursivement).

Cela signifie que vous pouvez imbriquer des motifs, arbitrairement profondément:

const obj = { a: , b: true };const { a:  } = obj; // f = 123

10.3.1 Choisissez ce dont vous avez besoin #

Si vous déstructurez un objet, vous ne mentionnez que les propriétés qui vous intéressent:

const { x: x } = { x: 7, y: 3 }; // x = 7

Si vous déstructurez un tableau, vous pouvez choisir d’extraire uniquement un préfixe:

const  = ; // x='a'; y='b';

10.4 Comment les modèles accèdent-ils aux entrailles des valeurs ? #

Dans une affectation pattern = someValue, comment le pattern accède-t-il à ce qui se trouve à l’intérieur de someValue?

10.4.1 Les modèles d’objets contraignent les valeurs aux objets #

Le modèle d’objet contraint les sources de déstructuration aux objets avant d’accéder aux propriétés. Cela signifie que cela fonctionne avec des valeurs primitives:

const {length : len} = 'abc'; // len = 3const {toString: s} = 123; // s = Number.prototype.toString
10.4.1.1 A défaut de déstructurer une valeur #

La coercition à l’objet n’est pas effectuée via Object(), mais via l’opération interne ToObject(). Les deux opérations traitent undefined et null différemment.

Object() convertit les valeurs primitives en objets wrapper et laisse les objets intacts:

> typeof Object('abc')'object'> var obj = {};> Object(obj) === objtrue

It also converts undefined and null to empty objects:

> Object(undefined){}> Object(null){}

In contrast, ToObject() throws a TypeError if it encounters undefined or null. Therefore, the following destructurings fail, even before destructuring accesses any properties:

const { prop: x } = undefined; // TypeErrorconst { prop: y } = null; // TypeError

Par conséquent, vous pouvez utiliser le modèle d’objet vide {} pour vérifier si une valeur est coercible pour un objet. Comme nous l’avons vu, seuls undefined et null ne le sont pas:

({} = ); // OK, Arrays are coercible to objects({} = 'abc'); // OK, strings are coercible to objects({} = undefined); // TypeError({} = null); // TypeError

Les parenthèses autour des expressions sont nécessaires car les instructions ne doivent pas commencer par des accolades en JavaScript (les détails sont expliqués plus loin).

10.4.2 Les modèles de tableau fonctionnent avec des itérables #

La déstructuration de tableau utilise un itérateur pour accéder aux éléments d’une source. Par conséquent, vous pouvez déstructurer toute valeur itérable. Regardons des exemples de valeurs itérables.

Les chaînes sont itérables:

const  = 'abc'; // x='a'; y=

N’oubliez pas que l’itérateur sur les chaînes renvoie des points de code (« Caractères Unicode », 21 bits), pas des unités de code (« caractères JavaScript », 16 bits). (Pour plus d’informations sur Unicode, consultez le chapitre « Chapitre 24. Unicode et JavaScript « dans « Parler JavaScript ».) Par exemple:

const  = 'a\uD83D\uDCA9c'; // x='a'; y='\uD83D\uDCA9'; z='c'

Vous ne pouvez pas accéder aux éléments d’un ensemble via des indices, mais vous pouvez le faire via un itérateur. Par conséquent, la déstructuration des tableaux fonctionne pour les ensembles:

const  = new Set(); // x='a'; y='b';

L’itérateur Set renvoie toujours les éléments dans l’ordre dans lequel ils ont été insérés, c’est pourquoi le résultat de la déstructuration précédente est toujours le même.

10.4.2.1 À défaut de déstructurer un tableau une valeur #

Une valeur est itérable si elle a une méthode dont la clé est Symbol.iterator qui renvoie un objet. Array-destructuring lève un TypeError si la valeur à déstructurer n’est pas itérable:

let x; = ; // OK, Arrays are iterable = 'abc'; // OK, strings are iterable = { * () { yield 1 } }; // OK, iterable = {}; // TypeError, empty objects are not iterable = undefined; // TypeError, not iterable = null; // TypeError, not iterable

Le TypeError est lancé avant même d’accéder aux éléments de l’itérable, ce qui signifie que vous pouvez utiliser le modèle de tableau vide pour vérifier si une valeur est itérable:

 = {}; // TypeError, empty objects are not iterable = undefined; // TypeError, not iterable = null; // TypeError, not iterable

10.5 Valeurs par défaut #

Les valeurs par défaut sont une fonctionnalité facultative des modèles. Ils fournissent une solution de secours si rien n’est trouvé dans la source. Si une partie (une propriété d’objet ou un élément de tableau) n’a pas de correspondance dans la source, elle est mise en correspondance avec:

  • sa valeur par défaut (si elle est spécifiée; c’est facultatif)
  • undefined ( sinon)

Regardons un exemple. Dans la déstructuration suivante, l’élément à l’indice 0 n’a pas de correspondance du côté droit. Par conséquent, la déstructuration continue en faisant correspondre x à 3, ce qui conduit à ce que x soit défini sur 3.

const  = ; // x = 3; y = undefined

Vous pouvez également utiliser des valeurs par défaut dans les modèles d’objets:

const {foo: x=3, bar: y} = {}; // x = 3; y = undefined

10.5.1 undefined déclencheurs valeurs par défaut #

Les valeurs par défaut sont également utilisées si une pièce a une correspondance et que cette correspondance est undefined:

const  = ; // x = 1const {prop: y=2} = {prop: undefined}; // y = 2

La justification de ce comportement est expliquée dans le chapitre suivant, dans la section sur les valeurs par défaut des paramètres.

10.5.2 Les valeurs par défaut sont calculées à la demande #

Les valeurs par défaut elles-mêmes ne sont calculées que lorsqu’elles sont nécessaires. En d’autres termes, cette déstructuration:

const {prop: y=someFunc()} = someValue;

est équivalent à:

let y;if (someValue.prop === undefined) { y = someFunc();} else { y = someValue.prop;}

Vous pouvez observer que si vous utilisez console.log():

> function log(x) { console.log(x); return 'YES' }> const = ;> a'YES'> const = ;> b123

In the second destructuring, the default value is not triggered and log() is not called.

10.5.3 Default values can refer to other variables in the pattern #

A default value can refer to any variable, including other variables in the same pattern:

const  = ; // x=3; y=3const  = ; // x=7; y=7const  = ; // x=7; y=2

Cependant, la commande compte: les variables x et y sont déclarées de gauche à droite et produisent un ReferenceError si elles sont accessibles avant leurs déclarations:

const  = ; // ReferenceError

10.5.4 Valeurs par défaut pour les modèles #

Jusqu’à présent, nous n’avons vu que des valeurs par défaut pour les variables, mais vous pouvez également les associer à des modèles:

const  = ;

Qu’est-ce que cela signifie? Rappelez la règle des valeurs par défaut : Si une pièce n’a pas de correspondance dans la source, la déstructuration continue avec la valeur par défaut.

L’élément à l’indice 0 n’a pas de correspondance, c’est pourquoi la déstructuration continue avec:

const { prop: x } = {}; // x = undefined

Vous pouvez plus facilement voir pourquoi les choses fonctionnent de cette façon si vous remplacez le motif { prop: x } par la variable pattern:

const  = ;

10.5.5 Valeurs par défaut plus complexes #

Explorons davantage les valeurs par défaut des modèles. Dans l’exemple suivant, nous attribuons une valeur à x via la valeur par défaut { prop: 123 }:

const  = ;

Comme l’élément de tableau à l’index 0 n’a pas de correspondance sur le côté droit, la déstructuration se poursuit comme suit et x est défini sur 123.

const { prop: x } = { prop: 123 }; // x = 123

Cependant, x ne reçoit pas de valeur de cette manière si le côté droit a un élément à l’index 0, car la valeur par défaut n’est pas déclenchée.

const  = ;

Dans ce cas, la déstructuration se poursuit avec:

const { prop: x } = {}; // x = undefined

Ainsi, si vous voulez que x soit 123 si l’objet ou la propriété est manquant, vous devez spécifier une valeur par défaut pour x lui-même:

const  = ;

Ici, la déstructuration se poursuit comme suit, indépendamment du fait que le côté droit soit ou .

const { prop: x=123 } = {}; // x = 123

10.6 Plus de fonctionnalités de déstructuration d’objets #

10.6.1 Abréviations de valeur de propriété #

Les abréviations de valeur de propriété sont une caractéristique des littéraux d’objets: Si la valeur de la propriété est une variable portant le même nom que la clé de propriété, vous pouvez l’omettre. Cela fonctionne aussi pour la déstructuration:

const { x, y } = { x: 11, y: 8 }; // x = 11; y = 8// Same as:const { x: x, y: y } = { x: 11, y: 8 };

Vous pouvez également combiner des raccourcis de valeur de propriété avec des valeurs par défaut:

const { x, y = 1 } = {}; // x = undefined; y = 1

10.6.2 Clés de propriété calculées #

Les clés de propriété calculées sont une autre fonctionnalité littérale d’objet qui fonctionne également pour la déstructuration. Vous pouvez spécifier la clé d’une propriété via une expression, si vous la mettez entre crochets:

const FOO = 'foo';const { : f } = { foo: 123 }; // f = 123

Les clés de propriété calculées vous permettent de déstructurer les propriétés dont les clés sont des symboles:

// Create and destructure a property whose key is a symbolconst KEY = Symbol();const obj = { : 'abc' };const { : x } = obj; // x = 'abc'// Extract Array.prototypeconst { : func } = ;console.log(typeof func); // function

10.7 Plus de fonctionnalités de déstructuration de tableaux #

10.7.1 Elision #

Elision vous permet d’utiliser la syntaxe des « trous » de tableaux pour ignorer les éléments pendant la déstructuration:

const  = ; // x = 'c'; y = 'd'

10.7.2 Opérateur de repos (...) #

L’opérateur rest vous permet d’extraire les éléments restants d’un itérable dans un tableau. Si cet opérateur est utilisé dans un modèle de tableau, il doit venir en dernier:

const  = ; // x='a'; y=

Si l’opérateur ne trouve aucun élément, il fait correspondre son opérande au tableau vide. Autrement dit, il ne produit jamais undefined ou null. Par exemple:

const  = ; // x='a'; y=undefined; z=

L’opérande de l’opérateur rest n’a pas besoin d’être une variable, vous pouvez également utiliser des modèles:

const ] = ; // x = 'a'; y = 'b'; z = 'c'

L’opérateur rest déclenche la déstructuration suivante:

 =

10.8 Vous pouvez affecter à plus que de simples variables #

Si vous affectez via la déstructuration, chaque cible d’affectation peut être tout ce qui est autorisé sur le côté gauche d’une affectation normale.

Par exemple, une référence à une propriété (obj.prop):

const obj = {};({ foo: obj.prop } = { foo: 123 });console.log(obj); // {prop:123}

Ou une référence à un élément de tableau (arr):

const arr = ;({ bar: arr } = { bar: true });console.log(arr); //

Vous pouvez également attribuer à des propriétés d’objet et des éléments de tableau via l’opérateur rest (...):

const obj = {}; = ; // first = 'a'; obj.prop =

Si vous déclarez des variables ou définissez des paramètres via la déstructuration, vous devez utiliser des identifiants simples, vous ne pouvez pas faire référence aux propriétés des objets et aux éléments de tableau.

10.9 Pièges de la déstructuration #

Il y a deux choses à prendre en compte lors de l’utilisation de la déstructuration:

  • Vous ne pouvez pas commencer une déclaration avec une accolade.
  • Pendant la déstructuration, vous pouvez soit déclarer des variables, soit les affecter, mais pas les deux.

Les deux sections suivantes contiennent les détails.

10.9.1 Ne commencez pas une instruction par une accolade #

Car les blocs de code commencent par une accolade, les instructions ne doivent pas commencer par une accolade. Ceci est regrettable lors de l’utilisation de la déstructuration d’objets dans une affectation:

{ a, b } = someObject; // SyntaxError

La solution consiste à mettre l’expression complète entre parenthèses:

({ a, b } = someObject); // OK

La syntaxe suivante ne fonctionne pas:

({ a, b }) = someObject; // SyntaxError

Avec let, var et const, les accolades ne posent jamais de problèmes:

const { a, b } = someObject; // OK

10.10 Exemples de déstructuration #

Commençons par quelques exemples plus petits.

La boucle for-of prend en charge la déstructuration:

const map = new Map().set(false, 'no').set(true, 'yes');for (const  of map) { console.log(key + ' is ' + value);}

Vous pouvez utiliser la déstructuration pour échanger des valeurs. C’est quelque chose que les moteurs pourraient optimiser, de sorte qu’aucun tableau ne serait créé.

 = ;

Vous pouvez utiliser la déstructuration pour diviser un tableau:

const  = ; // first = 'a'; rest =

10.10.1 Déstructuration des tableaux renvoyés #

Certaines opérations JavaScript intégrées renvoient des tableaux. La déstructuration aide à les traiter:

const  = /^(\d\d\d\d)-(\d\d)-(\d\d)$/ .exec('2999-12-31');

Si vous n’êtes intéressé que par les groupes (et non par la correspondance complète, all), vous pouvez utiliser elision pour ignorer l’élément de tableau à l’index 0:

const  = /^(\d\d\d\d)-(\d\d)-(\d\d)$/ .exec('2999-12-31');

exec() renvoie null si l’expression régulière ne correspond pas. Malheureusement, vous ne pouvez pas gérer null via les valeurs par défaut, c’est pourquoi vous devez utiliser l’opérateur Or (||) dans ce cas:

const  = /^(\d\d\d\d)-(\d\d)-(\d\d)$/ .exec(someStr) || ;

Array.prototype.split() renvoie un tableau. Par conséquent, la déstructuration est utile si vous êtes intéressé par les éléments, pas par le tableau:

const cells = 'Jane\tDoe\tCTO'const  = cells.split('\t');console.log(firstName, lastName, title);

10.10.2 Déstructuration des objets renvoyés #

La déstructuration est également utile pour extraire des données d’objets renvoyés par des fonctions ou des méthodes. Par exemple, la méthode itérateur next() renvoie un objet avec deux propriétés, done et value. Le code suivant enregistre tous les éléments du tableau arr via l’itérateur iter. La déstructuration est utilisée dans la ligne A.

const arr = ;const iter = arr();while (true) { const {done,value} = iter.next(); // (A) if (done) break; console.log(value);}

10.10.3 Array-déstructuration des valeurs itérables #

Array-déstructuration fonctionne avec n’importe quelle valeur itérable. Cela est parfois utile:

const  = new Set().add('a').add('b'); // x = 'a'; y = 'b'const  = 'foo'; // a = 'f'; b = 'o'

10.10.4 Valeurs de retour multiples #

Pour voir l’utilité de plusieurs valeurs de retour, implémentons une fonction findElement(a, p) qui recherche le premier élément du tableau a pour lequel la fonction p renvoie true. La question est: que devrait retourner findElement()? Parfois, on s’intéresse à l’élément lui-même, parfois à son index, parfois aux deux. L’implémentation suivante renvoie les deux.

function findElement(array, predicate) { for (const  of array.entries()) { // (A) if (predicate(element, index, array)) { // We found an element: return { element, index }; // Same as (property value shorthands): // { element: element, index: index } } } // We couldn't find anything; return failure values: return { element: undefined, index: -1 };}

La fonction itère sur tous les éléments de array, via la méthode Tableau entries(), qui renvoie une itérable sur paires (ligne A). Les parties des paires sont accessibles via la déstructuration.

Utilisons findElement():

const arr = ;const {element, index} = findElement(arr, x => x % 2 === 0); // element = 8, index = 1

Plusieurs fonctionnalités d’ECMAScript 6 nous ont permis d’écrire du code plus concis: Le rappel est une fonction de flèche; la valeur de retour est déstructurée via un modèle d’objet avec des raccourcis de valeur de propriété.

En raison de index et element se référant également aux clés de propriété, l’ordre dans lequel nous les mentionnons n’a pas d’importance. Nous pouvons les échanger et rien ne change:

const {index, element} = findElement(···);

Nous avons géré avec succès le cas d’avoir besoin à la fois d’index et d’élément. Et si nous ne nous intéressions qu’à l’un d’entre eux? Il s’avère que, grâce à ECMAScript 6, notre implémentation peut également s’en occuper. Et la surcharge syntaxique par rapport aux fonctions avec des valeurs de retour uniques est minime.

const a = ;const {element} = findElement(a, x => x % 2 === 0); // element = 8const {index} = findElement(a, x => x % 2 === 0); // index = 1

À chaque fois, nous n’extrayons que la valeur de la propriété dont nous avons besoin.

10.11 L’algorithme de déstructuration #

Cette section examine la déstructuration sous un angle différent : en tant qu’algorithme de correspondance de motif récursif.

À la fin, j’utiliserai l’algorithme pour expliquer la différence entre les deux déclarations de fonction suivantes.

function move({x=0, y=0} = {}) { ··· }function move({x, y} = { x: 0, y: 0 }) { ··· }

10.11.1 L’algorithme #

Une affectation de déstructuration ressemble à ceci:

"pattern" = "value"

Nous voulons utiliser pattern pour extraire des données de value. Je vais maintenant décrire un algorithme pour le faire, qui est connu en programmation fonctionnelle sous le nom de pattern matching (court: matching). L’algorithme spécifie l’opérateur ← (« match against ») pour l’affectation de déstructuration qui fait correspondre a pattern à a value et attribue des variables tout en le faisant:

"pattern" ← "value"

L’algorithme est spécifié via des règles récursives qui séparent les deux opérandes de l’opérateur ←. La notation déclarative peut prendre un peu de temps pour s’y habituer, mais elle rend la spécification de l’algorithme plus concise. Chaque règle comporte deux parties:

  • L’en-tête (première ligne) décrit la condition qui déclenche la règle.
  • Le corps (lignes restantes) décrit ce qui se passe si la règle est déclenchée.

Regardons un exemple:

  • ( 2c) {key: "pattern", "properties"} ← obj
     "pattern" ← obj.key {"properties"} ← obj
  • ( 2e) {} ← obj (il ne reste plus de propriétés)
     // Nothing to do

Dans la règle (2c), la tête signifie que cette règle est exécutée s’il existe un modèle d’objet avec au moins une propriété et zéro ou plusieurs propriétés restantes. Ce modèle est mis en correspondance avec une valeur obj. L’effet de cette règle est que l’exécution se poursuit avec le modèle de valeur de propriété correspondant à obj.key et les propriétés restantes correspondant à obj.

Dans la règle (2e), la tête signifie que cette règle est exécutée si le motif d’objet vide {} est mis en correspondance avec une valeur obj. Alors il n’y a rien à faire.

Chaque fois que l’algorithme est appelé, les règles sont vérifiées de haut en bas et seule la première règle applicable est exécutée.

Je montre uniquement l’algorithme d’affectation de déstructuration. Les déclarations de variables de déstructuration et les définitions de paramètres de déstructuration fonctionnent de la même manière.

Je ne couvre pas les fonctionnalités avancées (clés de propriété calculées; raccourcis de valeur de propriété; propriétés d’objet et éléments de tableau en tant que cibles d’affectation), soit. Seulement les bases.

10.11.1.1 Patterns #

Un pattern est soit:

  • Une variable: x
  • Un motif d’objet: {"properties"}
  • Un motif de tableau:

Chacune des sections suivantes décrit l’un de ces trois cas.

Les trois sections suivantes précisent comment gérer ces trois cas. Chaque section contient une ou plusieurs règles numérotées.

10.11.1.2 Variable #
  • (1) x ← value ( y compris undefined et null)
     x = value
10.11.1.3 Modèle d’objet #
  • ( 2a) {"properties"} ← undefined
     throw new TypeError();
  • ( 2b) {"properties"} ← null
     throw new TypeError();
  • ( 2c) {key: "pattern", "properties"} ← obj
     "pattern" ← obj.key {"properties"} ← obj
  • ( 2d) {key: "pattern" = default_value, "properties"} ← obj
     const tmp = obj.key; if (tmp !== undefined) { "pattern" ← tmp } else { "pattern" ← default_value } {"properties"} ← obj
  • ( 2e) {} ← obj (il ne reste plus de propriétés)
     // Nothing to do
10.11.1.4 Modèle de tableau #

Modèle de tableau et itérable. L’algorithme de déstructuration de tableau commence par un modèle de tableau et un itérable:

  • ( 3 bis) ← non_iterable
    assert(!isIterable(non_iterable))
     throw new TypeError();
  • ( 3b) ← iterable
    assert(isIterable(iterable))
     const iterator = iterable(); "elements" ← iterator

Fonction d’aide:

function isIterable(value) { return (value !== null && typeof value === 'object' && typeof value === 'function');}

Éléments de tableau et itérateur. L’algorithme continue avec les éléments du motif (côté gauche de la flèche) et l’itérateur obtenu à partir de l’itérable (côté droit de la flèche).

  • ( 3c) "pattern", "elements" ← iterator
     "pattern" ← getNext(iterator) // undefined after last item "elements" ← iterator
  • ( 3d) "pattern" = default_value, "elements" ← iterator
     const tmp = getNext(iterator); // undefined after last item if (tmp !== undefined) { "pattern" ← tmp } else { "pattern" ← default_value } "elements" ← iterator
  • ( 3e) , "elements" ← iterator (trou, élision)
     getNext(iterator); // skip "elements" ← iterator
  • ( 3f) ..."pattern" ← iterator (toujours la dernière partie!)
     const tmp = ; for (const elem of iterator) { tmp.push(elem); } "pattern" ← tmp
  • ( 3g) ← iterator (il ne reste plus aucun élément)
     // Nothing to do

Fonction d’aide:

function getNext(iterator) { const {done,value} = iterator.next(); return (done ? undefined : value);}

10.11.2 En appliquant l’algorithme #

Dans ECMAScript 6, vous pouvez simuler des paramètres nommés si l’appelant utilise un littéral d’objet et que l’appelé utilise la déstructuration. Cette simulation est expliquée en détail dans le chapitre sur la gestion des paramètres. Le code suivant montre un exemple : la fonction move1() a deux paramètres nommés, x et y:

function move1({x=0, y=0} = {}) { // (A) return ;}move1({x: 3, y: 8}); // move1({x: 3}); // move1({}); // move1(); //

Il y a trois valeurs par défaut à la ligne A:

  • Les deux premières valeurs par défaut vous permettent d’omettre x et y.
  • La troisième valeur par défaut vous permet d’appeler move1() sans paramètres (comme dans la dernière ligne).

Mais pourquoi définiriez-vous les paramètres comme dans l’extrait de code précédent? Pourquoi pas comme suit – qui est également tout à fait légal code ES6?

function move2({x, y} = { x: 0, y: 0 }) { return ;}

Pour voir pourquoi move1() est correct, utilisons les deux fonctions pour deux exemples. Avant de faire cela, voyons comment le passage des paramètres peut être expliqué via la correspondance.

10.11.2.1 Contexte: passage des paramètres via la correspondance #

Pour les appels de fonction, les paramètres formels (définitions de fonction internes) sont mis en correspondance avec les paramètres réels (appels de fonction internes). À titre d’exemple, prenez la définition de fonction suivante et l’appel de fonction suivant.

function func(a=0, b=0) { ··· }func(1, 2);

Les paramètres a et b sont configurés de manière similaire à la déstructuration suivante.

 ←
10.11.2.2 En utilisant move2() #

Examinons comment fonctionne la déstructuration pour move2().

Exemple 1. move2() conduit à cette déstructuration:

 ←

L’élément de tableau unique sur le côté gauche n’a pas de correspondance sur le côté droit, c’est pourquoi {x,y} est mis en correspondance avec la valeur par défaut et non avec les données du côté droit (règles 3b, 3d):

{x, y} ← { x: 0, y: 0 }

Le côté gauche contient des abréviations de valeur de propriété, c’est une abréviation pour:

{x: x, y: y} ← { x: 0, y: 0 }

Cette déstructuration conduit aux deux affectations suivantes (règles 2c, 1):

x = 0;y = 0;

Exemple 2. Examinons l’appel de fonction move2({z:3}) qui conduit à la déstructuration suivante:

 ←

Il y a un élément de tableau à l’index 0 sur le côté droit. Par conséquent, la valeur par défaut est ignorée et l’étape suivante est (règle 3d):

{x, y} ← { z: 3 }

Cela conduit à la fois x et y à undefined, ce qui n’est pas ce que nous voulons.

10.11.2.3 Utilisation move1() #

Essayons move1().

Exemple 1: move1()

 ←

Nous n’avons pas d’élément de tableau à l’index 0 sur le côté droit et utilisons la valeur par défaut (règle 3d):

{x=0, y=0} ← {}

Le côté gauche contient des raccourcis de valeur de propriété, ce qui signifie que cette déstructuration est équivalente à:

{x: x=0, y: y=0} ← {}

Ni la propriété x ni la propriété y n’ont de correspondance sur le côté droit. Par conséquent, les valeurs par défaut sont utilisées et les destructurations suivantes sont effectuées ensuite (règle 2d):

x ← 0y ← 0

Cela conduit aux affectations suivantes (règle 1):

x = 0y = 0

Exemple 2: move1({z:3})

 ←

Le premier élément du modèle de tableau a une correspondance sur le côté droit et cette correspondance est utilisée pour continuer la déstructuration (règle 3d):

{x=0, y=0} ← {z:3}

Comme dans l’exemple 1, il n’y a pas de propriétés x et y sur le côté droit et les valeurs par défaut sont utilisées:

x = 0y = 0
10.11.2.4 Conclusion #

Les exemples démontrent que les valeurs par défaut sont une caractéristique des parties de motif (propriétés d’objet ou éléments de tableau). Si une pièce n’a pas de correspondance ou est mise en correspondance avec undefined, la valeur par défaut est utilisée. C’est-à-dire que le modèle est comparé à la valeur par défaut.