为何[0,1].forEach代码在控制台正常却在script标签报错？

先看这段代码：

[0, 1].forEach((e) => {
  console.log(e)
})

现象说明 #

• 在Chrome浏览器控制台中执行，能正常打印0和1。
• 将代码放入<script>标签中运行时，抛出错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'forEach')

• 在VSCode中输入[].forEach((e) => {console.log(e)})时，[]下方会出现红色下划线。

问题根源 #

这是JavaScript的自动分号插入（ASI）机制导致的解析歧义。

JavaScript会在特定场景下自动插入分号，但如果代码前一行结尾没有显式分号，当前行又以数组字面量[]开头时，引擎会把这两行代码合并解析。比如你的script标签里如果有这样的代码：

// 前一行没有结尾分号
someFunction()
[0, 1].forEach(e => console.log(e))

引擎会将其解析为：

someFunction()[0, 1].forEach(e => console.log(e))

这里someFunction()[0,1]用了逗号运算符，最终取1作为索引，尝试访问someFunction()返回值的索引1。如果someFunction()返回undefined，就会出现“Cannot read properties of undefined”的错误。

而Chrome控制台中，每一行代码都是独立执行单元，相当于自动给每行加上了分号，所以不会触发这个解析问题。

VSCode里的红色下划线是语法检测工具（如ESLint）识别到了ASI的潜在风险，提前提示你这里可能因分号缺失导致解析错误。

内容的提问来源于stack exchange，提问作者Axel Carrée