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

{ 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 defines ComputedPropertyName 作为对象文字语法的一部分，它允许您编写如下代码：

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

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

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

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

var obj = {
  [key]: value
}

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

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

<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 StringLiteral NumericLiteral [...] 产生式 PropertyName : IdentifierName 的评估如下：返回包含与 IdentifierName 相同的字符序列的字符串值。产生式 PropertyName : StringLiteral 的评估如下：返回 StringLiteral 的 SV [字符串值]。产生式 PropertyName : NumericLiteral 的计算方法如下： 设 nbr 为形成 NumericLiteral 值的结果。返回到字符串（nbr）。

这意味着：

theTop : 10 } 与 { 'theTop' : 10 } PropertyName theTop 是一个 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}

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

在变量周围添加方括号对我很有用。尝试这个

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

我找不到一个简单的例子来说明 ES6 和 ES5 的区别，所以我做了一个。两个代码示例都创建完全相同的对象。但是 ES5 示例也适用于较旧的浏览器（如 IE11），而 ES6 示例则不能。

ES6

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

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

ES5

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

更新：正如评论者指出的那样，任何支持箭头函数的 JavaScript 版本也支持 ({[myKey]:myValue})，所以这个答案没有实际用例< /strong> （事实上，它可能会在一些奇怪的极端情况下中断）。

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

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