`var {...} = ...`语句中的花括号是做什么的？

Question

不确定这是否是特定于Mozilla的JS语法,但我经常发现变量是以这种方式声明的,例如,在附加SDK文档中:

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

并在各种chrome Javascript(let声明被用来代替var),

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

我发现它很混乱但我无法找到任何关于语法的文档,即使在MDN上也是如此.

Answer 1

你正在看的是一个解构分配.这是Haskell中的一种模式匹配形式.

使用解构赋值,您可以从对象和数组中提取值,并使用对象和数组文字语法将它们分配给新声明的变量.这使代码更加简洁.

例如:

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

var {a, b, c} = ascii;

上面的代码相当于:

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

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

对阵列类似:

var ascii = [97, 98, 99];

var [a, b, c] = ascii;

这相当于:

var ascii = [97, 98, 99];

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

您还可以使用以下__CODE__方式提取和重命名对象属性:

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

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

这相当于:

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

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

这里的所有都是它的.

Answer 2

它们都是JavaScript 1.7的功能.第一个是块级变量:

let允许您声明变量,将其范围限制为使用它的块,语句或表达式.这与var关键字不同,关键字全局定义变量,或者与整个函数本地定义,而不管块范围如何.

第二个称为解构:

解构赋值使得可以使用反映数组和对象文字构造的语法从数组或对象中提取数据.
...
使用解构赋值可以做的一件特别有用的事情是在单个语句中读取整个结构,尽管可以使用它们执行许多有趣的操作,如下面的示例部分所示.

对于那些熟悉Python的人来说,它与这种语法类似:

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

第一个代码块是以下的简写:

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

您可以将第二个代码块重写为:

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

Answer 3

这是 JavaScript 中的破坏性赋值，是 ES2015 标准的一部分。它将数组中的值或对象的属性解包或提取到不同的变量中。

数组解构

无需解构

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

console.log(one, two, three);

随着解构

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

console.log(one, two, three);

对象解构

无需解构

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

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

随着解构

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

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

分配新的变量名称

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

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