在JavaScript对象文本中使用variables作为键

为什么以下工作？

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

而这不起作用：

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

为了使它更清晰：目前我无法将CSS属性作为variables传递给animate函数。

Answer 1

{ thetop : 10 }是一个有效的对象文字。 代码将创build一个名为thetop的属性值为10的对象。以下内容相同：

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

在ES5和更早的版本中，你不能使用一个variables作为一个对象文字中的属性名称。 您唯一的select是执行以下操作：

 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 

您可以在最新版本的Firefox，Chrome和Microsoft Edge中testing驱动器的这种新语法。

Answer 2

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

 var obj = { [key]: value } 

凡key可以是任何forms的expression式（例如一个variables）返回一个值。

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

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

哪里thetop将被replace的variables值。

Answer 3

ES5的报价说，它不应该工作

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

物业名称：

• IdentifierName
• string字面量
• NumericLiteral

[…]

生产PropertyName：IdentifierName的计算方法如下：

1. 返回包含与IdentifierName相同字符序列的string值。

生产PropertyName：StringLiteral的计算方法如下：

1. 返回StringLiteral的SV [String value]。

生产PropertyName：NumericLiteral的计算方法如下：

1. 设nbr是形成NumericLiteral值的结果。
2. 返回ToString（nbr）。

这意味着：

• { theTop : 10 }与{ 'theTop' : 10 }

  PropertyName theTop是一个IdentifierName ，所以它被转换为'theTop'string值，它是'theTop'的string值。

• 用variables键写对象初始值设定项（文字）是不可能的。

  唯一的三个选项是IdentifierName （展开为string文字）， StringLiteral和NumericLiteral （也展开为string）。

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

Answer 4

我已经使用以下内容为一个对象添加一个“dynamic”名称的属性：

 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}

这只是使用其他答案推荐的所需的[]符号，但使用较less的代码行！

Answer 5

围绕variables添加方括号对我有好处。 尝试这个

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

Answer 6

给定的代码：

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

翻译：

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

正如你所看到的， { thetop : 10 }声明不使用variablesthetop 。 相反，它使用一个名为thetop的键创build一个对象。 如果你想要的键是variablesthetop的值，那么你将不得不使用方括号围绕thetop ：

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

方括号语法已经在ES6中引入了。 在JavaScript的早期版本中，您将需要执行以下操作：

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