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

javascript jquery variables properties object-literal

2022-08-29 23:00:10

为什么以下工作？

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

然而这不起作用：

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

更清楚地说明：目前我无法将 CSS 属性作为变量传递给 animate 函数。

答案 1

{ thetop : 10 }是有效的对象文本。该代码将创建一个对象，其属性名为 10。以下两者是相同的：thetop

obj = { thetop : 10 };
obj = { "thetop" : 10 };

在 ES5 及更早版本中，不能将变量用作对象文本中的属性名称。您唯一的选择是执行以下操作：

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 将 ComputedPropertyName 定义为对象文本语法的一部分，这允许您编写如下代码：

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

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

您可以在每个主流浏览器的最新版本中使用此新语法。

答案 2

使用 ECMAScript 2015，您现在可以直接在对象声明中使用括号表示法执行此操作：

var obj = {
  [key]: value
}

其中可以是任何类型的表达式（例如变量）返回值。key

所以在这里你的代码看起来像这样：

<something>.stop().animate({
  [thetop]: 10
}, 10)

在用作密钥之前，将在哪里进行评估。thetop