JavaScript对象字面量简写赋值原理：为何{foo}会转为{foo:'test'}？

先看你给出的代码：

let foo = 'test'
const obj = {foo}

执行console.log(obj)会输出{foo: 'test'}，这是ES6开始引入的对象字面量属性简写语法，专门用来简化对象的创建。

核心规则说明 #

当你在对象字面量中只写一个变量名时，JavaScript引擎会自动做两件事：

• 把这个变量名作为对象的属性名（以字符串形式存在）
• 把变量的实际取值作为该属性对应的属性值

换句话说，{foo}完全等价于手动写{foo: foo}——第一个foo是属性名，第二个foo是你定义的变量，取它的值'test'。

为什么不会触发语法错误？ #

你担心的{'test'}是不符合对象字面量语法的，JS引擎根本不会这么解析。如果想要用变量的值作为属性名，需要用ES6的计算属性名语法，也就是给变量套上方括号：

let foo = 'test'
const obj = {[foo]: 'bar'}
// 此时obj的结构是 {test: 'bar'}

这和属性简写是两种完全不同的语法：

• 直接写变量名：用变量名当属性名，变量值当属性值
• 方括号包裹变量：用变量值当属性名，后面需指定对应的属性值

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