javascript变量名周围的{花括号}是什么意思[重复]答案

【问题标题】：What do {curly braces} around javascript variable name mean [duplicate]javascript变量名周围的{花括号}是什么意思[重复]
【发布时间】：2014-10-01 00:18:33
【问题描述】：

编辑在查看 JSHint 之后，我发现这个“解构表达式”在 ES6（使用 esnext 选项）或 Mozilla JS 扩展（使用 moz） 和 this 中可用，但是阅读后我仍然不明白为什么它被使用了

我在MDN看到了如下代码

var ui = require("sdk/ui");
var { ActionButton } = require("sdk/ui/button/action");

第二行的大括号有什么作用，为什么要使用它们？为什么第一行没有大括号？

【问题讨论】：

我认为这是 EcmaScript 6 解构绑定模式。
@Pointy 在查看 JSHint 后我发现这个“解构表达式”在 ES6（使用 esnext 选项）或 Mozilla JS 扩展（使用 moz）中可用，但是在阅读后我仍然不明白为什么使用它developer.mozilla.org/en-US/docs/Web/JavaScript/…
@Bergi 肯定会将此作为 ES6 之前问题的副本关闭，该问题的答案声称这是 Firefox 独有的 JS 1.7 功能没有帮助吗？自从提出这个问题并且那里的答案已经过时，世界已经发生了变化——而且这个问题正在吸引更多的观点。我们应该改进这个 Q&A 对，以清楚地包含这种语法的历史，以便没有人对 JS 1.7 和 ES 6 之间的关系感到困惑，然后将 other 问题作为 this 一个。
@MarkAmery：这两个问题都询问关于 JS 1.7 的特性，甚至被标记为firefox。对于 ES6 问题，我使用 Javascript object bracket notation on left side to assign 作为规范问题。
@Bergi 嗯。鉴于他找到此代码的上下文，您显然是正确的 OP 正在阅读的代码使用的是 JS 1.7 功能，但我认为在这种情况下 OP 遇到了这种语法并且 不知道 他看到的是哪个版本的语法。如果有一个全面的重复目标来解释有两个规范引入了语法（以及两者之间的任何差异，尽管我认为它们是相同的并且 ES 规范只是复制了 JavaScript 1.7），这不是更有用吗？确切的版本）？

标签： javascript firefox firefox-addon

【解决方案1】：

这就是所谓的destructuring assignment，它是JavaScript 1.7（和ECMAScript 6）的新功能（目前，仅作为Firefox JavaScript 引擎的一部分提供。）粗略地说，它会转化为：

var ActionButton = require("sdk/ui/button/action").ActionButton;

这个例子看起来很傻，因为只分配了一个项目。但是，您可以使用此模式一次分配多个变量：

{x, y} = foo;

相当于：

x = foo.x;
y = foo.y;

这也可以用于数组。例如，您可以在不使用临时变量的情况下轻松交换两个值：

var a = 1;
var b = 3;

[a, b] = [b, a];

可以使用kangax' ES6 compatibility table 跟踪浏览器支持。

【讨论】：

一个更有用的例子是{width, height, color} = options，它将替换width = options.width; height = options.height; color = options.color。
@CaseyFalk - 据我所知，var {x, y} = ... 相当于 var x = ... 和 var y = ... 和 {x, y} = ... 相当于 x = ... 和 y = ...跨度>
@CaseyFalk - 换句话说，你是对的。由于上面的例子是声明{ ActionButton }，我的粗略翻译是不正确的。我已经更新了。
我意识到这很“粗糙”——很抱歉吹毛求疵。 :) 投赞成票。
"JavaScript 1.7 支持是在 Firefox 2 中引入的（2006 年 10 月）" :D 无论如何，它是 ECMA-6 草案的一部分（assignment，binding），所以它会 @987654327 @ 在可预见的未来。另外：(function(arg1, {opt1, opt2}) { console.log(arg1, opt1, opt2); })(1, {opt1: 2, opt2: 3})。另外：var {ActionButton: ab} = ...;