JavaScript对象解构支持动态属性名，需用计算属性语法[ key ]: 变量名，可与静态属性共存，特殊字符键名须完全匹配，支持默认值，适用于配置驱动或API字段不确定场景。
JavaScript 中对象解构结合动态属性名，核心是用 计算属性语法（即方括号 []）配合解构，让属性名在运行时决定，而不是写死。
动态属性名必须用方括号包裹
解构时不能直接写 const { obj[key] } = data —— 这是语法错误。正确做法是把整个动态键作为计算属性放在解构左侧的键位置，并给它起一个变量名：
const key = 'userName';
const data = { userName: 'Alice', age: 30 };
// ✅ 正确：用 [key]: 变量名 的形式
const { [key]: name } = data;
console.log(name); // 'Alice'
可以同时解构静态和动态属性
一个解构表达式里，静态键和动态键可共存，互不影响：
const data = { id: 123, status: 'active', 'user-info': { role: 'admin' } };
const dynamicKey = 'user-info';
const { id, status, [dynamicKey]: userInfo } = data;
console.log(id, status, userInfo); // 123 'active' { role: 'admin' }
动态键名含特殊字符时需确保字符串准确
如果属性名含空格、短横线、点号等（如 'full name'、'user-id'），必须保证 key 变量的值与实际属性名**完全一致**：
立即学习“Java免费学习笔记（深入）”；
- 错误示例：
const { ['user-id']: id } = { 'user-id': 456 }✅ 可以；但若写成['userId']就取不到 - 建议对不确定的键做存在性检查，避免解构出
undefined - 需要默认值？可在解构中为动态变量加默认赋值：
{ [key]: value = 'default' } = obj
常用于配置驱动或 API 响应字段不确定的场景
比如后端返回的字段名由前端传参控制，或不同版本接口字段名不同：
function getUserField(data, field) {
const { [field]: result } = data || {};
return result ?? null;
}
// 调用
getUserField({ name: 'Bob', email: 'b@x.com' }, 'email'); // 'b@x.com'
getUserField({ name: 'Bob', email: 'b@x.com' }, 'phone'); // null
