对象的key使用变量竟然还有坑

记一次小小的bug。业务很简单，前端通过域名匹配得到不同环境的项目id，如下的代码竟然得到的是undefined。🤯

const DEV_DOMAIN = 'manager.dev.cn'
const PROD_DOMAIN = 'manager.prod.cn'
const PROJECT_ID_MAP = {
  DEV_DOMAIN: 194,
  PROD_DOMAIN: 192
}
// 'manager.dev.cn'
const domain = window.location.href.split('/')[2]
const id = PROJECT_ID_MAP[domain]
console.log(id) // undefined

打印了一下PROJECT_ID_MAP，发现设置key的变量竟然直接变成值了：

解决：将变量key用中扩号包裹起来就可以读值了。

const DEV_DOMAIN = 'manager.dev.cn'
const PROD_DOMAIN = 'manager.prod.cn'
const PROJECT_ID_MAP = {
  [DEV_DOMAIN]: 194,
  [PROD_DOMAIN]: 192
}
// 'manager.dev.cn'
const domain = window.location.href.split('/')[2]
const id = PROJECT_ID_MAP[domain]
console.log(id) // 194

扩展：为对象增加属性时，也是同理

const DEV_DOMAIN = 'manager.dev.cn'
const PROD_DOMAIN = 'manager.prod.cn'
const PROJECT_ID_MAP = {
}
const PROJECT_ID_MAP_2 = {
}
PROJECT_ID_MAP.DEV_DOMAIN = 194
PROJECT_ID_MAP.PROD_DOMAIN = 192
PROJECT_ID_MAP_2[DEV_DOMAIN] = 194
PROJECT_ID_MAP_2[PROD_DOMAIN] = 192
console.log(PROJECT_ID_MAP) // { DEV_DOMAIN: 194, PROD_DOMAIN: 192}
console.log(PROJECT_ID_MAP_2) // {manager.dev.c: 194, manager.prod.cn: 192}

原理：es6对象属性表达式 JavaScript 定义对象的属性，有两种方法。

// 方法一
obj.foo = true;
// 方法二
obj['a' + 'bc'] = 123;

上面代码的方法一是直接用标识符作为属性名，方法二是用表达式作为属性名，这时要将表达式放在方括号之内。