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

JavaScript リテラルでオブジェクト キーとして変数を使用する

JavaScript では、キーと値のペアを使用してオブジェクト リテラルを定義できます。ただし、変数をキーとして使用しようとする場合、特定の制限が存在します。

次のコード スニペットを検討してください。

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

このコードは、要素の「top」CSS プロパティを正常に更新します。 。ただし、代わりに変数を使用しようとすると、

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

コードは失敗します。その理由は、オブジェクト リテラルではキーを一重引用符または二重引用符で囲む必要があるのに対し、変数名はそれができないためです。

ES5 以前:

ES5 以前のバージョンJavaScript では、変数をオブジェクト キーとして直接使用する簡単な方法はありません。回避策の 1 つは、空のオブジェクト リテラルを作成し、その変数を目的のキーに割り当てることです。

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 以降:

ES6 では ComputedPropertyName 構文が導入されています。これにより、変数式をオブジェクト キーとして使用できるようになります:

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

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

Thisこの構文により、特に動的オブジェクト キーを扱う場合に、よりクリーンで簡潔なコードが可能になります。すべての主要ブラウザの最新バージョンでサポートされています。

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