閱讀JAVAScript代碼時，你有沒有感覺：
- 你幾乎不明白代碼的作用？
- 代碼使用了很多JavaScript技巧？
- 命名和編碼風(fēng)格相當(dāng)隨機(jī)？
這些是編碼習(xí)慣不良的跡象。
在這篇文章中，我描述了JavaScript中常見的5種不良編碼習(xí)慣。重要的是，我將就如何擺脫這些習(xí)慣提出可行的建議。
1.不要使用隱式類型轉(zhuǎn)換
JavaScript是一種松散類型的語言。如果使用得當(dāng)，這是一個好處，因?yàn)樗o你帶來了靈活性。
使用不同類型的操作數(shù)時，大多數(shù)運(yùn)算符+ - * / ==（但不是===）使用類型的隱式轉(zhuǎn)換。
該聲明if (condition) {...}，while(condition) {...}含蓄地變換的條件為布爾值。
以下示例依賴于類型的隱式轉(zhuǎn)換。我敢打賭你會感到困惑：
過度依賴隱式類型轉(zhuǎn)換是一個壞習(xí)慣。首先，它使您的代碼在邊緣情況下不太穩(wěn)定。其次，您增加了引入難以重現(xiàn)和修復(fù)的錯誤的機(jī)會。
讓我們實(shí)現(xiàn)一個獲取對象屬性的函數(shù)。如果該屬性不存在，則該函數(shù)返回默認(rèn)值：
getProp()讀取name屬性的值，即'Batman'。
嘗試訪問isVillian屬性怎么樣：
console.log(getProp(hero, 'isVillian', true)); // => true
那是一個錯誤。即使hero屬性isVillian是false，函數(shù)getProp()返回錯誤true。
這是因?yàn)閷傩源嬖诘尿?yàn)證依賴于隱式轉(zhuǎn)換為布爾值if (!object[propertyName]) {...}。
這些錯誤很難發(fā)現(xiàn)。要修復(fù)該函數(shù)，請明確驗(yàn)證值的類型：
object[propertyName] === undefined驗(yàn)證屬性訪問者是否評估到的確切內(nèi)容undefined。這里建議避免直接使用 undefined。因此，上述解決方案可以進(jìn)一步改進(jìn)：
盡可能不要使用隱式類型轉(zhuǎn)換。相反，請確保變量和函數(shù)參數(shù)始終具有相同的類型，必要時使用顯式類型轉(zhuǎn)換。
最佳實(shí)踐列表：
- 始終使用嚴(yán)格相等運(yùn)算符===來執(zhí)行比較
- 不要使用松散的相等運(yùn)算符 ==
- 加法運(yùn)算符operand1 + operand2：兩個操作數(shù)應(yīng)該是數(shù)字或兩個字符串
- 算術(shù)運(yùn)算符- * / % **：兩個操作數(shù)都應(yīng)該是數(shù)字
- if (condition) {...}，while (condition) {...}等等語句：condition應(yīng)該是一個布爾值
您可能會說這種方法需要編寫更多代碼......您說得對！但是通過明確的方法，您可以控制代碼的行為。此外，顯性提高了可讀性。
2.不要使用舊的JavaScript技巧
JavaScript的有趣之處在于，它的創(chuàng)建者沒有料到這種語言會如此流行。
基于JavaScript構(gòu)建的應(yīng)用程序的復(fù)雜性比語言發(fā)展的速度還要快。這種情況迫使開發(fā)人員使用JavaScript技巧和變通方法，只是為了讓事情正常運(yùn)行。
一個典型的例子是查看數(shù)組是否包含某個元素。我從來不喜歡使用 array.indexOf（item）！==-1來檢查。
ES6 及以后版本的功能要強(qiáng)大得多，可以使用新的語言特性安全地重構(gòu)許多技巧。
ES6 中可以使用 array.includes(item) 來代替 array.indexOf(item)!==-1
3. 不要污染函數(shù)作用域
在ES2015之前，你可能會養(yǎng)成了將所有變量聲明在函數(shù)作用域里面。
來看看一個例子：
變量 index、item和 length 在函數(shù)作用域內(nèi)。但是這些變量會影響函數(shù)作用域，因?yàn)樗鼈冎辉?for()塊作用域內(nèi)才被需要。
通過引入具有塊作用域 let和 const，應(yīng)該盡可能地限制變量的生命周期。
index和 item 變量被限制為 for()循環(huán)塊作用域。length 被移動到使用地方的附近。
重構(gòu)后的代碼更容易理解，因?yàn)樽兞坎粫稚⒃谡麄€函數(shù)作用域內(nèi)，它們存在于使用地方的附近。
在使用的塊作用域定義變量
if 塊作用域
for 塊作用域
4.盡量避免 undefined 和 null
未賦值的變量默認(rèn)被賦值為 undefined。例如
count變量已定義，但尚未使用值初始化。JavaScript隱式賦值給它 undefined。
訪問不存在的屬性 hero.city時，也會返回 undefined。
為什么直接使用 undefined是一個不好習(xí)慣？因?yàn)榕c undefined進(jìn)行比較時，你正在處理未初始化狀態(tài)的變量。
變量、對象屬性和數(shù)組在使用前必須用值初始化
JS 提供了很多避免與 undefined進(jìn)行比較方式。
判斷屬性是否存在
對象的默認(rèn)屬性
默認(rèn)函數(shù)參數(shù)
null是一個缺失對象的指示符。應(yīng)該盡量避免從函數(shù)返回 null，特別是使用 null作為參數(shù)調(diào)用函數(shù)。
一旦 null出現(xiàn)在調(diào)用堆棧中，就必須在每個可能訪問 null的函數(shù)中檢查它的存在，這很容易出錯。
嘗試編寫不涉及 null的代碼。可替代方法是 try/catch機(jī)制，默認(rèn)對象的使用。
5. 不要使用隨意的編碼風(fēng)格，執(zhí)行一個標(biāo)準(zhǔn)
有什么比閱讀具有隨機(jī)編碼風(fēng)格的代碼更令人生畏的事情？你永遠(yuǎn)不知道會發(fā)生什么！
如果代碼庫包含許多開發(fā)人員的不同編碼風(fēng)格，該怎么辦?，這種就像各色人物涂鴉墻。
整個團(tuán)隊(duì)和應(yīng)用程序代碼庫都需要相同的編碼風(fēng)格，它提高了代碼的可讀性。
一些有用的編碼風(fēng)格的例子：
- Airbnb JS 風(fēng)格指南
- 谷歌 JS 風(fēng)格指南
老實(shí)說，當(dāng)我在回家前準(zhǔn)備提交時，我可能會忘記設(shè)計(jì)代碼的樣式。
我自己總說:保持代碼不變，以后再更新它，但是“以后”意味著永遠(yuǎn)不會。
這里建議使用 eslint 來規(guī)范編碼風(fēng)格。
- 安裝eslint
- 使用最適合自己的編碼風(fēng)格配置 eslint
- 設(shè)置一個預(yù)提交鉤子，在提交之前運(yùn)行eslint驗(yàn)證。
總結(jié)
編寫高質(zhì)量和干凈的代碼需要紀(jì)律，克服不好的編碼習(xí)慣。
JavaScript是一種寬容的語言，具有很大的靈活性。但是你必須注意你所使用的特性。這里建議是避免使用隱式類型轉(zhuǎn)換， undefined 和 null 。
現(xiàn)在這種語言發(fā)展得相當(dāng)快。找出復(fù)雜的代碼，并使用最新 JS 特性來重構(gòu)。
整個代碼庫的一致編碼風(fēng)格有益于可讀性。良好的編程技能總是一個雙贏的解決方案。
