为何object.[key]写法在React中可运行，原生JS中却报错？

首先明确：object.[key]本身不符合原生JS语法规范，在纯JS环境（比如浏览器控制台、原生JS文件）运行必然抛出语法错误，你测试的结果是完全正确的。

它能在React项目中正常运行的核心原因是React项目的编译链路做了自动容错处理：

• 现在所有的React工程都会接入Babel、TypeScript这类转译编译工具，这类工具为了降低开发时的语法纠错成本，内置了基础的语法容错逻辑：object.[key]属于非常典型的手误（多打了一个英文句号），转译工具在编译阶段会自动去掉多余的.，把它转换成标准的object[key]写法后再输出最终的运行代码。
• 你可以直接查看React项目打包后的产物代码，对应位置绝对不会出现object.[key]的写法，都是标准的合法语法，所以浏览器执行时自然不会报错。

另外还有一种容易混淆的场景：如果代码本身是符合规范的可选链写法object?.[key]，ES2020已经把可选链纳入标准，React的编译工具也会对该语法做降级兼容，低版本浏览器也能正常运行。

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