如何在 JavaScript 对象中插入变量作为键？答案

【问题标题】：How do I interpolate a variable as a key in a JavaScript object?如何在 JavaScript 对象中插入变量作为键？
【发布时间】：2011-08-04 04:50:47
【问题描述】：

如何使用变量a 的值作为查找属性的键？我想能够说：b["whatever"] 并返回 20：

var a = "whatever";
var b = {a : 20};     // Want this to assign b.whatever
alert(b["whatever"]); // so that this shows 20, not `undefined`

我在问是否有可能在创建b 期间让它包含"whatever":20 而不是a:20，其中“whatever”本身就是一个变量。也许可以使用eval？

【问题讨论】：

How to create a dynamic key to be added to a javascript object variable. 和 pass variable into javascript object 的可能副本以及其他可能的副本...
我猜当您说“插值”时，您的意思是“使用”。只是为了以后不会给您带来问题， interpolate 的意思是“估计已知值之间的未知值”，根本不适合这个问题的标题。
不，他使用了正确的术语。您指的是数学领域的插值。 en.wikipedia.org/wiki/Interpolation他指的是计算机科学领域的插值。 en.wikipedia.org/wiki/String_interpolation。 :-)
我认为 stackoverflow.com/questions/6500573/… 提出了同样的问题，但表述方式不同，两者都不是特别错误的方式。

标签： javascript dictionary

【解决方案1】：

var a = "whatever";
var b = {};
b[a] = 20;
alert(b["whatever"]); // shows 20

【讨论】：

不同意这是对代码优点和回答 OP 问题的糟糕回答。同意通过添加一些支持文本来解释为什么 OP 想要做的事情不能简单地在 JS 中工作以及答案操作背后的一些推理可能会更好。支持引用也将是一个受欢迎的补充。但这是 ES6 之前的固溶体。

【解决方案2】：

这适用于 Firefox 39 和 Chrome 44。不了解其他浏览器。它在 nodejs v0.12.7 中也不起作用。

var a = "whatever";
var b = { [a]: 20 };
console.log(b["whatever"]); // shows 20

也就是说，要插入一个变量，请将其括在括号中。

我不确定这是否是任何标准的一部分。原来在这里看到这样的语法：https://hacks.mozilla.org/2015/07/es6-in-depth-classes/作者定义的地方：

[functionThatReturnsPropertyName()] (args) { ... }

我也不确定您是否应该使用该语法。它并不广为人知。您团队中的其他成员可能不理解代码。

【讨论】：

Javascript 语法支持比代码可读性更重要。重要的是用户的浏览器不会失败！该语法是即将推出的 ECMAScript 6 的一部分，仅在最近的浏览器中受支持：kangax.github.io/compat-table/es6/#object_literal_extensions
v4.2.6 也支持
对于那些可以使用 ES6 的人来说完全是正确的答案，可惜一些浏览器甚至在 2018 年还没有。这个解决方案比这里接受的答案更好，因为它提供了更清晰和简洁的代码。
这是一个很好的答案，因为它允许您在一个语句中构造对象，这与带括号的单行箭头函数很好地配合
除非您希望支持 IE，否则此时应该可以安全使用。

【解决方案3】：

var a = "whatever";
var b = {a : 20};
b[a] = 37;
alert(b["whatever"]); // 37

'a' 是一个值为'a' 的字符串。 a 是一个值为'whatever' 的变量。

【讨论】：

【解决方案4】：

很好的问题。我有一段时间试图用下划线来解决这个问题，但答案再简单不过了：

var a = "whatever";
var b = {a : 20};

var array = [a, b]
var answer = _.object([[array]])// {whatever: {a:20}}//NOTICE THE DOUBLE SET OF BRACKETS AROUND [[array]]

我希望这会有所帮助！

【讨论】：

【解决方案5】：

试试这个：

var a = "whatever";
var c = "something";
var b = {whatever : 20, something: 37};
alert(b[a]); // Shows 20
alert(b[c]); // Shows 37

这里是fiddle。

或者如果我从下面的 cmets 中理解正确，试试这个：

var a = "whatever";
var b = {a : 20};
alert(b.a); // Shows 20

【讨论】：

但是没有办法直接初始化吗？我们必须这样做吗？
我在想也许有办法让它以某种方式“取消引用”它而不是把它当作一个字符串。为什么这是 js 中的默认行为？
@Geo 我相信这可能是您可能想问的另一个问题，我不确定
@Felix -- @Rocket 的答案似乎也差不多
更新错误，b.a被解析为b['a']而不是b['whatever']

【解决方案6】：

为了显示所有选项，我想提一下CoffeeScript 这样做的方式，即：

var a = "whatever";
var b = (
  obj = {},
  obj["" + a] = 20,
  obj
);

alert(b.whatever); // 20

虽然我更喜欢：

var a = "whatever";
var b = {};
b[a] = 20;

alert(b.whatever); // 20

【讨论】：