這篇文章主要介紹了JavaScript代碼加不加分號的區(qū)別是什么,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
我們提供的服務有:網站建設、成都網站設計、微信公眾號開發(fā)、網站優(yōu)化、網站認證、麗江ssl等。為千余家企事業(yè)單位解決了網站和推廣的問題。提供周到的售前咨詢和貼心的售后服務,是有科學管理、有技術的麗江網站制作公司
這個問題在很多文章中都討論過,在 ESlint 規(guī)范中也因為加不加分號而分為兩大陣營,到于加不加分號,關鍵是需要了解分號對于 JavaScript 的影響,開始之前可以先看看下面這道面試題:
請問這段代碼是否能夠正常運行?
var a = 1 (function() { console.log(2) })()
。
。
。
。
如果運行這段代碼,會出現(xiàn)下面的錯誤:
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,在實際運行時會自動被加入分號,也就不會出現(xiàn)上面的錯誤。
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 是出于一片好心,用來修正沒有加入分號的代碼片段,但偏偏在有的地方并沒有發(fā)揮它的作用(例如本文一開始所介紹的立即函數),導致代碼出現(xiàn)了錯誤;甚至有些代碼不會出錯,但會使你的代碼執(zhí)行結果和預期相差萬里。
解決 ASI 問題的方式如下:
無論如何都要加上分號,完全由自己決定代碼的分割
牢記不會自動加入分號的規(guī)則,當不會自動插入分號時,則手動加入
不會被自動加入分號的規(guī)則
下面時各種不會自動加入分號的規(guī)則:
新行的代碼是從 (
、[
、/
字符開始的,這類情況一般會直接出現(xiàn) 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)
新行以 +
,-
,*
,%
開始,這類情況大多會影響運算結果,所以應該合并為一行。
var a = 2 var b = a +a
新行以 ,
或 .
開始,這種用法經常會出現(xiàn),主要是為了避免代碼過長而加入的分隔,這種情況并不會影響運行,如果善用的話會使代碼更容易閱讀。
var a = 2 var b = a .toString() console.log(typeof b) var a = 1 ,b = 2 // b 同樣會被 var 聲明
如果遇到需要加入分號的情況,除了可以在語句的末尾加入分號外,也可以把分號加在“不會自動加入分號”的最前方,例如 ()
本身不會自動加入分號,在有這種需求時可以將 ;
加到前面(ESLint Standard JS 規(guī)范就用這個方法避免錯誤)。
// 運行錯誤 (function() { })() (function() { })() // 正確 ;(function() { })() ;(function() { })()
感謝你能夠認真閱讀完這篇文章,希望小編分享的“JavaScript代碼加不加分號的區(qū)別是什么”這篇文章對大家有幫助,同時也希望大家多多支持創(chuàng)新互聯(lián),關注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關知識等著你來學習!