为什么 JavaScript 不允许直接在对象文字中使用动态对象键？

变量难题中的 JavaScript 对象键

在 JavaScript 中使用对象文字时，您可能会遇到一种特殊的行为，即将变量分配给动态变量属性键不起作用。考虑以下两个代码片段：

<something>.stop().animate({ 'top': 10 }, 10); // Works
var thetop = 'top';
<something>.stop().animate({ thetop: 10 }, 10); // Doesn't work

为什么存在差异？

第一个片段利用点符号成功设置了对象的“top”属性。但是，第二个片段失败了，因为 JavaScript 不允许使用变量直接在对象字面量中定义动态对象属性名称。

ES5 及更早版本中的解决方案

分配动态ES5 及更早版本中变量的属性名称，您必须手动构造对象文字：

var thetop = "top";
var aniArgs = {};
aniArgs[thetop] = 10; // Assign value to variable property name
<something>.stop().animate(aniArgs, 10);

解决方案ES6 及更高版本

ES6 在对象字面量语法中引入了“CompulatedPropertyName”，可以直接从变量分配动态属性名称：

var thetop = "top",
    obj = { [thetop]: 10 };
console.log(obj.top); // -> 10

最新版本支持此语法主要浏览器。

以上是为什么 JavaScript 不允许直接在对象文字中使用动态对象键？的详细内容。更多信息请关注PHP中文网其他相关文章！