JavaScript中能否在对象初始化时内联使用变量值作为字段名

实现方案 #

完全可以实现，ES6（ES2015）标准新增了计算属性名语法，支持在对象字面量初始化时直接用方括号[]包裹变量、表达式作为字段名，完全满足内联赋值的需求。

针对你的场景，修改后的代码如下：

const field = "name";
const js = { [field]: "rafael" };
console.log(js); // 输出结果为 { name: "rafael" }

扩展用法 #

计算属性名支持任意合法的JavaScript表达式，不止可以传入变量，还可以做字符串拼接、函数调用等灵活操作：

const prefix = "user";
const getSuffix = () => "Name";

const user = {
  [`${prefix}_${getSuffix()}`]: "rafael"
};
// 最终生成对象结构：{ user_Name: "rafael" }

兼容说明 #

目前所有现代浏览器、Node.js 4.0及以上版本都原生支持计算属性名语法，只有需要兼容ES5及更早老旧环境时，才需要使用先初始化空对象、再通过方括号动态赋值的写法。

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