ES6 でのオブジェクト初期化での動的プロパティ名の使用

外部ソースから派生したプロパティ名を持つオブジェクトを作成するという課題は、プログラミングでよく発生します。クエリで説明されているシナリオでは、キーが別の変数 KEYS で定義されているプロパティを持つ JavaScript オブジェクトを構築しようとします。

ただし、オブジェクト内のプロパティに値を割り当てるときに、エラーが発生します。ドット演算子 (.) が使用されているためです。この演算子はリテラル オブジェクト プロパティ名用に予約されており、動的プロパティ名では使用できません。

この問題に対処するために、最近 JavaScript 標準に追加された ES6 (EcmaScript 2016) の力を借ります。表現力豊かな構文と機能。これらの機能の 1 つは、プロパティ名を動的に定義できる計算プロパティ構文です。

計算プロパティ構文を使用すると、次のようにコードを書き換えることができ、これにより、目的の動的プロパティを持つオブジェクトが正常に作成されます。名前:

iconMap: {
    [KEYS.PHONE_TYPE]: 'icon-phone',
    [KEYS.AGENT_TYPE]: 'icon-headphones',
},

このコードでは、プロパティ名を囲む角括弧 ([]) は、計算されたプロパティ構文を使用していることを示しています。括弧内の式は、KEYS 変数から取得される動的プロパティ名として評価されます。