为何CodePen中不符合语法的JavaScript属性访问器可正常运行？

现象说明 #

定义如下对象：

let res = {
  "a" : {
    "b" : 123
  },
  "c" : 3
}

在CodePen中执行以下代码时：

console.log("Valid: ",  res["a"]["b"])
console.log("Invalid: ",  res.["a"].["b"])

控制台两次都输出：

"Valid: " 123
"Invalid: " 123

但按照标准JavaScript语法，res.["a"].["b"]属于错误写法，在浏览器原生控制台、Node.js等环境中会直接抛出语法错误。

原因分析 #

CodePen默认会对JavaScript代码进行转译处理（通常使用Babel），这类转译工具会对一些非标准的“容错性”写法做自动修正：

• 它会将不符合规范的res.["a"]自动解析并转换为标准的res["a"]写法
• 最终在浏览器中实际执行的是转译后的合法代码，因此不会报错，还能得到正确结果

如果查看CodePen的编译输出（在编辑器设置中开启对应选项），就能看到转译后的代码已经是标准的属性访问语法。

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