☰

JavaScript オブジェクトリテラルのキーに変数を使用するにはどうすればいいですか? 質問する

tag-icon • tag-icon javascript variables properties object-literal
JavaScript オブジェクトリテラルのキーに変数を使用するにはどうすればいいですか? 質問する

なぜ次の方法が機能するのでしょうか?

<something>.stop().animate(
    { 'top' : 10 }, 10
);

一方、これは機能しません:

var thetop = 'top';
<something>.stop().animate(
    { thetop : 10 }, 10
);

さらに明確に言うと、現時点では CSS プロパティを変数として animate 関数に渡すことはできません。

ベストアンサー1

{ thetop : 10 }は有効なオブジェクト リテラルです。このコードは、値が 10 である という名前のプロパティを持つオブジェクトを作成します。thetop次の 2 つは同じです。

obj = { thetop : 10 };
obj = { "thetop" : 10 };

ES5 以前では、オブジェクトリテラル内で変数をプロパティ名として使用することはできません。唯一の選択肢は、次の操作を行うことです。

var thetop = "top";

// create the object literal
var aniArgs = {};

// Assign the variable property name with a value of 10
aniArgs[thetop] = 10; 

// Pass the resulting object to the animate method
<something>.stop().animate(
    aniArgs, 10  
);

ES6定義する ComputedPropertyName はオブジェクト リテラルの文法の一部であり、次のようなコードを記述できます。

var thetop = "top",
    obj = { [thetop]: 10 };

console.log(obj.top); // -> 10

この新しい構文は、各主流ブラウザの最新バージョンで使用できます。

おすすめ記事