如何在JavaScript对象中将变量插值为键？

Question

如何使用变量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吗？

- Geo

---

可能是重复的问题：如何创建一个动态键以添加到JavaScript对象变量中和将变量传递给JavaScript对象，可能还有其他类似的问题... - Felix Kling

我猜当你说“插值”时，你的意思是“使用”。只是为了避免将来出现问题，插值意味着“在已知值之间估计未知值”，并且根本不适用于这个问题标题。 - foobarbecue

不，他使用的是正确的术语。你所提到的是数学领域中的插值(interpolation)。https://en.wikipedia.org/wiki/Interpolation。他所提到的是计算机科学领域中的字符串插值(string interpolation)。https://en.wikipedia.org/wiki/String_interpolation. :-) - Aaron Gray

我认为https://dev59.com/m2w15IYBdhLWcg3wntAQ提出了同样的问题，但用不同的方式表达，两者都没有特别“错误”的方式。 - conny

Answer 1

这在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) { ... }

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

- mbezjak

---

JavaScript语法的支持比仅仅代码可读性更加重要。如果用户的浏览器失败了，这将会很重要！该语法是即将推出的ECMAScript 6的一部分，只有最近版本的浏览器才支持：https://kangax.github.io/compat-table/es6/#object_literal_extensions - Carl Walsh

v4.2.6 也支持它。 - Kostanos

对于那些能够使用ES6的人来说，这绝对是正确的答案，可惜一些浏览器甚至在2018年仍不支持。这个解决方案比这里接受的答案更好，因为它提供了更易读和简洁的代码。 - tpartee

这是一个很棒的答案，因为它允许您在一条语句中构造对象，这与带有括号的单行箭头函数非常搭配。 - Elle Mundy

此时使用这个应该是安全的，除非你想要支持IE。 - Anirudh Ramanathan

Answer 2

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

- mVChr

---

这是一个有关代码和回答OP问题的好答案，不同意说它是一份糟糕的答案。同意通过添加一些支持性文本来改进它，以解释为什么OP想要在JS中做的事情并不简单，并对答案的操作进行一些推理。如果能提供一些支持性引用，那就更好了。但是，在ES6之前，这是一个可靠的解决方案。 - tpartee

Answer 3

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

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

- gen_Eric

Answer 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]]

我希望这能有所帮助！

- rashadb

---

请解释一下为什么这个有效，谢谢。 - Luke Hutchison

Answer 5

试试这个：

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

这里是示例代码。

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

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

- Naftali

---

但是没有直接初始化的方法吗？我们必须这样做吗？ - Geo

我在想也许有一种方法可以使它“取消引用”并且不将其视为字符串。为什么这是js中的默认行为？ - Geo

@Geo 我相信那可能是另一个你想问的问题，我不确定。 - Naftali

@Felix -- @Rocket 看起来也是相同的答案。 - Naftali

更新有误，b.a应被解析为 b['a'] 而不是 b['whatever']。 - bendman

Answer 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

- Benny Code