JavaScript省略分号导致对象赋值与数组解构异常的原因是什么？

问题1：链式赋值的输出结果原因 #

• JS中赋值运算符的结合性为从右到左，且所有赋值表达式的返回值均为等号右侧的操作数的值。
• 对代码a = {b:4}[r,s,e]= ['Ronaldo', 'Messi', 'Aguero']的解析顺序如下：
  1. 优先计算最右侧的表达式，得到数组['Ronaldo', 'Messi', 'Aguero']
  2. 执行中间段赋值：{b:4}[r,s,e] = 上述数组。这里方括号内为逗号表达式，返回值为最后一个表达式e的值，本质是给临时对象{b:4}的e属性赋值，该操作无外部可见影响，且该赋值表达式的返回值仍为右侧的数组
  3. 最后将数组赋值给变量a，整个链式表达式的最终返回值就是最右侧的数组，因此输出为['Ronaldo', 'Messi', 'Aguero']

问题2：未加分号导致的赋值异常原因 #

• 该现象的核心是JS的**自动分号插入（ASI）**规则未在预期位置插入分号，导致两行代码被合并解析。
• 未加分号时，两行相邻代码：

  options = {league: 'Premier League'}
  [r, s, e] = ['Grealish', 'De Bruyne', 'Ramos']
  

  会被JS引擎合并解析为和问题1结构一致的链式赋值：

  options = {league: 'Premier League'}[r, s, e] = ['Grealish', 'De Bruyne', 'Ramos']
  

• 解析逻辑如下：
  1. 从右到左计算，先得到最右侧的数组['Grealish', 'De Bruyne', 'Ramos']
  2. 将数组赋值给临时对象{league: 'Premier League'}的对应属性，该操作不会修改你声明的r、s、e变量
  3. 最后将数组赋值给options变量，因此options的最终值是数组而非预期的对象，r、s、e仍保留初始赋值
• 第一行末尾添加分号后，两行代码会被解析为独立的赋值语句，按照预期逻辑执行。

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