了解JS代碼中加分號(hào)和不加分號(hào)有什么區(qū)別?這個(gè)問(wèn)題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見(jiàn)到的。希望通過(guò)這個(gè)問(wèn)題能讓你收獲頗深。下面是小編給大家?guī)?lái)的參考內(nèi)容,讓我們一起來(lái)看看吧!
在綿竹等地區(qū),都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局,加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力,以專(zhuān)注、極致的服務(wù)理念,為客戶(hù)提供做網(wǎng)站、成都網(wǎng)站設(shè)計(jì) 網(wǎng)站設(shè)計(jì)制作按需網(wǎng)站制作,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站設(shè)計(jì),全網(wǎng)營(yíng)銷(xiāo)推廣,成都外貿(mào)網(wǎng)站建設(shè)公司,綿竹網(wǎng)站建設(shè)費(fèi)用合理。
這個(gè)問(wèn)題在很多文章中都討論過(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是 “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
再來(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
本來(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)題的方式如下:
下面時(shí)各種不會(huì)自動(dòng)加入分號(hào)的規(guī)則:
(
、[
、/
字符開(kāi)始的,這類(lè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)
+
,-
,*
,%
開(kāi)始,這類(lèi)情況大多會(huì)影響運(yùn)算結(jié)果,所以應(yīng)該合并為一行。var a = 2 var b = a +a
,
或 .
開(kāi)始,這種用法經(jīng)常會(huì)出現(xiàn),主要是為了避免代碼過(guò)長(zhǎng)而加入的分隔,這種情況并不會(huì)影響運(yùn)行,如果善用的話(huà)會(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() { })()
感謝各位的閱讀!看完上述內(nèi)容,你們對(duì)JS代碼中加分號(hào)和不加分號(hào)有什么區(qū)別大概了解了嗎?希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
分享文章:JS代碼中加分號(hào)和不加分號(hào)有什么區(qū)別
文章起源:http://muchs.cn/article4/jpdhie.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供外貿(mào)網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、企業(yè)網(wǎng)站制作、網(wǎng)站維護(hù)、App設(shè)計(jì)、品牌網(wǎng)站設(shè)計(jì)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話(huà):028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)