分號導(dǎo)致的問題

在 JavaScript 中分號是可選的，解釋器會自動對分號進(jìn)行補(bǔ)全。

如果選擇不寫分號，需要注意一些使用上的問題。

不寫分號，相當(dāng)于將插入分號的權(quán)利遞交給解釋器，對于某些情況，可能會出現(xiàn)非預(yù)期的效果：

函數(shù)返回值換行

var fn = function() {
  return
    '我怎么沒被返回呢??'
}

console.log(fn()) // 輸出：undefined

由于 return 已經(jīng)是可以被作為完整的語句，所以解釋器會自動在 return 后插入一個分號，上面這段代碼在被處理后可能是這樣的：

var fn = function() {
  return;
    '我怎么沒被返回呢??';
};

console.log(fn());

所以輸出的是 undefined。

某個變量或者屬性突然被當(dāng)作函數(shù)調(diào)用

var number = 10

var result = 1 + number

(function() {
  console.log(1)
})()

// 報錯 number is not a function

這種情況，解釋器會以為是要調(diào)用 number，但 number 是個數(shù)值，并不是一個函數(shù)，所以報錯了，這段代碼被處理后，可能是這樣的：

var number = 10;

var result = 1 + number(function() {
  console.log(1);
})();

碰到這個問題的大部分場景都是寫自執(zhí)行的匿名函數(shù)，所以通常不寫分號的情況下，要養(yǎng)成在自執(zhí)行匿名函數(shù)前寫一個分號的習(xí)慣：

var number = 10

var result = 1 + number

;(function() {
  console.log(1)
})()

數(shù)據(jù)被當(dāng)作數(shù)組成員或?qū)ο蟪蓡T進(jìn)行訪問

var number = 1

var result = 1 + number

[1, 2, 3].forEach(function(item) {
  result += item
})

// 報錯：Cannot read property 'forEach' of undefined

這個報錯原因和上一個點類似，也是 number 被誤當(dāng)作有成員的對象或者數(shù)組了，上面代碼被處理后可能是這樣的：

var number = 1;

var result = 1 + number[1, 2, 3].forEach(function(item) {
  result += item;
});

顯然 number[3] 是取不到東西的。

其他還有許許多多情況，場景與之都類似，所以在不寫分號的時候一定要注意，條件允許的情況下借助 eslint 來幫助檢查代碼。