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

【问题标题】：How to use a variable for a key in a JavaScript object literal?如何在 JavaScript 对象文字中使用变量作为键？
【发布时间】：2018-01-30 06:54:35
【问题描述】：

为什么以下工作有效？

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

而这不起作用：

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

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

【问题讨论】：

另见：create object using variables for property name
另见：creating object with dynamic keys
另见：add dynamically named properties to object
谢谢。正在寻找确切的东西
不客气！

标签： javascript jquery variables properties object-literal

【解决方案1】：

{ 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

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

【讨论】：

我明白了！谢谢！这不应该与 eval 一起使用吗？我的意思是它目前在我的示例中不起作用，但我认为它应该...... :-)
@Marcel: eval() 在动态属性名称的对象文字中不起作用，你只会得到一个错误。不仅如此，eval() 真的不应该用于此类事情。有一篇关于eval的正确和错误用法的优秀文章：blogs.msdn.com/ericlippert/archive/2003/11/01/53329.aspx
@AndyE 考虑用更具体的时间更新“最近的版本”和“当前的 IE TP”，例如“版本晚于 XXX”或“2014-mm 之后”（我自己会做出改变，但是我不知道什么是好的价值观。
对于 ES6，如果键为空/未定义，有没有办法忽略该属性？例如，在{[key] : "value"} 中，如果 key 为 null，它将给出 { null: "value"}，而我希望结果为 {}
很好的解决方案，但是为什么你知道这么多，甚至阅读整个规范都无法理解：（

【解决方案2】：

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

var obj = {
  [key]: value
}

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

所以你的代码如下所示：

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

thetop 在用作键之前将被评估。

【讨论】：

【解决方案3】：

ES5 引用说它不应该工作

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

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

属性名称：

标识符名称

字符串文字

数字文字

[...]

产生式 PropertyName : IdentifierName 的评估如下：

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

产生式 PropertyName : StringLiteral 的评估如下：

返回 StringLiteral 的 SV [字符串值]。

产生式 PropertyName : NumericLiteral 的评估如下：

令 nbr 为形成 NumericLiteral 值的结果。

返回 ToString(nbr)。

这意味着：

{ theTop : 10 } 与{ 'theTop' : 10 } 完全相同

PropertyNametheTop 是一个IdentifierName，所以它被转换为'theTop' 字符串值，也就是'theTop' 的字符串值。
不可能用可变键编写对象初始化器（文字）。

仅有的三个选项是 IdentifierName（扩展为字符串字面量）、StringLiteral 和 NumericLiteral（也扩展为字符串）。

【讨论】：

反对者：我是第一个在这个问题上引用任何标准的人。最佳答案中的 ES6 引用是在我回答后编辑的，当时该标准尚未被接受。如果您碰巧知道我为什么会被否决，请解释一下，我只是想学习。我还不如得到同伴压力徽章......
我猜反对票主要是因为您的回答没有提供解决方案，并且在这方面“没有用”。投票反对同侪压力:-)
@Bergi 感谢您的勇气！ :-) 但我想我已经直接回答了这个问题：问：“为什么以下工作？”。 A：因为 ES5 是这么说的。 “怎么办？”是隐含的。在有人在 ES6 解决方案中进行编辑之前，您是否对 没有标准引号 说“不可能”的首要问题投了反对票？
啊，对。当我直接回答这些问题时，我通常会在引用中引用具体问题以使其清楚。引用标准可以得到更好的答案，但目前你的帖子甚至没有回答 imo 的问题。说明什么可以在 ES5 中生成密钥并不意味着它们如何工作。 thetop 肯定是 IdentifierName，那么为什么它不起作用？这个问题仍然悬而未决。
@Bergi 再次感谢您向我解释！我已对其进行了更新以使其更加明确。我之前没有做过，因为我虽然很明显，因为我们可以写{a:1}.a，所以a显然不会在标识符情况下扩展变量值。但是，是的，在这种情况下，进一步解释是一种改进。

【解决方案4】：

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"

希望这可以帮助某人:)

【讨论】：

【解决方案5】：

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

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}

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

【讨论】：

【解决方案6】：

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

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

【讨论】：

这在旧版本的 EcmaScript 中不起作用，但现在这是一种非常干净的方法。

【解决方案7】：

我找不到一个简单的例子来说明 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));

【讨论】：

【解决方案8】：

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

不要使用下面列出的方法。

我不敢相信这还没有发布：只需使用带有匿名评估的箭头函数！

完全非侵入性，不混淆命名空间，只需要一行：

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

演示：

var myKey="valueof_myKey";
var myValue="valueof_myValue";
var myNewObj = ((k,v)=>{o={};o[k]=v;return o;})(myKey,myValue);
console.log(myNewObj);

