自动插入分号机制

📜 JS 自动分号插入(ASI)机制详解

自动分号插入(Automatic Semicolon Insertion)是 JavaScript 中一个独特而重要的特性，它影响着代码的解析和执行方式。

---

🌟 核心概念速览

ASI = 引擎自动补充分号
当 JavaScript 解析器遇到特定语法情况时，会自动在适当位置插入分号，即使开发者没有显式书写。

• 语句结尾如果不写分号，浏览器会自动添加，但是会消耗一些系统资源， 而且有些时候，浏览器会加错分号，所以在开发中 分号必须写
• JS 中会 自动忽略多个空格和换行，所以我们可以利用空格和换行对代码进行格式化。

🔍 三大触发场景

1. 📝表达式语句 和变量声明后

2. 📜 代码块结束处

   • 在 } 闭合前

   function foo() {
     return 
     { bar: 1 } // 在return后插入分号
   }
   

3. 🏁 程序结束处

   • 在文件末尾确保语句终止

   const a = 1 // 文件末尾会自动补分号
   

⚠️ 高风险场景

✅ASI触发场景

🎯箭头函数

const foo = () =>  // ❌ ASI 在 => 后插入分号
  { bar: 1 } // 返回undefined

({ bar: 1 })使用小括号，避免 {} 被解析为代码块，而是返回对象：

---

🎯 return语句后

JS 引擎解析 return 语句时，遇到换行符时会 默认插入分号

function foo() {
  return  // 🚨 ASI在此插入分号
  {
    bar: 1
  }
}
console.log(foo()) // undefined

因此，若要返回对象，{} 需要与 return 关键字在同一行。

---

🎯throw 语句后

throw  // 🚨 ASI在此插入分号
new Error('Oops') 

---

🎯break 或 continue 后

🚫ASI 不会触发的情况

🎯行首为特殊字符 ：

以 (、[、/、+、- 、模板字符串 、++、**--**开头的行：

const a = 1
[1, 2, 3].forEach(console.log) // 报错：1[1,2,3]
// 解析为：const a = 1[1,2,3].forEach...

const b = 1
(function() { console.log(b) })() // 报错：1 is not a function
// 解析为：const b = 1(function() {...})()

---

🎯for循环头部

for (
  let i = 0 // ❌ ASI不会在这里插入分号
  i < 10
  i++
) {
  // ...
}

---

🎯do-while语句 结尾

do-while 语句结尾 不会自动插入分号，需要手动加 ;，否则可能导致解析错误。

do {
  console.log("Hello");
} while (false)   // 🚨 ASI 误判为 `do; while (false);`
console.log("World"); // 语法错误！

---

🛡️ 建议

Vscode的Prettier插件，设置为保存文件 自动格式化代码 且加分号