如何在 JavaScript 对象文本中使用变量作为对象键？

在 JavaScript 文字中使用变量作为对象键

在 JavaScript 中，可以使用键值对定义对象文字。但是，当尝试使用变量作为键时，存在某些限制。

考虑以下代码片段：

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

此代码成功更新了元素的“top”CSS 属性。但是，当尝试使用变量时：

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

代码失败。原因是对象字面量要求键用单引号或双引号括起来，而变量名则不能。

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  
);  </something>

ES6 及更高版本：

ES6 引入了 ComputedPropertyName 语法，它允许使用变量表达式作为对象键：

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

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

此语法允许更清晰、更简洁代码，特别是在处理动态对象键时。所有主要浏览器的现代版本都支持它。

以上是如何在 JavaScript 对象文本中使用变量作为对象键？的详细内容。更多信息请关注PHP中文网其他相关文章！