JavaScript对象键用数组元素报错原因及方括号语法解析

这是个非常典型的ES6语法特性问题，我来给你拆解清楚：

核心原因：ES6前后对象字面量的语法差异 #

在ES6（ECMAScript 2015）之前，JavaScript的对象字面量对属性名的要求很严格：

• 只能是标识符（比如myKey，要符合变量命名规则：不能以数字开头、不能有特殊符号等）
• 或者字符串字面量（比如'my-key'）

而arr1[0]是一个表达式（用来获取数组元素的操作），完全不符合旧语法里属性名的要求。当你写{arr1[0]: arr2[0]}时，JS引擎会误以为arr1是一个标识符属性名，然后后面的[0]就成了莫名其妙的语法碎片，自然会抛出语法错误。

ES6的解决方案：计算属性名 #

ES6专门引入了计算属性名的特性，就是用[表达式]的形式来定义对象属性名。当你写{[arr1[0]]: arr2[0]}时，JS引擎会先执行方括号里的表达式：

1. 计算arr1[0]得到值'a'
2. 把这个值转换成字符串（如果是Symbol就保留），作为最终的属性名
3. 再把arr2[0]的值0赋给这个属性

这样就完美实现了你想要的{'a': 0}效果，完全符合语法规范。

相关文档在哪里找？ #

• 官方的ECMAScript规范里，搜索“Object Initializer”（对象初始化器）章节，里面明确规定了计算属性名的语法和行为，属于对象字面量的可选语法之一。
• MDN的对象字面量文档中，有专门的“计算属性名”小节，会结合示例详细讲解这个特性的用法和注意事项。

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