JavaScript中{ [field]: value }对象语法是什么？有何作用？

你看到的[field]不是数组语法，而是ES6新增的计算属性名特性，用来动态生成对象的属性键，和你以为的{ field: value }有本质区别：

• 写{ field: value }时，对象的键是固定字符串"field"，不管变量field的值是什么，最终生成的都是{ "field": value }。
• 写{ [field]: value }时，方括号会先计算里面表达式（这里就是变量field）的值，把结果转成字符串作为属性键。比如如果field的值是"age"，那生成的就是{ "age": value }；如果field的值是"name"，生成的就是{ "name": value }。

你觉得两者效果一致，大概率是测试时field变量的值刚好就是"field"，这才会出现日志里显示"field"的情况。回到你的代码场景：
Object.entries(this.$route.query)会把URL查询参数转成键值对数组，比如如果this.$route.query是{ username: "luca", role: "admin" }，那循环里的field会依次取"username"和"role"，用[field]就能生成对应键的对象：{ username: "luca" }、{ role: "admin" }；但如果写成{ field: value }，最终得到的会是两个键都是"field"的对象：{ field: "luca" }、{ field: "admin" }，这显然不是代码想要的结果。

另外补充一点：对象的键本质上都是字符串（或Symbol类型），这里的方括号只是语法糖，用来包裹任意表达式（比如{ [1+2]: "foo" }会生成{ "3": "foo" }），并不是把数组作为键。

这个语法非常实用，在需要动态生成属性名的场景（比如处理动态参数、表单字段映射、遍历键值对生成对象等）是必不可少的，绝非毫无用处。

内容的提问来源于stack exchange，提问作者Luca Reghellin