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

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

在 JavaScript 中，可以使用鍵值對定義物件文字。但是，當嘗試使用變數作為鍵時，存在某些限制。

考慮以下程式碼片段：

<something>.stop().animate({ 'top' : 10 }, 10);

此程式碼成功更新了元素的「top」CSS 屬性。但是，當嘗試使用變數時：

var thetop = 'top';
<something>.stop().animate({ thetop : 10 }, 10);

程式碼失敗。原因是物件字面量要求鍵用單引號或雙引號括起來，變數名稱則不能。

ES5 及更早版本：

在 ES5 及更早版本中在 JavaScript 中，沒有直接使用變數作為物件鍵的簡單方法。一種解決方法是建立一個空白物件文字，然後將變數指派給所需的鍵：

var thetop = "top";

// Create the object literal
var aniArgs = {};

// Assign the variable property name with a value of 10
aniArgs[thetop] = 10; 

// Pass the resulting object to the animate method
<something>.stop().animate(
    aniArgs, 10  
);  

ES6 及更高版本：

ES6 引入了ComputedPropertyName語法，它允許使用變數表達式作為物件鍵：

var thetop = "top",
    obj = { [thetop]: 10 };

console.log(obj.top); // -> 10

此語法允許更清晰、更簡潔程式碼，特別是在處理動態物件鍵時。所有主要瀏覽器的現代版本都支援它。

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