JavaScript 語句是否省略分號

關於JavaScript語句後面是否應該省略分號，有兩種截然相反的意見。

一種意見是，語句後面應該時時刻刻使用分號，另一種則是儘量不使用分號，甚至完全不使用。

當然作為一種編碼習慣，沒有所謂的應該不應該，只有習慣不習慣，或者說喜歡不喜歡。

隨著編碼水平的提高，可能越來越多的人會覺得省略分號是更好的選擇：

（1）.編碼省卻了分號，也就省去一部分時間。

（2）.程式碼的效能在某些情況下會更高一些。

本規範建議，如果是初學者或者水平還沒有提高到一定程度，那麼就在語句後面新增分號。

如果您已經達到比較高的水準，能夠確保不會出錯，那麼可以儘可能的省略分號的使用。

其實加不加分號並不是重點，核心是要掌握如下兩個知識點：

（1）.何時可以省略語句後面的分號。

（2）.在何種場景下省略分號會導致意外。

一.對換行處理：

JavaScript解析器會將換行看做當前語句的一部分，除非人為新增一個分號結束當前行語句。

當然，如果全都遵循上述規則，那麼就沒必要討論本話題了，編碼時肯定要強制新增分號。

大家知道，在很多上下文，語句最後的分號是可以省略的，看如下程式碼：

[JavaScript] 純文字檢視 複製程式碼
let webName="螞蟻部落"
let address="青島市南區";

webName變數宣告的後面沒有新增分號，JavaScript會將上述程式碼解析為：

[JavaScript] 純文字檢視 複製程式碼
let webName="螞蟻部落";
let address="青島市南區";

可以認為JavaScript解析器為第一行語句自動填補了分號。

二.換行處理的例外：

前文中介紹過，解析器會將換行看做當前語句的一部分處理，但並不總是這樣。

那麼可以利用這些例外情況，省略語句後面的分號，可以認為解析器自動填補了分號。

1.當前行與新的行構成非法語句：

[JavaScript] 純文字檢視 複製程式碼
let webName="螞蟻部落"
let address="青島市南區";

現在來分析一下，為什麼解析器會在第一行的結尾自動新增分號。

因為解析器會將換行也看作為當前的語句，那麼上述程式碼就可以表述為如下形式：

[JavaScript] 純文字檢視 複製程式碼
let webName="螞蟻部落" let address="青島市南區";

很明顯，程式碼會報錯，所以解析器會第一行的幾位自動填補了分號。

利用這個特點，我們可以在一些上下文下省略語句後面的分號。

2.return與continue和break：

以return語句作為例子進行介紹，看如下程式碼例項：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
function func(){
  return 
  "螞蟻部落"
}
console.log(func());

程式碼執行效果截圖如下：

程式碼的本意是函式返回字串"螞蟻部落"，然而真正的返回值是undefined。

因為對於return語句，如果後面是換行，那麼解析器會自動在後面新增一個分號。

continue和break也是同樣的道理，這裡不做介紹，更多內容可以參閱如下幾篇文章：

（1）.JavaScript return 語句一章節。

（2）.JavaScript break與continue語句一章節。

3.++與--運算子：

這兩個運算子既可以放在運算數的前面，也可以放在運算數的後面。

如果將它們置於運算數的後面，則需要放在一行，否則雖然可能不會報錯，但會偏離運算初衷。

看如下程式碼：

[JavaScript] 純文字檢視 複製程式碼
a 
++ 
b;

我們的真正的目的可能是如下形式：

[JavaScript] 純文字檢視 複製程式碼
a ++ ;b;

但是實際解析的效果卻是如下形式：

[JavaScript] 純文字檢視 複製程式碼
a;++b;

4.for迴圈語句：

迴圈語句頭部小括號中的分號是絕對不能省略的，即便是引數沒有填寫也不能省略。

看如下程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let num=5;
for(;num<10;num++){
  console.log(num);
}

程式碼執行效果截圖如下：

for迴圈語句的頭部的分號是絕對不能省略的，更多內容參閱JavaScript for 迴圈語句一章節。

三.換行處理規則可能帶來的問題：

如果以如下幾個token作為一行的開頭，可能會和上一行導致解析歧義。

雖然程式碼可能不會報錯，但是結果卻背離初衷，token羅列如下：

（1）.括號

（2）.方括號

（3）.正則開頭的斜槓

（4）.加號

（5）.減號

（6）.字串模板的反引號由於篇幅問題，不對上面的token挨個演示，僅演示比較常見的兩個：

[JavaScript] 純文字檢視 複製程式碼
a = b
(function() {
   // code 
})()

上述程式碼會被JavaScript解析器解讀為如下形式：

[JavaScript] 純文字檢視 複製程式碼
a = b(function() {
  // code
})();

本來是一個簡單的變數賦值之後，然後一個自執行匿名函式，現在b卻成了函式。

[JavaScript] 純文字檢視 複製程式碼
a = b
[1,2,3].forEach(function(item) {
  // code
});

上述程式碼會被解析為如下形式：

[JavaScript] 純文字檢視 複製程式碼
a = b[1,2,3].forEach(function(item) {
  // code
});

b變成了一個陣列，原本的陣列[1,2,3]，通過逗號運算子運算後，變成了陣列b的索引b[3]。

if else語句可能導致的問題：

有時候經常會對if else語句進行一些簡寫，不注意可能會導致錯誤。

看如下簡單程式碼：

[JavaScript] 純文字檢視 複製程式碼
if (a > b)
else c = d

上述程式碼會報錯，因為else不能跟在if的後面，這時候可以在if語句後面新增一個分號，生成一個空語句。

當然也可以新增一個空的大括號{}，很明顯新增一個分號更加省時省力，程式碼修改如下：

[JavaScript] 純文字檢視 複製程式碼
if (a > b);
else c = b

在if後面的新增一個分號，程式碼就不會再報錯。