为什么使用变量作为对象键时，无别名的解构赋值无法正常运行？

1. 解构语法的本质规则 #

对象简写解构const { name } = state是const { name: name } = state的语法糖：

• 冒号左侧是要匹配的对象键名
• 冒号右侧是要声明的变量名
  当两者完全相同时，可以省略冒号和右侧的变量名，走简写逻辑。

// 两者完全等价
const { name } = state
const { name: name } = state

你尝试写的const { [NAME_FIELD] } = state不符合这个语法规则：你只给出了动态计算的键名，没有显式指定要声明的变量名，JS解析器无法识别你要把取到的值赋给哪个变量。

2. TC39 设计该规则的核心理由 #

变量名必须静态可确定 #

JS 属于词法作用域语言，所有变量的名称必须在词法解析阶段就可以确定，不能延迟到运行时动态生成。如果允许{ [NAME_FIELD] }这种写法：

• 变量名需要等运行时计算出NAME_FIELD的取值才能确定，完全突破了词法作用域的约束
• 如果NAME_FIELD的值是'user name'这种包含特殊字符、不符合标识符规范的字符串，运行时会直接抛出变量名非法错误，而这类语法错误本应该在解析阶段就提前暴露
• 所有静态分析工具（ESLint、TypeScript 编译器、打包工具等）都无法提前识别声明的变量，会导致大量不可控的语法问题和逻辑隐患

避免语法歧义 #

如果放开该限制，碰到const { [a + b * c] } = obj这类包含复杂表达式的计算键写法，解析器完全无法判断语义，既没法提前做校验，也没法保证不同运行环境的执行一致性。

你理解的疏漏点 #

你混淆了对象字面量的计算属性语法和解构语法的逻辑差异：

• 对象字面量用[NAME_FIELD]: 'xxx'定义属性时，只需要确定属性键名，不需要额外声明变量，因此支持动态计算
• 解构赋值的简写语法需要同时确定「匹配键名」和「声明变量名」两个信息，动态键只能用于指定匹配的键名，变量名必须静态显式指定

合法的动态键解构写法 #

如果需要用动态变量指定匹配的键，只需要显式声明要赋值的变量即可：

const NAME_FIELD = 'name'
const state = { [NAME_FIELD]: 'ashwani' }
// 显式指定变量名为userName，静态可识别
const { [NAME_FIELD]: userName } = state
console.log(userName) // 输出 ashwani

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