What do {curly braces} around javascript variable name mean [duplicate] Ask Question

What do {curly braces} around javascript variable name mean [duplicate] Ask Question

編集JSHintを調べたところ、この「構造化分解式」はES6(esnextオプションを使用)またはMozilla JS拡張機能(mozを使用)で使用できることがわかりましたが、これを読んだ後でもなぜそれが使用されるのかまだ理解できません。

MDNで次のコードを見つけました

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

2 行目の中括弧は何をするもので、なぜ使用されるのですか? 1 行目に中括弧がないのはなぜですか?

ベストアンサー1

これは、構造化代入と呼ばれるもので、 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 互換性テーブルを使用して追跡できます。

おすすめ記事