引子：看似无害的一行代码，却让整个程序崩溃

在学习 TypeScript 的时候，我曾因为少写了一个分号，触发了一个让人摸不着头脑的编译错误：

❌ 类型“Card[]”不能分配给类型“number”

更诡异的是，这行代码乍看之下完全没有问题：

  shuffle() {
    for(let i = 0; i < this.cards.length; i++) {
      const targetIndex:number = this.getRandom(0, this.cards.length)
      [this.cards[i], this.cards[targetIndex]] = [this.cards[targetIndex], this.cards[i]]
    }
  }

但是 TypeScript 却报错了，怎么回事？明明语法也没问题，我们不是常说 JS 的分号是“可选”的嘛？

这次，它可真的不是。

一、JS 的分号真的是“可选”的吗？

很多人（包括以前的我）都习惯不写分号。因为在 JavaScript 中，确实有一种机制叫做 ASI（Automatic Semicolon Insertion，自动分号插入） ，它会在大多数情况下帮我们补上遗漏的分号。

像下面这样的代码，在不加分号的情况下也能正常运行：

let a = 1
let b = 2
console.log(a + b)

JavaScript 会在每一行后面“想当然地”补上分号。但这并不意味着它总能理解你的意图。 事实上，在某些情况下，ASI 会失效，甚至让代码逻辑彻底跑偏。

二、数组解构 + 缺失分号 = 地狱级 Bug

我们再回到那段引起错误的代码：

const targetIndex: number = this.getRandom(0, this.cards.length)
[this.cards[i], this.cards[targetIndex]] = [this.cards[targetIndex], this.cards[i]]

表面上是没问题的，但 JS 引擎的解释却可能出乎意料：

const targetIndex: number = this.getRandom(...) [this.cards[i], ...]

没错，JavaScript 把第二行开头的 [ 误以为是上一行函数调用的下标访问。它以为你在写：

this.getRandom(...)[...]

而不是一个新的解构赋值语句。

这就是 ASI 的一个坑点：当下一行以 [ 开头时，它不会自动插入分号。

三、除了 [，还有哪些坑？

除了数组开头，JS 的 ASI 机制还有一些常见的“踩雷点”：

• 下一行以 [ 开头（数组、解构）
• 下一行以 ( 开头（函数调用、立即执行函数）
• 上一行以 ++ 或 -- 结尾（自增/自减）

比如

const x = 123
[x, y] = [y, x]

JS 实际上会尝试当成一行执行：

const x = 123[x, y] = [y, x]

这当然是非法语法，也会抛出莫名其妙的错误。

四、怎么避免这种问题？

其实很简单：不要赌 JS 会自动帮你加分号，关键地方自己加！

写代码的时候，我们往往觉得“少个分号没什么大不了”，但有时候，这一丢，就像埋下了一颗“定时炸弹”，在你最不希望出错的时候，炸了出来。

规范很重要。少些分号看起来“优雅”，但出了问题你可是要多花两小时去 debug 的。

写好每一行代码，从一个分号开始 ✨