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

为什么下面的工作

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

.stop（）.animate(
{'top'：10}，10
);

但这不起作用：

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

var thetop='top'；
.stop（）.animate(
{thetop:10}，10
);

---

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

{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  
);  

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

---

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

{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  
);  

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

---

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

我使用以下方法将具有“动态”名称的属性添加到对象中：

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

键

是新属性的名称

传递给

animate

的属性对象将是

{left:20，width:100，top:10}

---

这只是使用了其他答案推荐的所需的

[]

符号，但代码行更少

我使用以下方法将具有“动态”名称的属性添加到对象中：

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

键

是新属性的名称

传递给

animate

的属性对象将是

{left:20，width:100，top:10}

---

这只是使用了其他答案推荐的所需的

[]

符号，但代码行更少

ES5中的一句话说它不应该起作用

注意：ES6的规则已更改：

规格：

PropertyName：

• 识别名
• StringLiteral
• 数字文字

[……]

生产属性名称：IdentifierName的评估如下：

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

生产属性名称：StringLiteral的计算如下：

返回StringLiteral的SV[String value]

生产属性Name:NumericLiteral的计算如下：

假设nbr是形成NumericLiteral值的结果

返回到管柱（nbr）

这意味着：

• {theTop:10}

  与

  {'theTop:10}

  PropertyName

  theTop

  是一个

  标识名

  ，因此它被转换为

  'theTop'

  字符串值，即

  'theTop'

  的字符串值

• 无法使用变量键编写对象初始值设定项（文字）
  仅有的三个选项是

  IdentifierName

  （展开为字符串文字）、

  StringLiteral

  和

  NumericLiteral

  （也展开为字符串）

---

ES5引用了一句话，说它不应该起作用

注意：ES6的规则已更改：

规格：

PropertyName：

• 识别名
• StringLiteral
• 数字文字

[……]

生产属性名称：IdentifierName的评估如下：

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

生产属性名称：StringLiteral的计算如下：

返回StringLiteral的SV[String value]

生产属性Name:NumericLiteral的计算如下：

假设nbr是形成NumericLiteral值的结果

返回到管柱（nbr）

这意味着：

• {theTop:10}

  与

  {'theTop:10}

  PropertyName

  theTop

  是一个

  标识名

  ，因此它被转换为

  'theTop'

  字符串值，即

  'theTop'

  的字符串值

• 无法使用变量键编写对象初始值设定项（文字）
  仅有的三个选项是

  IdentifierName

  （展开为字符串文字）、

  StringLiteral

  和

  NumericLiteral

  （也展开为字符串）

现在，您可以在带有括号符号的对象声明中直接执行此操作：

var obj = {
  [key]: value
}

其中，

key

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

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

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

.stop（）.animate({
[顶部]：10
}, 10)

其中

顶部将在用作键之前进行评估。
现在，您可以在带有括号符号的对象声明中直接执行此操作：

var obj = {
  [key]: value
}

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

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

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

.stop（）.animate({
[顶部]：10
}, 10)

其中
顶部将在用作键之前进行评估。
在变量周围添加方括号对我很有好处。试试这个

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

var thetop='top'；
.stop（）.animate(
{[thetop]：10}，10
);
在变量周围添加方括号对我有好处。试试这个

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

var thetop='top'；
.stop（）.animate(
{[thetop]：10}，10
);
给定代码：

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

ES6引入了方括号语法。在早期版本的JavaScript中
var thetop = 'top';
<something>.stop().animate(
    new function() {this[thetop] = 10;}, 10
);

var matrix = {};
var a = 'one';
var b = 'two';
var c = 'three';
var d = 'four';

matrix[a] = {[b]: {[c]: d}};

var matrix = {};
var a = 'one';
var b = 'two';
var c = 'three';
var d = 'four';

function addObj(obj, key, value) {
  obj[key] = value;
  return obj;
}

matrix[a] = addObj({}, b, addObj({}, c, d));

myNewObj = ((k,v)=>{o={};o[k]=v;return o;})(myKey,myValue);

{
    [`filter[${query.key}]`]: query.value,  // 'filter[foo]' : 'bar'
}