JavaScript对象字面量中属性名使用方括号的作用及原因

你看到的包裹属性名的方括号，是ES6正式加入的标准语法，作用是在定义对象字面量时，把方括号内表达式的运行结果作为对象的属性名。

先放你提到的完整示例代码：

const BUTTON_TYPE_CLASSES = {
  base : 'base',
  inverted : 'inverted'
}

const getButton = (buttonType) =>
({
  [BUTTON_TYPE_CLASSES.base] : BaseComponent,
  [BUTTON_TYPE_CLASSES.inverted] : InvertedComponent,
}[buttonType]);

为什么不能直接写BUTTON_TYPE_CLASSES.base: BaseComponent #

如果去掉外层方括号直接写，JS引擎会直接把BUTTON_TYPE_CLASSES.base识别成固定的字面量字符串属性名——也就是说最终生成的对象里，会有一个键名就是字符串"BUTTON_TYPE_CLASSES.base"的属性，根本不会去读取BUTTON_TYPE_CLASSES.base这个表达式实际存储的值"base"，和你想要的逻辑完全不符。

写个最直白的对比就能看懂区别：

const propKey = "username"

// 不用方括号的写法
const objA = {
  propKey: "测试用户"
}
console.log(objA) // 输出 { propKey: "测试用户" }，属性名就是固定写死的"propKey"

// 用方括号的计算属性写法
const objB = {
  [propKey]: "测试用户"
}
console.log(objB) // 输出 { username: "测试用户" }，属性名取的是变量propKey存的值"username"

回到你这段按钮映射的代码：

• 加了方括号之后，实际生成的映射对象结构就是{ base: BaseComponent, inverted: InvertedComponent }，和你直接写死base、inverted作为属性名的运行效果完全一样
• 这种写法的核心好处是做了单点绑定：后续如果要调整BUTTON_TYPE_CLASSES里的常量值（比如把base改成primary），不需要同步修改这个映射对象的键名，从根源上避免两边值不匹配导致的取值bug。

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