JavaScript代碼加分號和不加分號有什么區別

本篇內容介紹了“JavaScript代碼加分號和不加分號有什么區別”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

這個問題在很多文章找那個都討論過，在 ESlint 規范中也因為加不加分號而分為兩大陣營，到于加不加分號，關鍵是需要了解分號對于 JavaScript  的影響，開始之前可以先看看這道面試題：

請問這段代碼是否能夠正常運行?

var a = 1 (function() {   console.log(2) })()

如果運行這段代碼，會出現下面的錯誤：

Uncaught TypeError: 1 is not a function

什么鬼!1 is not a function ?我們沒有打算運行數字 1，為什么說數字 1  不是函數，這種錯誤是很難找到原因的，經常會在出問題的代碼行上打轉。這個錯誤必然是上嗎的代碼在運行時被看作是同一行，其概念如下：

var a = 1(function() { /* */ })()

因此立即函數的 () 被附加在 1 上，這是一個調用函數的語法，所以會產生 1 is not a function  的錯誤，想要避免這個錯誤就需要使用分號：

var a = 1 // 隨便把分號放在哪里，只要能隔開就行 ;(function() {   console.log(2) })()

ASI 自動加入分號

ASI是 “Automatic Semicolon Insertion”  的縮寫，在運行時會往有些折行的代碼中自動插入分號，這個機制可以使部分代碼在沒有加入分號時也能正常運行，比如下面的例子：

var b = 1 ++b console.log('b', b)

由于代碼中的 ++ 屬于一元表達式，它只能在表達式的左邊或右邊放置變量，如果沒有 ASI 的機制，代碼會被轉換為 var b = 1 ++ b  這樣的錯誤語句。不過好在有 ASI，在實際運行時會自動被加入分號，也就不會出現上面的錯誤。

var b = 1; ++b; console.log('b', b); // 2

return 與分號的關系

再來看一個例子，下面的代碼在 return 的后面空一行后再寫要返回的值，那么問運行結果是什么呢?

function fn() {   return    '小明' } console.log(fn())

這段程序代碼因為 ASI 的修正，return 的后面會被加上一個分號，所以 return 與預期返回的值被分開了，結果 return  的內容為空值，最終的結果也只能是 undefined 。

function fn() {   return;   '小明'; } console.log(fn()); // undefined

到底應該怎樣處理分號

本來 ASI  是出于一片好心，用來修正沒有加入分號的代碼片段，但偏偏在有的地方并沒有發揮它的作用(例如本文一開始所介紹的立即函數)，導致代碼出現了錯誤;甚至有些代碼不會出錯，但會使你的代碼執行結果和預期相差萬里。

解決 ASI 問題的方式如下：

• 無論如何都要加上分號，完全由自己決定代碼的分割

• 牢記不會自動加入分號的規則，當不會自動插入分號時，則手動加入

不會被自動加入分號的規則

下面時各種不會自動加入分號的規則：

1.新行的代碼是從 (、[、/ 字符開始的，這類情況一般會直接出現 Uncaught TypeError 從而導致代碼無法運行。

var a = 1 var b = a (a + b).toString()  var a = 1 [1,2,3].forEach(bar)   (function() { })() (function() { })()   var a = 1 var b = a /test/.test(b)

2.行以 +，-，*，% 開始，這類情況大多會影響運算結果，所以應該合并為一行。

var a = 2 var b = a +a

3.新行以 , 或 . 開始，這種用法經常會出現，主要是為了避免代碼過長而加入的分隔，這種情況并不會影響運行，如果善用的話會使代碼更容易閱讀。

var a = 2 var b = a   .toString() console.log(typeof b)   var a = 1 ,b = 2 // b 同樣會被 var 聲明

如果遇到需要加入分號的情況，除了可以在語句的末尾加入分號外，也可以把分號加在“不會自動加入分號”的最前方，例如 ()  本身不會自動加入分號，在有這種需求時可以將 ; 加到前面(ESLint Standard JS 規范就用這個方法避免錯誤)。

// 運行錯誤 (function() { })() (function() { })()   // 正確 ;(function() { })() ;(function() { })()

總結

有的人認為不加分號可以讓代碼看起來更干凈和精簡，而且在大部分情況下并不會出現錯誤，所以很多人在敲代碼時不會加分號。

不過我更傾向于更嚴格的規范，也許是因為我是從后端轉到前端的，習慣了。至于到底怎么選，只要搞清楚運行上的限制，不管哪種風格都是挺不錯的，只要你喜歡就好。

“JavaScript代碼加分號和不加分號有什么區別”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！