JavaScript代碼加分號(hào)和不加分號(hào)有什么區(qū)別

本篇內(nèi)容介紹了“JavaScript代碼加分號(hào)和不加分號(hào)有什么區(qū)別”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

這個(gè)問(wèn)題在很多文章找那個(gè)都討論過(guò)，在 ESlint 規(guī)范中也因?yàn)榧硬患臃痔?hào)而分為兩大陣營(yíng)，到于加不加分號(hào)，關(guān)鍵是需要了解分號(hào)對(duì)于 JavaScript  的影響，開(kāi)始之前可以先看看這道面試題：

請(qǐng)問(wèn)這段代碼是否能夠正常運(yùn)行?

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

如果運(yùn)行這段代碼，會(huì)出現(xiàn)下面的錯(cuò)誤：

Uncaught TypeError: 1 is not a function

什么鬼!1 is not a function ?我們沒(méi)有打算運(yùn)行數(shù)字 1，為什么說(shuō)數(shù)字 1  不是函數(shù)，這種錯(cuò)誤是很難找到原因的，經(jīng)常會(huì)在出問(wèn)題的代碼行上打轉(zhuǎn)。這個(gè)錯(cuò)誤必然是上嗎的代碼在運(yùn)行時(shí)被看作是同一行，其概念如下：

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

因此立即函數(shù)的 () 被附加在 1 上，這是一個(gè)調(diào)用函數(shù)的語(yǔ)法，所以會(huì)產(chǎn)生 1 is not a function  的錯(cuò)誤，想要避免這個(gè)錯(cuò)誤就需要使用分號(hào)：

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

ASI 自動(dòng)加入分號(hào)

ASI是 “Automatic Semicolon Insertion”  的縮寫(xiě)，在運(yùn)行時(shí)會(huì)往有些折行的代碼中自動(dòng)插入分號(hào)，這個(gè)機(jī)制可以使部分代碼在沒(méi)有加入分號(hào)時(shí)也能正常運(yùn)行，比如下面的例子：

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

由于代碼中的 ++ 屬于一元表達(dá)式，它只能在表達(dá)式的左邊或右邊放置變量，如果沒(méi)有 ASI 的機(jī)制，代碼會(huì)被轉(zhuǎn)換為 var b = 1 ++ b  這樣的錯(cuò)誤語(yǔ)句。不過(guò)好在有 ASI，在實(shí)際運(yùn)行時(shí)會(huì)自動(dòng)被加入分號(hào)，也就不會(huì)出現(xiàn)上面的錯(cuò)誤。

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

return 與分號(hào)的關(guān)系

再來(lái)看一個(gè)例子，下面的代碼在 return 的后面空一行后再寫(xiě)要返回的值，那么問(wèn)運(yùn)行結(jié)果是什么呢?

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

這段程序代碼因?yàn)?ASI 的修正，return 的后面會(huì)被加上一個(gè)分號(hào)，所以 return 與預(yù)期返回的值被分開(kāi)了，結(jié)果 return  的內(nèi)容為空值，最終的結(jié)果也只能是 undefined 。

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

到底應(yīng)該怎樣處理分號(hào)

本來(lái) ASI  是出于一片好心，用來(lái)修正沒(méi)有加入分號(hào)的代碼片段，但偏偏在有的地方并沒(méi)有發(fā)揮它的作用(例如本文一開(kāi)始所介紹的立即函數(shù))，導(dǎo)致代碼出現(xiàn)了錯(cuò)誤;甚至有些代碼不會(huì)出錯(cuò)，但會(huì)使你的代碼執(zhí)行結(jié)果和預(yù)期相差萬(wàn)里。

解決 ASI 問(wèn)題的方式如下：

• 無(wú)論如何都要加上分號(hào)，完全由自己決定代碼的分割

• 牢記不會(huì)自動(dòng)加入分號(hào)的規(guī)則，當(dāng)不會(huì)自動(dòng)插入分號(hào)時(shí)，則手動(dòng)加入

不會(huì)被自動(dòng)加入分號(hào)的規(guī)則

下面時(shí)各種不會(huì)自動(dòng)加入分號(hào)的規(guī)則：

1.新行的代碼是從 (、[、/ 字符開(kāi)始的，這類情況一般會(huì)直接出現(xiàn) Uncaught TypeError 從而導(dǎo)致代碼無(wú)法運(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)

2.行以 +，-，*，% 開(kāi)始，這類情況大多會(huì)影響運(yùn)算結(jié)果，所以應(yīng)該合并為一行。

var a = 2 var b = a +a

3.新行以 , 或 . 開(kāi)始，這種用法經(jīng)常會(huì)出現(xiàn)，主要是為了避免代碼過(guò)長(zhǎng)而加入的分隔，這種情況并不會(huì)影響運(yùn)行，如果善用的話會(huì)使代碼更容易閱讀。

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

如果遇到需要加入分號(hào)的情況，除了可以在語(yǔ)句的末尾加入分號(hào)外，也可以把分號(hào)加在“不會(huì)自動(dòng)加入分號(hào)”的最前方，例如 ()  本身不會(huì)自動(dòng)加入分號(hào)，在有這種需求時(shí)可以將 ; 加到前面(ESLint Standard JS 規(guī)范就用這個(gè)方法避免錯(cuò)誤)。

// 運(yùn)行錯(cuò)誤 (function() { })() (function() { })()   // 正確 ;(function() { })() ;(function() { })()

總結(jié)

有的人認(rèn)為不加分號(hào)可以讓代碼看起來(lái)更干凈和精簡(jiǎn)，而且在大部分情況下并不會(huì)出現(xiàn)錯(cuò)誤，所以很多人在敲代碼時(shí)不會(huì)加分號(hào)。

不過(guò)我更傾向于更嚴(yán)格的規(guī)范，也許是因?yàn)槲沂菑暮蠖宿D(zhuǎn)到前端的，習(xí)慣了。至于到底怎么選，只要搞清楚運(yùn)行上的限制，不管哪種風(fēng)格都是挺不錯(cuò)的，只要你喜歡就好。

“JavaScript代碼加分號(hào)和不加分號(hào)有什么區(qū)別”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！