JS ES6解构赋值省略分号引发WebStorm/ESLint报错的原因咨询

这事儿本质是JavaScript的自动分号插入（ASI）机制在搞鬼——虽然浏览器控制台能“凑活”运行，但你的代码在语法解析层面其实存在歧义，WebStorm和ESLint只是提前帮你揪出了这个潜在问题。咱们先把你的代码格式化看清楚：

const myArray = ['123', 'abc']
let a, b
[a, b] = myArray
[a, b] = myArray
console.log([a, b])

核心问题：ASI不会自动为行首[开头的语句补分号 #

JavaScript的ASI规则有几个例外场景，其中一个就是：当某一行的开头是[、(、+、-、/这些符号时，引擎会默认把它和上一行的代码合并解析，而不是当成新的独立语句。

回到你的代码，第三行末尾没加分号，第四行的[a, b]就会被引擎误解成前一行的数组索引操作，最终被解析成这样的诡异代码：

[a, b] = myArray[a, b] = myArray

这里的myArray[a, b]用到了逗号运算符，它会先执行a（此时a还是undefined），然后返回b的值（同样是undefined），所以相当于myArray[undefined] = myArray，再把这个结果赋值给[a, b]。

虽然浏览器能硬着头皮解析这段代码，但这完全不是你想要的“第二次解构赋值”——你的意图是执行两次独立的解构，而不是搞一次奇怪的连续赋值。

为什么加了分号就正常？ #

当你在第三行末尾加上分号后，相当于明确告诉引擎：这行代码结束了。第四行的[a, b] = myArray就会被当成独立的解构赋值语句，完全符合语法预期，自然就不会被WebStorm/ESLint报错了。

额外提醒 #

即使浏览器能运行这种有歧义的代码，也绝对不推荐这么写：

• 它会让代码逻辑变得模糊，后续维护很容易踩坑
• ESLint的no-unexpected-multiline规则就是专门检测这种情况的，目的是避免你写出这种“看起来正确但实际逻辑跑偏”的代码

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