var {…} =…语句中的花括号有什么作用?


117

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

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

并在各种Chrome Javascript中(let用代替var),

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

我发现这很令人困惑,但是即使在MDN上,我也找不到有关这两种语法的任何文档。


@Blender您将如何在symbolhound.com上搜索此结构?
trusktr 2013年

1
@trusktr:有点晚: symbolhound.com/…–
Blender

简短的答案是在这里:stackoverflow.com/a/45909752/203704
Cliff Hall

我可以进行基本的解构。但是,在此示例中,我们还将值分配给其他属性名称,并且语法非常混乱。它与对象创建语法相反,并且增加了更多的混乱。
索尔(Sol)

Answers:


72

它们都是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;

2
根据我的实验,看起来var { Hotkey }等同于var { Hotkey: Hotkey }。感谢您查找文档!
timdream 2013年

@timdream:我有一种类似的感觉,但是有什么不同var Hotkey = require(...).Hotkey呢?还是只是保存击键?
搅拌器

看起来像这样:-/(
嘿嘿

2
另外,使用这种不常见的语法会使所有内容变得更加神秘。
trusktr 2013年

第二个是“对象
解构

80

您正在查看的是一项解构任务。这是一种模式匹配形式,就像在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];

您还可以如下提取并重命名对象属性:

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;

这里的所有都是它的。


12
+1对于对象分解示例,它们确实很有帮助。的MDN的例子只显示阵列解构。
搅拌器

@Blender-他们确实提供了对象销毁示例。看一下循环遍历对象数组中的值
Aadit M Shah

我的意思是var {a, b, c} = ascii;语法。
Blender 2013年

最后一个例子确实很奇怪,因为通常在冒号左侧是要分配的内容。
柯蒂斯,

1

这是JavaScript中的破坏性工作,并且是ES2015标准的一部分。它可以将数组中的值解压缩或从对象中提取属性的值,或者将其提取为不同的变量。例如:阵列解构

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

//通过解构var [one,two,three] = foo

例如:对象解构

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

console.log(p); // 42 console.log(q); //正确

//分配新的变量名称var {p:foo,q:bar} = o;

console.log(foo); // 42 console.log(bar); //正确


0

let关于MDN 的声明,有文档:https : //developer.mozilla.org/en-US/docs/JavaScript/Reference/Statements/let

let类似于var它限制了声明的变量的范围。它允许您在一个if(){}块(或某个其他块)中声明一个变量,并使该变量仅在该块内“可见”(JavaScript,到目前为止,它具有函数作用域,而不像大多数其他语言那样具有块作用域)。因此,let基本上,这是许多人遇到问题的“解决方案”。请注意,tihs是JavaScript 1.7的功能。

尚未找到任何内容{Foo}


抱歉,我想您要同时询问这两个问题。。。{Foo}//
JanHančič13年

我也是:-/ Google不会索引{}
timdream 2013年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.