站長資訊網
        最全最豐富的資訊網站

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

        javascript欄目介紹代碼加不加分號的區別是什么

        介紹 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)
        1. 新行以 +,-,*, 開始,這類情況大多會影響運算結果,所以應該合并為一行。
        var a = 2 var b = a +a
        1. 新行以 ,. 開始,這種用法經常會出現,主要是為了避免代碼過長而加入的分隔,這種情況并不會影響運行,如果善用的話會使代碼更容易閱讀。
        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() { })()

        總結

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

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

        贊(0)
        分享到: 更多 (0)
        網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
        主站蜘蛛池模板: 国产精品免费大片| 午夜精品免费在线观看| 国产欧美久久久精品| 无码精品久久一区二区三区| 柠檬福利精品视频导航| 国产午夜精品无码| 亚洲精品尤物yw在线影院| 国产成人精品午夜福麻豆| 国产久热精品无码激情| 中文字幕精品无码一区二区三区 | 久久久久无码精品| 国产精品久久久久天天影视| 亚洲精品国产字幕久久不卡| 欧美日韩国产精品| 九色精品视频在线观看| 国产精品hd免费观看| 免费精品精品国产欧美在线| 亚洲精品国偷自产在线| 午夜在线视频91精品| 好湿好大硬得深一点动态图91精品福利一区二区 | 国产精品激情综合久久| 精品国产综合成人亚洲区| 99精品热这里只有精品| 精品国产第一国产综合精品| 少妇人妻偷人精品无码视频| 亚欧乱色国产精品免费视频| 欧美成人精品高清在线播放| 国内精品视频在线观看| 精品国产一区二区三区AV性色| 国产精品免费在线播放| 国产免费久久精品丫丫| 国产欧美一区二区精品性色99 | 国产精品视频久久| 久久精品国产91久久综合麻豆自制| 国产成人精品电影在线观看| 精品国产一区AV天美传媒| 国产乱人伦偷精品视频免下载| 囯产精品一品二区三区| 久久久精品一区二区三区| 99久re热视频这里只有精品6| 国产精品综合久成人|