Javascript - 在变量声明中使用花括号将多个变量分配给对象属性 [英] Javascript - Assigning multiple variables to object properties using curly braces in variable declaration

问题描述

在查看 Mozilla (Firefox) Add-on SDK 的一些 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:

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

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

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.

我实际上是通过一些摆弄发现了这一点，因为似乎没有关于它的文档.看看这段代码:

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

我还发现这仅适用于 Firefox.Chrome 会抛出一个错误:Uncaught SyntaxError: Unexpected token {".这就解释了为什么我在开始查看 Firefox 附加代码之前没有看到它.

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，我认为它可能是 Mozilla 的事情，但我什至在 MDN 上找不到任何关于它的信息.再说一次，也许我只是不知道要搜索什么.

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.

推荐答案

查看解构赋值"链接(即 http://en.wikipedia.org/wiki/JavaScript_syntax#Assignment 和 http://dailyjs.com/2011/09/12/destructuring/) 看起来这个构造是解构赋值.

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.

维基百科:

在 Mozilla 的 JavaScript 中，从 1.7 版开始，解构赋值允许将数据结构的一部分一次赋值给多个变量.赋值的左侧是一个模式，类似于一个任意嵌套的对象/数组文字，在其叶子上包含 l-lvalues，用于接收分配值的子结构.

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.

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

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 - 在变量声明中使用花括号将多个变量分配给对象属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！