webdevqa.jp.net

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

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

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

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

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

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