在还不支持新的{[myKey]: myValue} 语法的环境中很有用，例如——显然；我刚刚在我的 Web 开发者控制台上验证了它——Firefox 72.0.1，发布于 2020 年 1 月 8 日。 我的立场是正确的；只需将东西放在括号中即可。

（我相信您可能会做出一些更强大/可扩展的解决方案或任何涉及巧妙使用 reduce 的解决方案，但在这一点上，您可能会更好地将对象创建分解为自己的函数而不是强制将其全部内联）

自从 OP 十年前提出这个问题以来，这并不重要，但为了完整起见并证明它是确切对上述问题的回答，我'将在原始上下文中显示：

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

【讨论】：

同时引入了箭头函数和计算属性名称。您的控制台检查不正确，因为您需要在控制台中输入({ [myKey]: myValue }) 以使其成为对象not a block。 “只需要一行” — 当然，整个缩小的 jQuery 库只需要一行。 “非侵入性” — 如果对象具有 getter、setter 或 Proxy 目标，则不成立。
答案可以改写为 var myNewObj = (function (myKey, myValue) { o = {}; o[myKey] = myValue; return o; })(myKey, myValue);支持版本

【解决方案9】：

给定代码：

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 } 声明没有使用变量thetop。相反，它使用名为thetop 的键创建一个对象。如果您希望键是变量thetop 的值，则必须在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);

【讨论】：

obj['' + thetop] 可以替换为 obj[thetop]。它会自动字符串化，除非它是一个符号。

【解决方案10】：

你也可以这样试试：

let array1 = [{
    "description": "THURSDAY",
    "count": "1",
    "date": "2019-12-05"
},
{
    "description": "WEDNESDAY",
    "count": "0",
    "date": "2019-12-04"
}]
let res = array1.map((value, index) => {
    return { [value.description]: { count: value.count, date: value.date } }
})
console.log(res);

【讨论】：

这对我帮助很大。谢谢你:)

【解决方案11】：

2020 年更新/示例...

一个更复杂的例子，使用括号和文字......你可能不得不做的事情，例如 vue/axios。将文字括在括号中，所以

[ ` ... ` ]

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

【讨论】：

【解决方案12】：

分配键的ES5实现如下：

var obj = Object.create(null),
    objArgs = (
      (objArgs = {}),
      (objArgs.someKey = {
        value: 'someValue'
      }), objArgs);

Object.defineProperties(obj, objArgs);

我附上了一个用来转换为裸对象的 sn-p。

var obj = {
  'key1': 'value1',
  'key2': 'value2',
  'key3': [
    'value3',
    'value4',
  ],
  'key4': {
    'key5': 'value5'
  }
}

var bareObj = function(obj) {

  var objArgs,
    bareObj = Object.create(null);

  Object.entries(obj).forEach(function([key, value]) {

    var objArgs = (
      (objArgs = {}),
      (objArgs[key] = {
        value: value
      }), objArgs);

    Object.defineProperties(bareObj, objArgs);

  });

  return {
    input: obj,
    output: bareObj
  };

}(obj);

if (!Object.entries) {
  Object.entries = function(obj){
    var arr = [];
    Object.keys(obj).forEach(function(key){
      arr.push([key, obj[key]]);
    });
    return arr;
  }
}

console(bareObj);

【讨论】：

【解决方案13】：

如果您希望对象键与变量名相同，ES 2015 中有一个简写。 New notations in ECMAScript 2015

var thetop = 10;
var obj = { thetop };
console.log(obj.thetop); // print 10

【讨论】：

【解决方案14】：

你可以这样做：

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

【讨论】：

【解决方案15】：

这样你也可以获得想要的输出

var jsonobj={};
var count=0;
$(document).on('click','#btnadd', function() {
    jsonobj[count]=new Array({ "1"  : $("#txtone").val()},{ "2"  : $("#txttwo").val()});
    count++;
    console.clear();
    console.log(jsonobj);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>value 1</span><input id="txtone" type="text"/>
<span>value 2</span><input id="txttwo" type="text"/>
<button id="btnadd">Add</button>

【讨论】：

【解决方案16】：

您可以为 ES5 执行以下操作：

var theTop = 'top'
<something>.stop().animate(
  JSON.parse('{"' + theTop + '":' + JSON.stringify(10) + '}'), 10
)

或者提取到一个函数中：

function newObj (key, value) {
  return JSON.parse('{"' + key + '":' + JSON.stringify(value) + '}')
}

var theTop = 'top'
<something>.stop().animate(
  newObj(theTop, 10), 10
)

【讨论】：