JavaScript中使用变量作为对象键名推入数组时如何得到预期结果？

你遇到的问题是因为在对象字面量里直接使用变量名时，JavaScript（ES5及更早版本）会把它当作字符串字面量键，而不是变量的值。我们来一步步解决这个问题：

问题回顾 #

你的初始代码是可以正常工作的：

var myArray = []
myArray.push( { "bob" : { "banana" : "yellow" } })
console.log(myArray)

运行后会输出 [{"bob": {"banana": "yellow"}}]，符合预期。

但当你尝试用变量替换硬编码的键名时，结果不符合预期：

var myArray = []
var name = "bob"
var fruit = "banana"
var fruitcolor = "yellow"
myArray.push( { name : { fruit : fruitcolor } })
console.log(myArray)

这段代码实际输出的是 [{"name": {"fruit": "yellow"}}]——因为name和fruit被当作了字符串键，而不是变量对应的"bob"和"banana"。

修复方案 #

有两种常用的修复方式，分别适用于不同的JavaScript环境：

方案1：ES6+ 计算属性名（推荐） #

ES6引入了计算属性名语法，你可以用方括号[]包裹变量，这样JavaScript就会计算变量的值作为对象的键名：

var myArray = []
var name = "bob"
var fruit = "banana"
var fruitcolor = "yellow"
// 用[]包裹变量，将变量值作为键名
myArray.push( { [name] : { [fruit] : fruitcolor } })
console.log(myArray)

运行这段代码就能得到你想要的 [{"bob": {"banana": "yellow"}}]。

方案2：ES5 兼容写法（支持旧浏览器） #

如果需要兼容不支持ES6的旧环境，可以通过先创建空对象，再用方括号动态赋值的方式实现：

var myArray = []
var name = "bob"
var fruit = "banana"
var fruitcolor = "yellow"

// 先创建外层对象
var outerObj = {};
// 用变量值作为外层键
outerObj[name] = {};
// 用变量值作为内层键并赋值
outerObj[name][fruit] = fruitcolor;

myArray.push(outerObj);
console.log(myArray)

这种方式也能达到和原代码一致的效果。

为什么原来的代码不行？ #

在ES5及更早的对象字面量语法中，{ key: value }里的key会被直接解析为字符串字面量，不管它是不是变量名。只有用方括号obj[variable]的语法，JavaScript才会把variable当作变量去读取它的值。

内容的提问来源于stack exchange，提问作者Alcove