成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

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

開發 前端
這個問題在很多文章找那個都討論過,在 ESlint 規范中也因為加不加分號而分為兩大陣營,到于加不加分號,關鍵是需要了解分號對于 JavaScript 的影響,開始之前可以先看看這道面試題:

 這個問題在很多文章找那個都討論過,在 ESlint 規范中也因為加不加分號而分為兩大陣營,到于加不加分號,關鍵是需要了解分號對于 JavaScript 的影響,開始之前可以先看看這道面試題:

[[352189]]

請問這段代碼是否能夠正常運行?

 

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

如果運行這段代碼,會出現下面的錯誤:

 

  1. Uncaught TypeError: 1 is not a function 

什么鬼!1 is not a function ?我們沒有打算運行數字 1,為什么說數字 1 不是函數,這種錯誤是很難找到原因的,經常會在出問題的代碼行上打轉。這個錯誤必然是上嗎的代碼在運行時被看作是同一行,其概念如下:

 

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

因此立即函數的 () 被附加在 1 上,這是一個調用函數的語法,所以會產生 1 is not a function 的錯誤,想要避免這個錯誤就需要使用分號:

  1. var a = 1 // 隨便把分號放在哪里,只要能隔開就行 
  2. ;(function() { 
  3.   console.log(2) 
  4. })() 

ASI 自動加入分號

ASI是 “Automatic Semicolon Insertion” 的縮寫,在運行時會往有些折行的代碼中自動插入分號,這個機制可以使部分代碼在沒有加入分號時也能正常運行,比如下面的例子:

 

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

由于代碼中的 ++ 屬于一元表達式,它只能在表達式的左邊或右邊放置變量,如果沒有 ASI 的機制,代碼會被轉換為 var b = 1 ++ b 這樣的錯誤語句。不過好在有 ASI,在實際運行時會自動被加入分號,也就不會出現上面的錯誤。

 

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

return 與分號的關系

再來看一個例子,下面的代碼在 return 的后面空一行后再寫要返回的值,那么問運行結果是什么呢?

 

  1. function fn() { 
  2.   return  
  3.   '小明' 
  4. console.log(fn()) 

這段程序代碼因為 ASI 的修正,return 的后面會被加上一個分號,所以 return 與預期返回的值被分開了,結果 return 的內容為空值,最終的結果也只能是 undefined 。

 

  1. function fn() { 
  2.   return
  3.   '小明'
  4. console.log(fn()); // undefined 

到底應該怎樣處理分號

本來 ASI 是出于一片好心,用來修正沒有加入分號的代碼片段,但偏偏在有的地方并沒有發揮它的作用(例如本文一開始所介紹的立即函數),導致代碼出現了錯誤;甚至有些代碼不會出錯,但會使你的代碼執行結果和預期相差萬里。

解決 ASI 問題的方式如下:

  • 無論如何都要加上分號,完全由自己決定代碼的分割
  • 牢記不會自動加入分號的規則,當不會自動插入分號時,則手動加入

不會被自動加入分號的規則

下面時各種不會自動加入分號的規則:

1.新行的代碼是從 (、[、/ 字符開始的,這類情況一般會直接出現 Uncaught TypeError 從而導致代碼無法運行。

 

  1. var a = 1 
  2. var b = a 
  3. (a + b).toString() 
  4.  
  5. var a = 1 
  6. [1,2,3].forEach(bar) 
  7.   
  8. (function() { })() 
  9. (function() { })() 
  10.   
  11. var a = 1 
  12. var b = a 
  13. /test/.test(b) 

2.行以 +,-,*,% 開始,這類情況大多會影響運算結果,所以應該合并為一行。

 

  1. var a = 2 
  2. var b = a 
  3. +a 

3.新行以 , 或 . 開始,這種用法經常會出現,主要是為了避免代碼過長而加入的分隔,這種情況并不會影響運行,如果善用的話會使代碼更容易閱讀。

 

  1. var a = 2 
  2. var b = a 
  3.   .toString() 
  4. console.log(typeof b) 
  5.   
  6. var a = 1 
  7. ,b = 2 // b 同樣會被 var 聲明 

如果遇到需要加入分號的情況,除了可以在語句的末尾加入分號外,也可以把分號加在“不會自動加入分號”的最前方,例如 () 本身不會自動加入分號,在有這種需求時可以將 ; 加到前面(ESLint Standard JS 規范就用這個方法避免錯誤)。

 

  1. // 運行錯誤 
  2. (function() { })() 
  3. (function() { })() 
  4.   
  5. // 正確 
  6. ;(function() { })() 
  7. ;(function() { })() 

總結

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

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

責任編輯:華軒 來源: 前端先鋒
相關推薦

2020-03-23 11:28:56

PythonJavaScript技術

2020-08-02 23:20:36

JavaScriptmap()forEach()

2020-09-04 06:27:22

編碼命令式聲明式代碼

2024-05-06 10:55:38

2020-12-22 13:46:48

APISKD

2011-08-08 14:09:55

dhcpbootp

2021-05-16 14:26:08

RPAIPACIO

2020-09-25 08:19:51

SecOps vs D

2024-05-27 00:40:00

2021-12-17 14:40:02

while(1)for(;;)語言

2024-09-09 13:10:14

2022-02-27 15:33:22

安全CASBSASE

2024-03-05 18:59:59

前端開發localhost

2022-08-02 08:23:37

SessionCookies

2022-09-13 10:23:52

MLOpsDevOps開發

2018-07-13 17:05:22

SQLMySQL數據庫

2023-10-13 15:48:17

OT系統

2020-11-09 14:07:53

PyQtQt編程

2020-03-09 20:56:19

LoRaLoRaWAN無線技術

2022-09-07 18:32:57

并發編程線程
點贊
收藏

51CTO技術棧公眾號

主站蜘蛛池模板: 一区视频在线播放 | 亚洲精品久久久久中文字幕欢迎你 | 草草草久久久 | 久久久国产一区二区三区四区小说 | 中文字幕国产 | 三级av在线 | 天天操天天射综合 | www.日韩免费| 香蕉久久a毛片 | 欧美99久久精品乱码影视 | 一级电影免费看 | 国产9久| 二区视频| 无码一区二区三区视频 | 日本中文字幕一区 | 久久久久久亚洲 | 免费在线成人 | 国产精品99一区二区 | 免费在线观看一区二区 | 国产成人区 | 精品国产青草久久久久96 | 日韩精品1区2区 | 美国一级黄色片 | 国产探花在线精品一区二区 | 午夜视频在线观看网址 | 精品美女久久久久久免费 | 亚洲精品在线看 | 国产精品国产三级国产aⅴ无密码 | 日日干夜夜操 | 中文字幕国产高清 | 美女在线视频一区二区三区 | 在线免费观看欧美 | 国产一区二区视频免费在线观看 | 天堂素人约啪 | 久久精品这里精品 | 国产精品一区二区免费看 | 日本久久网站 | 国产精品国产a级 | 日韩中文字幕在线观看视频 | 日韩a视频| 国产一区二区视频在线观看 |