ESLint报no-sequences逗号使用异常 连续数组forEach调用报错疑问

问题根因 #

这不是ESLint的bug，是JavaScript**自动分号插入(ASI)**规则导致的语法解析歧义：
两段相邻的数组方法调用没有分号分隔时，JS引擎不会自动在第一个forEach末尾插入分号，而是会把两段代码合并解析为连续表达式：

const full = {};

["firstname", "lastname", "spouse"].forEach(key => {
})["cellphone", "phone"].forEach(key => {
})

此时JS会将第一个forEach的返回值（undefined）后的["cellphone", "phone"]识别为属性访问操作，方括号内部的"cellphone", "phone"会被解析为逗号运算符构成的序列表达式，最终取最后一个值"phone"，相当于尝试执行undefined["phone"].forEach(...)，这个解析过程中出现的序列表达式正好触发了no-sequences规则的校验。

修复方案 #

有两种常用修复方式：

1. 主动在第一个forEach语句末尾补加分号，阻断错误的合并解析：

const full = {};

["firstname", "lastname", "spouse"].forEach(key => {
}); // 末尾添加分号

["cellphone", "phone"].forEach(key => {
})

2. 如果你遵循不写分号的代码风格，可以在所有以[、(、模板字符串反引号开头的语句前主动加前置分号规避ASI坑：

const full = {};

["firstname", "lastname", "spouse"].forEach(key => {
})

;["cellphone", "phone"].forEach(key => { // 行首加前置分号
})

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