如何在執行時間建立具有動態屬性名稱的 JavaScript 物件？

使用動態屬性名稱建立物件

在程式設計中，建立具有直到執行時才知道的屬性名稱的物件可能很有用。本文解決了使用間接（非文字）鍵名初始化物件的挑戰。

問題：靜態屬性名稱

傳統上，JavaScript 物件是使用固定的文字屬性名稱初始化的：

var myAppConfig = {
    iconMap: {
        "phone-type": "icon-phone",
        "agent-type": "icon-headphones"
    }
};

但是，在某些場景下，需要動態屬性名稱。例如，屬性名稱可能儲存在不同的物件中。

使用ES6 計算屬性名稱

如果您使用ES6 或像Babel 這樣的轉譯器，則可以使用計算屬性名稱：

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

在此語法中，屬性名稱括在方括號中並作為表達式進行計算。 KEYS.PHONE_TYPE 的值用作第一個鍵值對的屬性名稱。

輸出：

因此，iconMap 物件將使用預期的動態屬性名稱初始化:

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

這種方法可讓您在執行時間建立具有非文字屬性名稱的對象，從而提供更大的靈活性和程式碼適應性。

以上是如何在執行時間建立具有動態屬性名稱的 JavaScript 物件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！