javascript变量名称周围的{花括号}是什么意思

IT技术 javascript firefox firefox-addon
2021-02-10 12:45:07

编辑 看着JSHint我后发现这个“解构表达”是ES6(使用esnext选项)或Mozilla JS扩展(使用MOZ)提供 看完后却我还是不明白为什么它被用来

我在MDN上遇到过以下代码

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

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

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 兼容性表跟踪浏览器支持情况

一个更有用的例子是像这样的东西{width, height, color} = options,它将取代线条width = options.width; height = options.height; color = options.color
2021-03-18 12:45:07
我意识到这很“粗糙”——很抱歉挑剔。:) 有一个upvote。
2021-03-23 12:45:07
@CaseyFalk - 换句话说,你是对的。由于上面的例子是声明{ ActionButton },我粗略的翻译是不正确的。我已经更新了。
2021-03-31 12:45:07
“在 Firefox 2(2006 年 10 月)中引入了 JavaScript 1.7 支持”:D 无论如何,它是 ECMA-6 草案(赋值绑定)的一部分,因此在可预见的未来它将获得更广泛的浏览器支持还有:(function(arg1, {opt1, opt2}) { console.log(arg1, opt1, opt2); })(1, {opt1: 2, opt2: 3})还:var {ActionButton: ab} = ...;
2021-04-08 12:45:07
@CaseyFalk -从我可以告诉,var {x, y} = ...将是等效的var x = ...,并var y = ...{x, y} = ...将是等效的x = ...,并y = ...
2021-04-11 12:45:07