您好,登錄后才能下訂單哦!
了解JS代碼中加分號和不加分號有什么區(qū)別?這個問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容,讓我們一起來看看吧!
這個問題在很多文章中都討論過,在 ESlint 規(guī)范中也因?yàn)榧硬患臃痔柖譃閮纱箨嚑I,到于加不加分號,關(guān)鍵是需要了解分號對于 JavaScript 的影響,開始之前可以先看看下面這道面試題:
請問這段代碼是否能夠正常運(yùn)行?
var a = 1 (function() { console.log(2) })()
如果運(yùn)行這段代碼,會出現(xiàn)下面的錯誤:
Uncaught TypeError: 1 is not a function
什么鬼!1 is not a function
?我們沒有打算運(yùn)行數(shù)字 1,為什么說數(shù)字 1 不是函數(shù),這種錯誤是很難找到原因的,經(jīng)常會在出問題的代碼行上打轉(zhuǎn)。這個錯誤必然是上嗎的代碼在運(yùn)行時被看作是同一行,其概念如下:
var a = 1(function() { /* */ })()
因此立即函數(shù)的 ()
被附加在 1 上,這是一個調(diào)用函數(shù)的語法,所以會產(chǎn)生 1 is not a function
的錯誤,想要避免這個錯誤就需要使用分號:
var a = 1 // 隨便把分號放在哪里,只要能隔開就行 ;(function() { console.log(2) })()
ASI是 “Automatic Semicolon Insertion” 的縮寫,在運(yùn)行時會往有些折行的代碼中自動插入分號,這個機(jī)制可以使部分代碼在沒有加入分號時也能正常運(yùn)行,比如下面的例子:
var b = 1 ++b console.log('b', b)
由于代碼中的 ++
屬于一元表達(dá)式,它只能在表達(dá)式的左邊或右邊放置變量,如果沒有 ASI 的機(jī)制,代碼會被轉(zhuǎn)換為 var b = 1 ++ b
這樣的錯誤語句。不過好在有 ASI,在實(shí)際運(yùn)行時會自動被加入分號,也就不會出現(xiàn)上面的錯誤。
var b = 1; ++b; console.log('b', b); // 2
再來看一個例子,下面的代碼在 return
的后面空一行后再寫要返回的值,那么問運(yùn)行結(jié)果是什么呢?
function fn() { return '小明' } console.log(fn())
這段程序代碼因?yàn)?ASI 的修正,return
的后面會被加上一個分號,所以 return
與預(yù)期返回的值被分開了,結(jié)果 return
的內(nèi)容為空值,最終的結(jié)果也只能是 undefined
。
function fn() { return; '小明'; } console.log(fn()); // undefined
本來 ASI 是出于一片好心,用來修正沒有加入分號的代碼片段,但偏偏在有的地方并沒有發(fā)揮它的作用(例如本文一開始所介紹的立即函數(shù)),導(dǎo)致代碼出現(xiàn)了錯誤;甚至有些代碼不會出錯,但會使你的代碼執(zhí)行結(jié)果和預(yù)期相差萬里。
解決 ASI 問題的方式如下:
下面時各種不會自動加入分號的規(guī)則:
(
、[
、/
字符開始的,這類情況一般會直接出現(xiàn) Uncaught TypeError
從而導(dǎo)致代碼無法運(yùn)行。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)
+
,-
,*
,%
開始,這類情況大多會影響運(yùn)算結(jié)果,所以應(yīng)該合并為一行。var a = 2 var b = a +a
,
或 .
開始,這種用法經(jīng)常會出現(xiàn),主要是為了避免代碼過長而加入的分隔,這種情況并不會影響運(yùn)行,如果善用的話會使代碼更容易閱讀。var a = 2 var b = a .toString() console.log(typeof b) var a = 1 ,b = 2 // b 同樣會被 var 聲明
如果遇到需要加入分號的情況,除了可以在語句的末尾加入分號外,也可以把分號加在“不會自動加入分號”的最前方,例如 ()
本身不會自動加入分號,在有這種需求時可以將 ;
加到前面(ESLint Standard JS 規(guī)范就用這個方法避免錯誤)。
// 運(yùn)行錯誤 (function() { })() (function() { })() // 正確 ;(function() { })() ;(function() { })()
感謝各位的閱讀!看完上述內(nèi)容,你們對JS代碼中加分號和不加分號有什么區(qū)別大概了解了嗎?希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。