`var { ... } = ...` 语句中的大括号有什么作用?

IT技术 javascript ecmascript-6 destructuring javascript-1.7
2021-01-24 22:24:02

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

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

并在各种 chrome Javascript 中(使用let语句代替var),

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

我发现它非常令人困惑,但我无法找到有关这两种语法的任何文档,即使在MDN 上也是如此

4个回答

您正在查看的是一个解构任务。这是一种类似于 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;

这里的所有都是它的。

我的意思是var {a, b, c} = ascii;语法。
2021-03-11 22:24:02
+1 对于对象解构示例,它们真的很有帮助。MDN的例子只显示阵列解构。
2021-03-25 22:24:02
@Blender - 他们确实提供了对象解构示例。查看循环对象数组中的值
2021-03-30 22:24:02
最后一个例子真的很奇怪,因为通常冒号左边的就是被分配的。
2021-04-04 22:24:02

它们都是 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;
此外,使用这种不常见的语法会使一切变得更加神秘。
2021-03-12 22:24:02
@Blender 输入的字符更少,从而使您的文件更小。对于可用于公共下载的非常大的脚本,尽可能减小文件大小始终是一个好主意。我知道这个评论是我回复的 5 年半之后,但我觉得仍然值得把它放在这里让其他人看看他们是否偶然发现了这个答案和评论线程
2021-03-12 22:24:02
编写代码很容易,但编写人类可以阅读的代码却很难。我们是否需要构造来使它更难?
2021-04-08 22:24:02

这是 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

letMDN 上有该声明的文档https : //developer.mozilla.org/en-US/docs/JavaScript/Reference/Statements/let

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

上没有找到任何东西{Foo}