腦圖學習 JavaScript 之犀牛書【二】詞法結構

介紹

犀牛書第二章主要敘述了一下 JavaScript 的 詞法結構，其實就是 語法結構。

主要須要注意下 換行、分號的自動填補規則，知道了引擎的解析規則後就能夠避免由於省略了必要的分號而致使奇怪的 bug。

自我提問

• 什麼狀況下必需要填補分號？

  var a = 1, b = 2, c = 3
  a = b + c
  (b + c).toString()
  複製代碼

  function foo() {
      return
      123
  }
  console.log(foo());
  複製代碼

腦圖

關鍵知識點

字符集

JavaScript 中使用的是 Unicode 字符集，而且 區分大小寫。

var abc = 1;
var ABC = 2;
// 1 2
console.log(abc, ABC);
複製代碼

換行符

換行符有時會被忽略，可能會致使沒必要要的 bug，具體見下方省略分號的意外bug。

分號自動填補規則

分號自動填補的規則是：在缺乏分號會報錯（語法上）時自動在換行初填補分號。

var // 銜接下一行不報錯 ===> var a
a // 銜接下一行報錯，自動填補分號 ===> var a;
a // 銜接下一行不報錯 a = 
= // 銜接下一行不報錯 a = 1
1 // 銜接下一行報錯，自動填補分號 ===> a = 1;
console.log // 銜接下一行不報錯 ===> console.log(a)
(a)
複製代碼

上述代碼等價於

var a; a = 1; console.log(a);
複製代碼

自動填補規則的特例

自動填補規則有 兩個例外狀況：

1. 遇到 return、break、continue 時後面的換行會 自動填補分號
2. 遇到 ++ 或 -- 運算符時，會 將運算符做爲前綴

function foo() {
    return // 遇到 return 直接補全分號
    123
}
// undefined
console.log(foo());
複製代碼

上述代碼等價於

function foo() {
    return;
    123
}
console.log(foo());
複製代碼

var a = 1, b = 2;
a // 下面是 ++ 運算符，放棄銜接，填補分號 ===> a;
++ // 銜接 ===> ++b
b // 銜接失敗，填補分號 ===> ++b;
// 1 3
console.log(a, b);
複製代碼

上述代碼等價於

var a = 1, b = 2;
a;
++b;
console.log(a, b);
複製代碼

var a = 1, b = 2;
a
++ // 這裏會直接報錯
console.log(a, b);
複製代碼

省略分號的意外bug

某些狀況下省略分號會致使意料以外的 bug。

var a = 1, b = 2, c = 3;
a = b + c // 這裏會將嘗試銜接下一句 ===> a = b + c(b+c).toString()，語法解析上沒有問題，可是卻不是編寫者的本意，從而致使了意料以外的結果
(b + c).toString()
複製代碼

分號風格抉擇

是否須要在全部地方都填補分號是個風格問題 沒有孰優孰劣，這個問題通常 靠團隊代碼風格的統一，或者 一些代碼的格式化工具 就能夠 很好的解決（好比 prettier）。

不過實質上而言加上分號比不加分號在編譯性能上會有所優點，由於不加分號會讓 JavaScript 一直猜想何時須要填補分號，可是在如今都用 babel 等預編譯代碼的狀況下並沒什麼區別。

系列文章目錄

1. 腦圖學習 JavaScript 之犀牛書【一】
2. 腦圖學習 JavaScript 之犀牛書【二】詞法結構
3. 腦圖學習 JavaScript 之犀牛書【三 · 一】數據類型
4. 腦圖學習 JavaScript 之犀牛書【三 · 二】類型轉換、變量
5. 腦圖學習 JavaScript 之犀牛書【四 · 一】運算符、類型轉換
6. 腦圖學習 JavaScript 之犀牛書【四 · 二】表達式、計算順序