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

为什么下面的工作？

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

而这不起作用：

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

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

#1楼

我已使用以下内容向对象添加具有“动态”名称的属性：

var key = 'top';
$('#myElement').animate(
   (function(o) { o[key]=10; return o;})({left: 20, width: 100}),
   10
);

key是新属性的名称。

传递给animate的属性的对象将为{left: 20, width: 100, top: 10}

这只是使用其他答案所建议的必填[]表示法，但是用的代码行却更少！

#2楼

{ thetop : 10 }是有效的对象文字。该代码将创建一个名为thetop的对象，该对象的值为10。以下两项相同：

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

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

#3楼

ES5引用说它不起作用

注意：ES6的规则已更改： https ://stackoverflow.com/a/2274327/895245

规格： http ： //www.ecma-international.org/ecma-262/5.1/#sec-11.1.5

PropertyName：

标识符名称

字符串字面量

数值文学

[...]

生产PropertyName：IdentifierName的评估如下：

返回包含与IdentifierName相同的字符序列的String值。

生产PropertyName：StringLiteral的评估如下：

返回StringLiteral的SV [String value]。

生产PropertyName：NumericLiteral的评估如下：

令nbr为形成NumericLiteral值的结果。

返回ToString（nbr）。

这意味着：

{ theTop : 10 }与{ 'theTop' : 10 }
所述PropertyName theTop是IdentifierName ，因此它被转换到'theTop'字符串值，这是字符串值'theTop' 。
无法使用变量键编写对象初始值设定项（文字）。
仅有的三个选项是IdentifierName （扩展为字符串文字）， StringLiteral和NumericLiteral （也扩展为字符串）。

#4楼

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

var obj = {
  [key]: value
}

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

因此，您的代码如下所示：

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

用作键之前将评估thetop 。

#5楼

在变量周围添加方括号对我来说很好。尝试这个

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

来源：oschina

链接：https://my.oschina.net/u/3797416/blog/3188423

标签

animate

ECMAScript