Que signifient les accolades dans le champ `var { ... } = ...`` ?

Question

Je ne sais pas si c'est une syntaxe JS spécifique à Mozilla, mais j'ai souvent trouvé des variables déclarées de cette façon, par exemple dans Documentation du SDK de l'add-on :

var { Hotkey } = require("sdk/hotkeys");

et dans divers Javascript de chrome ( let est utilisée à la place de la déclaration var ),

let { classes: Cc, interfaces: Ci, results: Cr, utils: Cu }  = Components;

J'ai trouvé cela très déroutant, mais je ne parviens pas à trouver de documentation sur les deux syntaxes, même sur le site de la Commission européenne. MDN .

Answer 1

Il s'agit d'une mission de déstructuration. C'est une forme de filtrage par motif comme en Haskell.

Grâce à l'affectation de déstructuration, vous pouvez extraire des valeurs d'objets et de tableaux et les affecter à des variables nouvellement déclarées en utilisant la syntaxe des littéraux d'objets et de tableaux. Cela rend le code beaucoup plus succinct.

Par exemple :

var ascii = {
    a: 97,
    b: 98,
    c: 99
};

var {a, b, c} = ascii;

Le code ci-dessus est équivalent à :

var ascii = {
    a: 97,
    b: 98,
    c: 99
};

var a = ascii.a;
var b = ascii.b;
var c = ascii.c;

De même pour les tableaux :

var ascii = [97, 98, 99];

var [a, b, c] = ascii;

Ceci est équivalent à :

var ascii = [97, 98, 99];

var a = ascii[0];
var b = ascii[1];
var c = ascii[2];

Vous pouvez également extraire et renommer une propriété d'objet comme suit :

var ascii = {
    a: 97,
    b: 98,
    c: 99
};

var {a: A, b: B, c: C} = ascii;

Ceci est équivalent à :

var ascii = {
    a: 97,
    b: 98,
    c: 99
};

var A = ascii.a;
var B = ascii.b;
var C = ascii.c;

C'est tout ce qu'il y a à faire.

Answer 2

Ce sont toutes deux des fonctionnalités de JavaScript 1.7. La première est variables au niveau des blocs :

let vous permet de déclarer des variables en limitant leur portée au bloc, à l'instruction ou à l'expression dans lesquels elles sont utilisées. Ceci est différent de la méthode var qui définit une variable globalement, ou localement pour une fonction entière, indépendamment de la portée du bloc.

Le second s'appelle déstructuration :

L'affectation de déstructuration permet d'extraire des données de tableaux ou d'objets à l'aide d'une syntaxe qui reflète la construction des littéraux de tableaux et d'objets.
...
Une chose particulièrement utile que vous pouvez faire avec l'affectation de déstructuration est de lire une structure entière en une seule instruction, bien qu'il y ait un certain nombre de choses intéressantes que vous pouvez faire avec eux, comme le montre la section pleine d'exemples qui suit.

Pour ceux qui sont familiers avec Python, c'est similaire à cette syntaxe :

>>> a, (b, c) = (1, (2, 3))
>>> a, b, c
(1, 2, 3)

Le premier morceau de code est une abréviation de :

var {Hotkey: Hotkey} = require("sdk/hotkeys");
// Or
var Hotkey = require("sdk/hotkeys").Hotkey;

Vous pouvez réécrire le deuxième morceau de code comme suit :

let Cc = Components.classes;
let Ci = Components.interfaces;
let Cr = Components.results;
let Cu = Components.utils;

Answer 3

Il s'agit d'une affectation de destruction en JavaScript, qui fait partie de la norme ES2015. Elle dépaquette ou extrait les valeurs des tableaux ou les propriétés des objets dans des variables distinctes.

Destructuration des tableaux

Sans déstructuration

var foo = ["one", "two", "three"];
var one = foo[0];
var two = foo[1];
var three = foo[2];

console.log(one, two, three);

Avec la déstructuration

var foo = ["one", "two", "three"];
var [one, two, three] = foo;

console.log(one, two, three);

Destructuration d'objets

Sans déstructuration

var o = {p: 42, q: true};
var p = o.p;
var q = o.q;

console.log(p); //42
console.log(q); //true 

Avec la déstructuration

var o = { p: 42, q: true };
var { p, q } = o;

console.log(p); //42
console.log(q); //true

Attribuer de nouveaux noms de variables

var o = { p: 42, q: true };
var { p: foo, q: bar } = o;

console.log(foo); //42
console.log(bar); //true

Answer 4

J'ai essayé d'évaluer les deux expressions dans la console, mais les deux renvoient des erreurs de syntaxe. Il y a un journal : Identificateur requis mais reçu '{' ! Je suppose donc qu'il s'agit de syntaxes spécifiques à Mozilla-Firefox.

Answer 5

Ce n'est pas de la syntaxe JavaScript, c'est de la CommonJS ( c'est ce que vous utilisez pour les modules complémentaires développés avec le SDK).