動的プロパティ名を持つ JavaScript オブジェクトを作成するには?

動的プロパティ名を使用したオブジェクトの作成

JavaScript では、通常、オブジェクトはリテラルのキーと値のペアを使用して定義されます。ただし、プロパティ名が動的であるか、オブジェクトの作成時に不明であるというシナリオが発生する場合があります。これは括弧表記を使用することで実現できます。

問題:

次のコード スニペットを考えてみましょう:

var KEYS = {} ;

KEYS.PHONE_TYPE = 'phone-type';
KEYS.AGENT_TYPE = 'agent-type';

var myAppConfig = {
    ...
    iconMap : { 
        KEYS.PHONE_TYPE : 'icon-phone', 
        KEYS.AGENT_TYPE : 'icon-headphones'
    };
    ...
};

このコードは次のエラーで失敗します。エラー「「:」が予期されましたが、代わりに「.」が表示されました。」これは、ドット表記 (.) を使用して myAppConfig オブジェクトのプロパティとして KEYS オブジェクトにアクセスしようとしているためです。この問題に対処するには、括弧表記 [] を使用してプロパティに動的にアクセスする必要があります。

解決策:

ES6 (または Babel/browserify などのトランスパイラー) を使用します。次に示すように、括弧表記を使用して動的プロパティ名でオブジェクトを初期化できます。以下:

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

このコードでは、KEYS プロパティを囲む括弧 [] を使用して、KEYS オブジェクトに格納されている値に基づいてプロパティ名を動的に指定できます。その結果、myAppConfig オブジェクトの iconMap プロパティには、必要な値のマッピングが含まれます:

{
    'phone-type' : 'icon-phone',
    'agent-type' : 'icon-headphones'
}

以上が動的プロパティ名を持つ JavaScript オブジェクトを作成するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。