web-dev-qa-db-ja.com

javascript変数名の{中括弧}の意味

EDITJSHintを確認した後、ES6でこの「destructuring expression」が利用できることがわかりました（esnextオプションを使用）または、Mozilla JS拡張機能（mozを使用）および this

MDN で次のコードに遭遇しました

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

2行目のブレースは何をするもので、なぜ使用されるのですか？最初の行にブレースがないのはなぜですか？

javascriptfirefoxfirefox-addon
135
Georgi Georgiev

これは destructuring assignment と呼ばれるもので、 JavaScript 1.7 （および ECMAScript 6 ）の新機能です（現在、 FireFox JavaScriptエンジン。大体、これは次のように変換されます。

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

割り当てられているアイテムは1つだけなので、この例では愚かに見えます。ただし、このパターンを使用して、複数の変数を一度に割り当てることができます。

{x, y} = foo;

以下と同等です：

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

これは配列にも使用できます。たとえば、一時変数を使用せずに2つの値を簡単に交換できます。

var a = 1;
var b = 3;

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

ブラウザのサポートは kangaxのES6互換性テーブル を使用して追跡できます。

186
Mike Christensen