本文解析 { [field]: value } 这一语法——它并非“数组写法”，而是 ES6 引入的计算属性名（Computed Property Names），用于在对象字面量中动态生成键名，与静态写法 { field: value } 有本质区别。

本文解析 `{ [field]: value }` 这一语法——它并非“数组写法”，而是 es6 引入的**计算属性名（computed property names）**，用于在对象字面量中动态生成键名，与静态写法 `{ field: value }` 有本质区别。

在 JavaScript 中，{ [field]: value } 看似奇怪，实则是标准且强大的语言特性。方括号 [] 并非表示数组，而是一种表达式求值语法：ES2015（ES6）允许在对象字面量的属性名位置使用方括号包裹任意表达式，该表达式会在运行时被计算，并将其结果作为属性键名。

例如：

const keyName = 'userName';
const userValue = 'Alice';

// ✅ 动态键名：keyName 变量值被求值为字符串 'userName'
const obj1 = { [keyName]: userValue };
console.log(obj1); // { userName: 'Alice' }

// ❌ 静态键名：字面量 'keyName' 被当作固定字符串键
const obj2 = { keyName: userValue };
console.log(obj2); // { keyName: 'Alice' }

回到原始代码片段：

for (const [field, value] of Object.entries(this.$route.query)) { 
  ranges.push({ [field]: value }); // 关键在此：field 是运行时变量（如 'page', 'sort'）
}

假设 this.$route.query 为 { page: '2', sort: 'desc' }，则循环中：

java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载

立即学习“Java免费学习笔记（深入）”；

• 第一次：field = 'page', value = '2' → { [field]: value } → { page: '2' }
• 第二次：field = 'sort', value = 'desc' → { sort: 'desc' }

若错误地写成 { field: value }，结果将统一是 { field: '2' } 和 { field: 'desc' } —— 所有对象都只有名为 "field" 的键，完全丢失原始查询参数的真实语义。

⚠️ 注意事项：

• 计算属性名中的表达式必须返回字符串、Symbol 或可转换为字符串的值（如数字 42 会转为 '42'）；
• null 或 undefined 会触发 TypeError（不能转换为有效属性名）；
• 仅适用于对象字面量定义阶段；对象创建后添加动态键仍需用 obj[key] = value；
• 与解构赋值中的 [a, b] = arr 或属性访问 obj[field] 的方括号语义不同，此处专指对象初始化时的键名计算。

✅ 总结：{ [field]: value } 绝非冗余或“无用”，而是实现运行时键名映射的核心语法，在处理 URL 查询参数、表单数据、配置合并等场景中不可或缺。掌握它，是写出灵活、可维护 JavaScript 对象操作逻辑的关键一步。