为何{1:'a'}[1]在代码中生效却在浏览器开发者工具报错？

核心原因：JS引擎对{}的解析歧义 #

JS里的{}有两种完全不同的语义：

• 作为代码块：在语句上下文（比如全局直接执行、函数体开头）中，{}会被解析为代码块的开始/结束标记。
• 作为对象字面量：在表达式上下文（比如return后面、括号内部）中，{}才会被解析为对象的定义。

函数内写法正常的原因 #

你项目里的代码是在return语句之后，此时引擎处于表达式解析模式——它知道return后面必须跟一个表达式，所以会把{1: 'leads', ...}解析成对象字面量，随后的[this.optionValue]就是标准的对象属性访问语法（等价于先创建临时对象，再取对应键的值），所以完全合法。

控制台直接执行报错的原因 #

当你在控制台直接输入{1:'a'}[1]时，引擎处于语句解析模式：

• 开头的{}被当成代码块的开始
• 1:'a'会被解析成标签语句（标签名是1，后面的'a'是一个无意义的字符串表达式）
• 紧接着的[1]就成了无意义的语法，因为标签语句后面不能直接跟数组访问语法，所以抛出语法错误。

控制台如何正确执行这段代码 #

把整个表达式用括号包裹，强制引擎进入表达式解析模式：

({1:'a'}[1]) // 输出 'a'

额外优化建议 #

你项目里的写法虽然能运行，但每次调用typeName()都会创建一个新对象，频繁调用时会有不必要的性能开销。可以改成更高效的写法：

1. 用数组映射（适合键是连续数字的场景）：

typeName() {
  // 索引对应optionValue，索引0留空因为你的键从1开始
  const typeMap = ['', 'leads', 'customer', 'business'];
  return typeMap[this.optionValue];
}

2. 用Map存储（适合任意类型的键）：

// 把Map定义在函数外部，避免重复创建
const typeMap = new Map([
  [1, 'leads'],
  [2, 'customer'],
  [3, 'business']
]);

typeName() {
  return typeMap.get(this.optionValue);
}

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