如何在 JavaScript 物件文字中動態指派屬性名稱？

了解 JavaScript 中物件文字的行為

在 JavaScript 中使用物件文字時，開發人員可能會遇到需要動態定義屬性名稱的情況。但是，如果不理解預期的行為，這可能會導致混亂。

考慮提供的範例：

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

在這種情況下，程式碼成功將屬性「top」指派給物件字面量中的值 10。這是因為屬性名稱用單引號括起來，表示一個文字字串作為屬性鍵。

相反，當使用變數作為屬性名稱時：

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

程式碼失敗是因為 JavaScript 不支援以這種方式動態產生物件文字的屬性名稱。在ES5 之前，實現此目的的唯一方法是透過將值指派給變數屬性名稱來手動建構物件文字：

var thetop = "top";
var aniArgs = {};
aniArgs[thetop] = 10;
<something>.stop().animate(
    aniArgs, 10
);

但是，隨著ES6 的引入，開發人員現在可以存取Computed物件文字的屬性名稱。使用這種新語法，屬性名稱可以動態指定為方括號中括起來的表達式：

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

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

此語法允許開發人員使用動態分配的屬性名稱創建對象文字，就像使用文字字符串的原始範例一樣作為屬性鍵。

以上是如何在 JavaScript 物件文字中動態指派屬性名稱？的詳細內容。更多資訊請關注PHP中文網其他相關文章！