在ES6 的物件初始化中使用動態屬性名稱

在程式設計中經常會出現使用從外部來源派生的屬性名稱建立對象的挑戰。在查詢中描述的場景中，我們嘗試建構一個 JavaScript 對象，其屬性的鍵在單獨的變數 KEYS 中定義。

但是，在為物件內的屬性賦值時，我們遇到錯誤由於使用了點運算子 (.)。此運算符是為文字物件屬性名稱保留的，不能與動態屬性名稱一起使用。

為了解決這個問題，我們求助於 ES6 (EcmaScript 2016) 的力量，它是 JavaScript 標準的最新補充，引入了更多內容表達性語法和特徵。這些功能之一是計算屬性語法，它允許我們動態定義屬性名稱。

使用計算屬性語法，我們可以重寫程式碼如下，這將成功建立具有所需動態屬性的物件名稱：

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

在此程式碼中，屬性名稱兩邊的方括號 ([]) 表示我們正在使用計算屬性語法。括號內的表達式計算為動態屬性名稱，該名稱是從 KEYS 變數中檢索的。