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

JavaScript オブジェクト リテラルでの動的なキーと値の割り当て

JavaScript はアニメーションで広く使用されているにもかかわらず、変数の利用に関しては課題が生じますオブジェクト リテラル内のキーとして。 「.stop().animate({ 'top' : 10 }, 10);」のような構文「var thetop = 'top'; .stop().animate({ thetop : 10 }, 10);」のように、引用符で囲まれたキーに値をシームレスに割り当て、変数をキーとして使用しようとすると失敗します。 .

不一致の背後にある理由

{ thetop : 10 } は有効なオブジェクト リテラル構文を構成します。このコードは、thetop というプロパティを持つオブジェクトを作成し、値 10 を割り当てるように JavaScript に指示します。特に、{ thetop : 10 } と { "thetop" : 10 } の両方が同一のオブジェクト構造を生成します。

ES5 以前の制限を回避

ES6 より前では、オブジェクト リテラル内のプロパティ名として変数を利用することは不可能でした。回避策としては、最初にオブジェクト リテラルを作成し、次に変数をキーとして使用してそのプロパティに値を割り当てることが含まれます。例:

var thetop = "top";
var aniArgs = {};
aniArgs[thetop] = 10;
<something>.stop().animate(aniArgs, 10);

ES6 と計算プロパティ名の出現

ES6 は、オブジェクト リテラル構文に ComputedPropertyNames を導入することで、この状況に革命をもたらしました。この進歩により、次のようなコーディングが可能になります。

var thetop = "top", obj = { [thetop]: 10 };
console.log(obj.top); // -> 10

この最新化された構文により、開発者は、主流のブラウザの最新バージョンにわたってオブジェクト リテラルのプロパティ名として変数をシームレスに使用できるようになります。

以上が変数を JavaScript オブジェクト リテラルのキーとして使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。