JavaScript省略分号导致数组解构赋值报错的问题咨询

你的代码如下：

let [foo, bar] = [0,1];

console.log("*") // 此处不加分号会报错 
[foo, bar] = d(foo, bar);
console.log(foo, bar)

function d(a, b) {
    return [1+a, 1+b]
}

当省略console.log("*")末尾的分号时，会抛出错误：

TypeError: console.log(...) is undefined

这不是数组解构的已知行为，问题出在JavaScript的**自动分号插入（ASI）**机制上。

原因解析 #

JavaScript允许省略语句末尾的分号，引擎会在特定场景下自动补充分号，但存在解析歧义的情况：
当你省略分号后，引擎会把下一行开头的[foo, bar]和上一行的console.log("*")合并解析，变成：

console.log("*")[foo, bar] = d(foo, bar);

这里的[foo, bar]被解析成属性访问器（逗号运算符最终取bar的值，也就是1，等价于console.log("*")[1]），但console.log()的返回值是undefined，试图给undefined的属性赋值，自然会触发类型错误。

解决方式 #

• 最直接的：给console.log("*")末尾加上分号，明确终止当前语句；
• 也可以在以[、(等开头的语句前手动添加分号，避免和上一行合并：

  let [foo, bar] = [0,1];
  
  console.log("*")
  ;[foo, bar] = d(foo, bar);
  console.log(foo, bar)
  
  function d(a, b) {
      return [1+a, 1+b]
  }
  

• 建议养成一致的代码风格，要么始终添加分号，要么熟悉ASI的规则，避开容易引发歧义的场景。

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