JavaScript：如何将变量值作为对象属性名？解决语法报错

这个场景我太熟悉了！你想要把变量key的值作为对象的属性名，而不是把key本身作为属性名，对吧？之前的写法报错是因为早期JavaScript的对象字面量语法不支持直接用表达式作为属性名，现在有两种简单的解决办法：

方法一：ES6之前的兼容写法（适合旧环境） #

先创建一个空对象，再通过方括号语法动态赋值，这种方式所有浏览器都支持：

var key = 'first_name';
var value = 'Ali';
var key_value = {};
// 用方括号包裹变量key，就能把它的值作为属性名
key_value[key] = value;
// 最终key_value就是 {first_name: 'Ali'}

方法二：ES6+的计算属性名写法（更简洁） #

如果你的项目环境支持ES6及以上，直接在对象字面量里用方括号包裹变量，就能直接把变量的值作为属性名：

const key = 'first_name';
const value = 'Ali';
// 方括号里的key会被解析成它的实际值
const key_value = { [key]: value };
// 结果同样是 {first_name: 'Ali'}

为什么之前的写法会报错？ #

• 你一开始写的{key: value}，这里的key是字符串字面量，不是变量，所以最终对象的属性名是"key"，而不是变量key的值first_name。
• 后来尝试的{window['key']: value}报错，是因为在ES6之前，对象字面量的属性名位置只能写标识符或者字符串字面量，不能写表达式，ES6的计算属性名才允许用方括号包裹表达式来定义属性名。

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