134

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

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

并在各种 chrome Javascript 中（let正在使用语句代替var），

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

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

4

4 回答 4

89

What you're looking at is a destructuring assignment. It's a form of pattern matching like in Haskell.

Using destructuring assignment you can extract values from objects and arrays and assign them to newly declared variables using the object and array literal syntax. This makes code much more succinct.

For example:

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

var {a, b, c} = ascii;

The above code is equivalent to:

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

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

Similarly for arrays:

var ascii = [97, 98, 99];

var [a, b, c] = ascii;

This is equivalent to:

var ascii = [97, 98, 99];

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

You can also extract and rename an object property as follows:

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

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

This is equivalent to:

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

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

That's all there is to it.

于 2013-03-08T10:44:27.033 回答
85

它们都是 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;
于 2013-03-08T10:09:32.590 回答
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

于 2019-01-07T12:47:44.843 回答
0

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

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

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

于 2013-03-08T09:48:24.690 回答