分號(hào)導(dǎo)致的問(wèn)題

在 JavaScript 中分號(hào)是可選的，解釋器會(huì)自動(dòng)對(duì)分號(hào)進(jìn)行補(bǔ)全。

如果選擇不寫分號(hào)，需要注意一些使用上的問(wèn)題。

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

函數(shù)返回值換行

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

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

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

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

console.log(fn());

所以輸出的是 undefined。

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

var number = 10

var result = 1 + number

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

// 報(bào)錯(cuò) number is not a function

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

var number = 10;

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

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

var number = 10

var result = 1 + number

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

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

var number = 1

var result = 1 + number

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

// 報(bào)錯(cuò)：Cannot read property 'forEach' of undefined

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

var number = 1;

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

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

其他還有許許多多情況，場(chǎng)景與之都類似，所以在不寫分號(hào)的時(shí)候一定要注意，條件允許的情況下借助 eslint 來(lái)幫助檢查代碼。