JavaScript中为何无法使用类枚举对象作为字典键？

这个问题核心在于JavaScript对象字面量的键名解析规则，我给你掰明白：

当你在对象字面量里直接写State.ACTIVE : {color:0x00ff00}的时候，JavaScript并不会把State.ACTIVE当成变量去读取它的值（也就是1），而是直接把这个标识符序列当作字符串字面量处理——最终你的statesDict里会多一个键名为"State.ACTIVE"的属性，而不是你想要的以1为键的属性，这当然不符合预期。

那为什么直接写1: {color:0x00ff00}就行？因为对象的键本质上只能是字符串或者Symbol类型，当你用数字作为键时，JavaScript会自动把它转换成对应的字符串"1"，而State.ACTIVE的值正好是1，所以直接写数字的效果和你想要的一致。

怎么解决这个问题？ #

有两种常用的正确写法：

1. ES6+ 计算属性名（推荐）

ES6引入了计算属性名的语法，用方括号[]包裹表达式，这样表达式会被求值，结果会作为键名：

var State = {DEFAULT:0,ACTIVE:1 ,INACTIVE:2,ALERT:3};
var statesDict = {
  [State.ACTIVE]: {color:0x00ff00},
  [State.INACTIVE]: {color:0x000000}
};

这里[State.ACTIVE]会被计算成1，最终statesDict的键就是"1"，和你直接写数字的效果完全一致。

2. 动态赋值（兼容旧环境）

如果需要兼容ES6之前的环境，可以先创建空对象，再通过方括号语法动态赋值：

var State = {DEFAULT:0,ACTIVE:1 ,INACTIVE:2,ALERT:3};
var statesDict = {};
statesDict[State.ACTIVE] = {color:0x00ff00};
statesDict[State.INACTIVE] = {color:0x000000};

方括号访问对象属性时，里面的表达式会被求值，所以State.ACTIVE的值1会被当作键名使用。

简单总结：对象字面量里的普通键（不带方括号）是固定的字符串，不会解析变量；只有用方括号包裹的语法，才会把表达式求值作为键名。

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