JavaScript オブジェクト リテラルでプロパティ名を動的に割り当てるにはどうすればよいですか?

JavaScript のオブジェクト リテラルの動作を理解する

JavaScript でオブジェクト リテラルを操作する場合、開発者はプロパティ名を動的に定義することが望ましい状況に遭遇することがあります。ただし、意図した動作が理解されていない場合、混乱が生じる可能性があります。

次の例を考えてみましょう。

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

この場合、コードはプロパティ 'top' をオブジェクト リテラル内の値 10。これは、プロパティ名が一重引用符で囲まれており、プロパティ キーとしてリテラル文字列を示しているためです。

対照的に、プロパティ名として変数を使用する場合は、

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

コードJavaScript はこの方法でオブジェクト リテラルに対して動的に生成されたプロパティ名をサポートしていないため、失敗します。 ES5 より前は、これを実現する唯一の方法は、値を変数プロパティ名に代入してオブジェクト リテラルを手動で構築することでした:

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

しかし、ES6 の導入により、開発者は Computed にアクセスできるようになりました。オブジェクト リテラルのプロパティ名。この新しい構文を使用すると、プロパティ名を角括弧で囲まれた式として動的に指定できます。

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

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

この構文により、開発者は、リテラル文字列を使用した元の例と同様に、動的に割り当てられたプロパティ名を持つオブジェクト リテラルを作成できます。プロパティキーとして使用します。

以上がJavaScript オブジェクト リテラルでプロパティ名を動的に割り当てるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。