ES6 引入的计算属性名语法 { [key]: value } 允许使用变量或表达式动态生成对象键名，而非字面量字符串，是创建灵活、可复用对象结构的关键特性。
es6 引入的计算属性名语法 `{ [key]: value }` 允许使用变量或表达式动态生成对象键名，而非字面量字符串，是创建灵活、可复用对象结构的关键特性。
在 JavaScript 中，{ [field]: value } 并非“奇怪”或“无用”的语法，而是 ES2015（ES6）正式引入的计算属性名（Computed Property Names）特性。它的核心价值在于：将变量的运行时值作为对象的属性名，从而实现动态键名构造——这在静态写法 { field: value } 下完全无法做到。
为什么不能省略方括号？
关键区别在于语义与执行时机：
const field = 'price';
const value = 99.99;
// ✅ 正确：使用计算属性名 → 键名为变量 field 的值 "price"
const obj1 = { [field]: value };
console.log(obj1); // { price: 99.99 }
// ❌ 错误：字面量键名 "field"，与变量无关
const obj2 = { field: value };
console.log(obj2); // { field: 99.99 }在你的路由查询处理场景中：
for (const [field, value] of Object.entries(this.$route.query)) {
ranges.push({ [field]: value }); // 动态生成如 { category: "books" }, { sort: "desc" }
}若写成 { field: value }，所有对象都会拥有一个固定键 "field"，彻底丢失原始查询参数的真实字段名（如 ?category=tech&sort=asc 将错误地变成 [ {field: "tech"}, {field: "asc"} ]），导致数据语义丢失、后续逻辑失效。
立即学习“Java免费学习笔记（深入）”；
使用场景与注意事项
-
✅ 适用场景：
- 解析 URL 查询参数（如本例）、表单数据映射、API 响应字段标准化；
- 构建配置对象时基于条件选择键名（如
{ [isDarkMode? 'dark' : 'light']: themeConfig }）； - 与 Symbol 或动态表达式结合（如
{ [user_${id}]: userData }）。
-
⚠️ 注意事项：
- 方括号内必须是表达式（变量、函数调用、模板字符串等），不可为空或非法标识符；
- 若
field为undefined或null，会被自动转为字符串"undefined"/"null"，建议预先校验； - 计算属性名仅在对象字面量初始化时生效，不适用于已有对象的属性赋值（此时应使用
obj[field] = value）。
总结
{ [field]: value } 不是冗余语法，而是 JavaScript 动态编程能力的重要体现。它解决了“键名未知、需运行时确定”的典型需求，是现代前端开发（尤其在 Vue/React 路由、状态管理、表单处理中）的常用实践。忽视它，往往意味着用硬编码替代灵活性，最终增加维护成本与出错风险。
