本文详解 { [field]: value } 这一语法——它并非“奇怪”或“无用”，而是 ES6 引入的计算属性名（Computed Property Names），用于在对象字面量中动态生成键名，是构建灵活、可编程对象结构的关键特性。
本文详解 `{ [field]: value }` 这一语法——它并非“奇怪”或“无用”，而是 es6 引入的**计算属性名（computed property names）**，用于在对象字面量中动态生成键名，是构建灵活、可编程对象结构的关键特性。
在 JavaScript 中，{ [field]: value } 是标准且功能强大的语法，属于 ES2015（ES6）规范的一部分。方括号 [] 并非数组语法，而是计算属性名的标识符——它告诉 JavaScript 引擎：将方括号内表达式的运行结果作为该属性的键名，而非字面量字符串。
对比以下两种写法，差异一目了然：
const field = 'userName';
const value = 'alice';
// ✅ 正确：使用计算属性名 → 键名为变量 field 的值
const obj1 = { [field]: value };
console.log(obj1); // { userName: 'alice' }
// ❌ 错误：未加方括号 → 键名就是字面量 'field'
const obj2 = { field: value };
console.log(obj2); // { field: 'alice' }回到你原始代码中的场景：
for (const [field, value] of Object.entries(this.$route.query)) {
ranges.push({ [field]: value });
}这里 this.$route.query 是一个类似 { page: '2', sort: 'date', q: 'js' } 的查询参数对象。Object.entries() 返回 [ ['page', '2'], ['sort', 'date'], ... ]，解构后 field 是字符串 'page'、'sort' 等。若不使用 [field]，而是写成 { field: value }，最终得到的将是多个形如 { field: '2' } 的对象——所有键名都固定为 "field"，完全丢失原始参数名，彻底破坏数据语义。
立即学习“Java免费学习笔记（深入）”；
✅ 正确结果（使用 [field]）：
[
{ page: '2' },
{ sort: 'date' },
{ q: 'js' }
]⚠️ 常见误区与注意事项：
- 计算属性名必须用方括号包裹表达式，不能省略；仅
{ key }是简写属性（等价于{ key: key }），与计算无关； - 方括号内支持任意表达式，例如：
{ [prefix_${id}]: data }、{ [getKeyName()]: value }； - 若表达式求值为
null或undefined，会自动转为字符串"null"或"undefined"作为键名（需谨慎）； - 计算属性名只在对象字面量初始化时生效，无法用于后续属性赋值（如
obj.[field] = value是语法错误；应使用obj[field] = value）。
总结：{ [field]: value } 绝非冗余或“奇怪”的写法，而是实现动态键名映射的必要语法。在处理路由参数、表单数据、API 响应解析等场景中，它是保持键名灵活性与数据准确性的核心实践。掌握它，是写出可维护、可扩展 JavaScript 对象操作逻辑的重要一步。
