JavaScript变量名周围的{花括号}表示什么意思？

Question

编辑： 在查看了JSHint后，我发现'解构表达式' 在ES6中可用（使用esnext选项）或Mozilla JS扩展（使用moz）。这里有相关的文档，不过我仍然不明白它的用途。

我在MDN上发现了以下代码。

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

第二行的大括号是做什么用的？为什么第一行没有大括号？

- Georgi Georgiev

---

我认为这是一个ECMAScript 6的解构绑定模式。 - Pointy

@Bergi将此关闭为一个早期ES6问题的重复问题，其答案声称这是Firefox独有的JS 1.7功能，这并没有帮助吗？自那个问题被提出以来，世界发生了变化，那里的答案已经过时了 - 而且这个问题获得了更多的浏览量。我们应该改进这个问答对，清楚地包括这种语法的历史，这样没有人会对JS 1.7和ES 6之间的关系感到困惑，然后将其他问题作为此问题的重复问题关闭。 - Mark Amery

@MarkAmery：这两个问题都涉及到JS 1.7功能，甚至都标记了[标签：firefox]。对于ES6的问题，我使用Javascript对象左侧括号表示法进行赋值作为规范问题。 - Bergi

@Bergi 嗯。考虑到他发现这段代码的上下文，你显然是对的，OP在阅读这个代码时使用了JS 1.7特性，但我认为在这种情况下，OP遇到了这种语法，并不知道他看到的是哪个版本的语法。是否有一个全面的重复目标更有用，它解释了引入语法的两个规范（以及两者之间的任何差异，尽管我认为它们是相同的，ES规范只是完全复制了JavaScript 1.7版本）？ - Mark Amery

@MarkAmery：当然，继续前进吧，你会得到我创建新的规范帖子的支持。 - Bergi

Answer 1

这被称为解构赋值，是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兼容性表进行跟踪。

- Mike Christensen

---

一个更有用的例子是{width，height，color} = options，它可以替换掉这些代码行width = options.width; height = options.height; color = options.color。 - user229044

据我所知，var {x, y} = ... 的等效于 var x = ... 和 var y = ...，而 {x, y} = ... 的等效于 x = ... 和 y = ...。请注意，这里的翻译尽可能保持原意，并使内容更加通俗易懂，但不涉及解释。 - Mike Christensen

换句话说，你是正确的。由于上面的示例在声明 {ActionButton}，所以我的粗略翻译是错误的。我已经进行了更新。 - Mike Christensen

"JavaScript 1.7支持于Firefox 2中引入（2006年10月）。它是ECMA-6草案的一部分（赋值， 绑定），因此它将在可预见的未来获得更广泛的浏览器支持。此外：(function(arg1, {opt1, opt2}) { console.log(arg1, opt1, opt2); })(1, {opt1: 2, opt2: 3})。还有：var {ActionButton: ab} = ...;" - nmaier

这也可以逐步实现。我有一个返回大型复杂对象的函数。我只需要其中的一部分。例如，函数返回 {client: abc, db: xyz}。在调用函数时，我使用了 const {client} = await functionCall()，并且只获取了我需要的小部分。参考 - zipzit