为什么下面的工作？
<something>.stop().animate(
{ 'top' : 10 }, 10
);
而这不起作用：
var thetop = 'top';
<something>.stop().animate(
{ thetop : 10 }, 10
);
更清楚地说：目前我无法将 CSS 属性作为变量传递给 animate 函数。
如何在 JavaScript 对象字面量中使用变量作为键？
IT技术
javascript
jquery
variables
properties
object-literal
2020-12-25 22:57:22
6个回答
{ thetop : 10 }是一个有效的对象字面量。该代码将创建一个对象，其属性名为thetop10。以下两者相同：
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
您可以在每个主流浏览器的最新版本中使用这种新语法。
使用ECMAScript 2015，您现在可以使用括号表示法直接在对象声明中执行此操作：
var obj = {
[key]: value
}
wherekey可以是返回值的任何类型的表达式（例如变量）。
所以这里你的代码看起来像：
<something>.stop().animate({
[thetop]: 10
}, 10)
在thetop用作键之前将在哪里评估。
ES5 引用说它不应该工作
注意：ES6 的规则已更改：https ://stackoverflow.com/a/2274327/895245
规范：http : //www.ecma-international.org/ecma-262/5.1/#sec-11.1.5
物业名称：
- 标识符名称
- 字符串字面量
- 数字文字
[...]
生产 PropertyName : IdentifierName 的评估如下：
- 返回包含与 IdentifierName 相同的字符序列的 String 值。
生产 PropertyName : StringLiteral 的评估如下：
- 返回 StringLiteral 的 SV [String value]。
生产 PropertyName : NumericLiteral 的评估如下：
- 让 nbr 是形成 NumericLiteral 值的结果。
- 返回到字符串（nbr）。
这意味着：
{ theTop : 10 }完全一样{ 'theTop' : 10 }的
PropertyNametheTop是一个IdentifierName，所以它被转换为'theTop'字符串值，这是的字符串值'theTop'。不可能用可变键编写对象初始值设定项（文字）。
仅有的三个选项是
IdentifierName（扩展为字符串文字）StringLiteral、 和NumericLiteral（也扩展为字符串）。
ES6 / 2020
如果您尝试使用来自任何其他来源的“key:value”将数据推送到对象，您可以使用以下内容：
let obj = {}
let key = "foo"
let value = "bar"
obj[`${key}`] = value
// A `console.log(obj)` would return:
// {foo: "bar}
// A `typeof obj` would return:
// "object"
希望这对某人有所帮助:)
我使用以下内容将具有“动态”名称的属性添加到对象：
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}
这只是使用[]其他答案推荐的所需符号，但代码行更少！