如何在 JavaScript 物件文字中使用變數作為鍵？

JavaScript 物件文字中的動態鍵值分配

儘管JavaScript 在動畫中廣泛使用，但在使用變數時卻帶來了挑戰作為物件文字中的鍵。 While 語法類似於「.stop().animate({ 'top' : 10 }, 10);」無縫地將值分配給用引號括起來的鍵，嘗試使用變數作為鍵，如「var thetop = 'top'; .stop().animate({ thetop : 10 }, 10);”，但會失敗.

差異背後的原因

{ thetop : 10 }構成有效的物件字面量語法。程式碼指示 JavaScript 建立一個具有名為 thetop 的屬性的對象，並為其指定值 10。值得注意的是，{ thetop : 10 } 和 { "thetop" : 10 } 都會產生相同的物件結構。

規避ES5及更早版本的限制

ES6之前，利用變數作為屬性物件文字中的名稱是不可能的。解決方法包括先建立物件文字，然後使用變數作為鍵為其屬性賦值，例如：

ES6 和計算屬性名稱的出現

ES6 透過計算屬性名稱的出現

ES6 透過在物件字面量語法中引入ComputedPropertyNames 徹底改變了這個領域。這項進步使得編碼類似於：

這種現代化的語法使開發人員能夠在當代版本的主流瀏覽器中無縫地使用變數作為物件文本中的屬性名稱。

以上是如何在 JavaScript 物件文字中使用變數作為鍵？的詳細內容。更多資訊請關注PHP中文網其他相關文章！