Javascript—在变量声明中使用花括号为对象属性分配多个变量

While looking at some Javascript code for Mozilla's (Firefox) Add-on SDK, I saw kind of variable declaration I hadn't seen before:

在查看Mozilla (Firefox)附加SDK的一些Javascript代码时，我看到了一些我以前没见过的变量声明:

var { foo, bar } = someFunction("whatever");  // just an example

See those curly braces around the variable name? Turns out, this is a way of assigning the values of properties of an object to multiple variables all at once. It seems similar to destructuring assignment or PHP's list, except with object properties instead of arrays.

看到变量名周围的花括号了吗?事实证明，这是一种一次性将对象的属性值赋给多个变量的方法。它看起来类似于析构赋值或PHP的列表，除了对象属性而不是数组。

I actually found this out through some fiddling, since there appears to be no documentation on it. Take a look at this code:

实际上，我是通过一些修改发现的，因为似乎没有关于它的文档。看看下面的代码:

function gimmeAnObject() {
    return {
        foo: "hey",
        bar: "sup"
    };
}

console.log(gimmeAnObject()); // Object { foo="hey", bar="sup" }

var { foo, bar } = gimmeAnObject();

console.log(foo); // hey
console.log(bar); // sup

I also found that this only works in Firefox. Chrome will instead throw an error: "Uncaught SyntaxError: Unexpected token {". That explains why I hadn't seen it before I started looking at Firefox add-on code.

我还发现这只适用于Firefox。Chrome会抛出一个错误:“未捕获的SyntaxError:意外的令牌{”。这就解释了为什么我在开始查看Firefox扩展代码之前没有看到它。

Has anyone else seen this kind of variable declaration before? Why can't I find any documentation on it? Since it only works in Firefox, I'd think it might be a Mozilla thing, but I couldn't even find anything about it on MDN. Then again, maybe I just didn't know what to search for.

有人见过这种变量声明吗?为什么我找不到任何文件?因为它只在Firefox中工作，我认为它可能是Mozilla的东西，但是我在MDN上甚至找不到任何关于它的信息。再说一次，也许我只是不知道要找什么。

2 个解决方案

#1

Looking at "Destructuring Assignment" links (i.e. http://en.wikipedia.org/wiki/JavaScript_syntax#Assignment and http://dailyjs.com/2011/09/12/destructuring/) it looks like this construct is destructuring assignment.

查看“析构赋值”链接(即http://en.wikipedia.org/wiki/JavaScript_syntax#赋值和http://dailyjs.com/2011/09/12/析构/)，看起来这个构造是析构赋值。

Wikipedia:

In Mozilla's JavaScript, since version 1.7, destructuring assignment allows the assignment of parts of data structures to several variables at once. The left hand side of an assignment is a pattern that resembles an arbitrarily nested object/array literal containing l-lvalues at its leafs which are to receive the substructures of the assigned value.

在Mozilla的JavaScript中，自版本1.7以来，析构分配允许将数据结构的一部分同时分配给多个变量。赋值的左手边是一个模式，它类似于一个任意嵌套的对象/数组文本，在其leafs中包含l-lvalue，该值将接收赋值的子结构。

In JavaScript arrays and objects are more or less the same so it is not very surprising that construct supported for arrays is also supported for objects.

在JavaScript数组中，对象或多或少是相同的，因此支持数组的构造也支持对象也就不足为奇了。

#2

You can't do it. You have to name a var and do something like this:

你不能这样做。你需要命名一个var，然后做如下的事情:

var myObj = (function(){
    return {
        foo: 'foo',
        bar: 'bar'
    };
})();

#1