JavaScript对象解构不支持直接用变量作属性名，但可通过计算属性名{[key]: targetVar}实现动态提取；key需已定义且求值为合法字符串，支持默认值、剩余属性及错误防护，复杂场景下方括号访问更直观。

JavaScript 中对象解构本身不支持直接用变量作为属性名进行解构，但可以通过「计算属性名 + 解构赋值」的组合方式实现动态属性名的提取。

动态属性名必须配合计算属性语法

解构左侧不能直接写变量，但可以使用方括号 [] 包裹表达式，让属性名在运行时计算。这是 ES6 支持的「计算属性名」语法，需和解构赋值结合使用：

• 写法是：{ [key]: targetVar } = obj，其中 key 是字符串或可转为字符串的表达式
• key 必须已定义（不能是未声明变量），且最终求值得到一个合法属性名（如 "name"、"user_123"）
• 注意：不能省略冒号，[key] 是属性名，右边才是要赋值的变量名

常见实用写法示例

✅ 正确用法：

const obj = { name: "Alice", age: 30 };
const key = "name";
const { [key]: userName } = obj;
console.log(userName); // "Alice"

✅ 多个动态属性（需分别写）：

const obj = { title: "JS Guide", author: "Bob", year: 2024 };
const key1 = "title";
const key2 = "author";
const { [key1]: bookTitle, [key2]: bookAuthor } = obj;
console.log(bookTitle, bookAuthor); // "JS Guide" "Bob"

❌ 错误写法（语法错误）：

Java Api Extractor

从 Java 项目中提取 Controller 层接口定义为 JSON 数据。

下载

const key = "name";
const { key: userName } = obj; // ❌ 解构出的是字面量 "key"，不是变量值

处理不确定是否存在属性的情况

动态解构同样支持默认值和解构失败防护：

• 加默认值：{ [key]: value = "default" } = obj
• 避免报错（属性不存在时设为 undefined）：只要不开启严格模式或不依赖该值，就不会报错；若想更稳妥，可先检查 obj[key] !== undefined
• 与剩余属性结合：{ [key]: dynamicVal, ...rest } = obj 也合法

替代方案：用方括号访问更直观

如果逻辑较复杂（比如 key 来自用户输入、API 响应等），有时直接用传统访问更清晰：

const key = getDynamicKey();
const value = obj[key]; // 简单明了，无需解构语法糖

解构优势在于批量提取 + 重命名，动态场景下若只取一个值，普通访问反而更易读、更易调试。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南