JavaScript ではオブジェクト リテラルで動的オブジェクト キーを直接使用できないのはなぜですか?

変数の難題からの JavaScript オブジェクト キー

JavaScript でオブジェクト リテラルを使用する場合、変数を動的変数に代入する際に特有の動作が発生する可能性があります。プロパティキーが機能しません。次の 2 つのコード スニペットを考えてみましょう:

<something>.stop().animate({ 'top': 10 }, 10); // Works
var thetop = 'top';
<something>.stop().animate({ thetop: 10 }, 10); // Doesn't work</something></something>

なぜ不一致?

最初のスニペットは、ドット表記を利用して、オブジェクトの「top」プロパティを正常に設定します。ただし、JavaScript では変数を使用して動的オブジェクト プロパティ名をオブジェクト リテラルで直接定義することができないため、2 番目のスニペットは失敗します。

ES5 以前の解決策

動的オブジェクトを割り当てるにはES5 以前の変数からプロパティ名を取得するには、オブジェクト リテラルを構築する必要があります手動:

var thetop = "top";
var aniArgs = {};
aniArgs[thetop] = 10; // Assign value to variable property name
<something>.stop().animate(aniArgs, 10);</something>

ES6 以降のソリューション

ES6 では、オブジェクト リテラル文法に「ComputedPropertyName」が導入され、変数から直接動的プロパティ名を割り当てることが可能になりました。

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

この構文はメジャーの最新バージョンでサポートされていますブラウザ。

以上がJavaScript ではオブジェクト リテラルで動的オブジェクト キーを直接使用できないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。