摘要：JavaScript語言從設(shè)計(jì)之初就是考慮帶分號(hào)的，使用不帶分號(hào)的編碼規(guī)則就要小心點(diǎn)啦。

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供岳陽縣網(wǎng)站建設(shè)、岳陽縣做網(wǎng)站、岳陽縣網(wǎng)站設(shè)計(jì)、岳陽縣網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、岳陽縣企業(yè)網(wǎng)站模板建站服務(wù)，十余年岳陽縣做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

背景

最近在項(xiàng)目中開始使用新的編碼規(guī)范，一開始ESLint報(bào)一大堆錯(cuò)誤，改得我想砸鍵盤，花了好些時(shí)間才適應(yīng)，下面列出一些代表性的規(guī)則：

• 只能使用單引號(hào)
• 函數(shù)定義的圓括號(hào)和左大括號(hào)之間一定要有空格: function(args) { .. }
• import語句在大括號(hào)之后一定要有空格: import { fa, fb } from moduleC
• 不用分號(hào)?。。?/li>

起因

早上在實(shí)現(xiàn)一個(gè)功能的時(shí)候，寫了一個(gè)map函數(shù)來復(fù)用部分代碼。程序運(yùn)行起來后，沒有執(zhí)行結(jié)果，而且沒有報(bào)錯(cuò)。通過console.log打印數(shù)據(jù)發(fā)現(xiàn)，整個(gè)程序執(zhí)行到map前面就再也不往下走了，很奇怪。因?yàn)闆]有報(bào)錯(cuò)信息，無法推測具體原因。于是，我將其抽象成非常簡單的代碼來排查。如下所示：

console.log("hello, fundebug")
[1, 2, 3].map(i=>console.log(i))

然后執(zhí)行看看結(jié)果如何：

在項(xiàng)目中沒有報(bào)錯(cuò)，單獨(dú)將這段代碼拿出來在瀏覽器控制臺(tái)下執(zhí)行卻報(bào)錯(cuò)了！
這么簡單的代碼為什么會(huì)出錯(cuò)呢？第一反應(yīng)就是JS引擎將代碼生成語法樹的時(shí)候，可能解析不正確。于是，我在第一行末尾加分號(hào)測試。

console.log("hello, fundebug");
[1, 2, 3].map(i=>console.log(i))

程序正確執(zhí)行了：

這讓我更加犯難，如果不加分號(hào)會(huì)導(dǎo)致程序出錯(cuò)，那么為什么還會(huì)推崇這樣的編碼規(guī)范呢？
在網(wǎng)絡(luò)上搜索JavaScript關(guān)于分號(hào)的BUG，發(fā)現(xiàn)有非常多關(guān)于要不要使用分號(hào)的討論。

大宗師Douglas Crockford表示要正確使用分號(hào)

引用minhan在扯不完的 JS 分號(hào)問題文中的論述：

JSON、JSLint、JSMin和ADSafe 的創(chuàng)造者、ECMA JavaScript 2.0 標(biāo)準(zhǔn)化委員會(huì)委員、被JavaScript之父Brendan Eich稱為JavaScript的大宗師、名著《JavaScript: The Good Parts》(中文版《JavaScript語言精粹》)的作者Douglas Crockford直接懟之： 這代碼真尼瑪?shù)寞偪裆礨，我是不會(huì)為了這傻X的案例而去降低JSMin的級(jí)數(shù); TC39正在考慮將『!』號(hào)作為中綴運(yùn)算符使用，這個(gè)代碼不久將來就運(yùn)行不了。趕緊修復(fù)吧，學(xué)學(xué)怎么正確地使用分號(hào)?！?』號(hào)并不語句的分隔號(hào)，『;』才是。

JSMin處理如下代碼后無法正確執(zhí)行：

clearMenus()
!isActive && $parent.toggleClass('open')

自動(dòng)分號(hào)插入機(jī)制

JavaScript有著自動(dòng)分號(hào)插入的機(jī)制(Automatic Semicolon Insertion)，簡稱ASI。這是一個(gè)輔助性的功能，然后有一些情況要注意：

如果你這樣寫代碼：

return 
a + b

那么自動(dòng)分號(hào)插入后會(huì)這樣：

return;
a + b;

更可能導(dǎo)致隱含BUG的狀況是：

a = b + c
(d + e).print()

他不會(huì)自動(dòng)插入分號(hào)，因?yàn)榈诙幸焕ㄌ?hào)開始，會(huì)被誤認(rèn)為是函數(shù)。

a = b + c(d + e).print();

所以，我剛剛的的代碼在自動(dòng)插入分號(hào)后，應(yīng)該是這樣：

console.log("hello fundebug")[1,2,3].map(i=>console.log(i))

那么這樣看來，用分號(hào)才是最安全的做法咯！

如果你不想用分號(hào)，又怕出問題，v2ex上有位童鞋給出了一個(gè)速記方案：

如果你寫 JS 代碼不喜歡帶分號(hào)，而又搞不清什么時(shí)候必須加分號(hào)，可以這么做：在以 "("、"[" 、"/"、"+"、"-" 開頭的語句前面都加上一個(gè)分號(hào)。

我最終的解法是先聲明一個(gè)變量來指向這個(gè)數(shù)組，這樣就可以避免以[開頭，又不使用分號(hào)：

let indexArray = [1, 2, 3]
indexArray.map(i=>console.log(i))

關(guān)于Fundebug

Fundebug專注于JavaScript、微信小程序、微信小游戲、支付寶小程序、React Native、Node.js和Java實(shí)時(shí)BUG監(jiān)控。 自從2016年雙十一正式上線，F(xiàn)undebug累計(jì)處理了7億+錯(cuò)誤事件，得到了Google、360、金山軟件、百姓網(wǎng)等眾多知名用戶的認(rèn)可。歡迎免費(fèi)試用！

版權(quán)聲明

轉(zhuǎn)載時(shí)請(qǐng)注明作者 Fundebug以及本文地址：
https://blog.fundebug.com/ 2018/09/18/js-semicolon-bug/