在閱讀JavaScript代碼時，你是否有過這種感覺：你幾乎不明白代碼的作用？代碼使用了很多 JavaScript 技巧？命名和編碼風格太過隨意？ 這些都是不良編碼習慣的征兆。

?

在閱讀JavaScript代碼時，你是否有過這種感覺

• 你幾乎不明白代碼的作用?
• 代碼使用了很多 JavaScript 技巧?
• 命名和編碼風格太過隨意?

這些都是不良編碼習慣的征兆。

在這篇文章中，我描述了JavaScript中常見的5種不良編碼習慣。重要的是，本文會給出一些可行的建議，如何的擺脫這些習慣。

1.不要使用隱式類型轉換

JavaScript是一種松散類型的語言。 如果使用得當，這是一個好處，因為它給你帶來了靈活性。

大多數運算符+ - * / ==(不包括 ===)在處理不同類型的操作數時會進行隱式轉換。

語句if(condition){...}，while(condition){...}隱式地將條件轉換為布爾值。

下面的示例依賴于類型的隱式轉換，這種有時候會讓人感到很困惑：

console.log("2" + "1"); // => "21" console.log("2" - "1"); // => 1 console.log('' == 0); // => true console.log(true == []); // -> false console.log(true == ![]); // -> false

過度依賴隱式類型轉換是一個壞習慣。 首先，它使你的代碼在邊緣情況下不太穩定。 其次，增加了引入難以重現和修復的bug的機會。

現在咱們實現一個獲取對象屬性的函數。如果屬性不存在，函數返回一個默認值

function getProp(object, propertyName, defaultValue) { if (!object[propertyName]) { return defaultValue; } return object[propertyName]; } const hero = { name: 'Batman', isVillian: false }; console.log(getProp(hero, 'name', 'Unknown')); // => 'Batman'

getProp() 讀取name屬性的值，即'Batman'。

那么試圖訪問isVillian屬性:

console.log(getProp(hero, 'isVillian', true)); // => true

這是一個錯誤。即使 hero 的屬性isVillian為false，函數getProp()也會返回錯誤的true。

這是因為屬性存在的驗證依賴于if(!object [propertyName]){...}隱式轉換的布爾值。

這些錯誤很難發現，要修復該函數，就要明確驗證值的類型：

function getPropFixed(object, propertyName, defaultValue) { if (object[propertyName] === undefined) { return defaultValue; } return object[propertyName]; } const hero = { name: 'Batman', isVillian: false }; console.log(getPropFixed(hero, 'isVillian', true)); // => false

object[propertyName] === undefined確切地驗證屬性是否為undefined。

這里建議避免直接使用undefined。 因此，上述解決方案可以進一步改進：

function getPropFixedBetter(object, propertyName, defaultValue) { if (!(propertyName in object)) { return defaultValue; } return object[propertyName] }

原諒作者建議是:盡可能不要使用隱式類型轉換。相反，請確保變量和函數參數始終具有相同的類型，必要時使用顯式類型轉換。

優秀實踐列表：

• 始終使用嚴格的相等運算符===進行比較
• 不要使用松散等式運算符==
• 加法運算符 operand1 + operand2：兩個操作數應該是數字或字符串
• 算術運算符 - * /%**：兩個操作數都應該是數字
• if(condition){...}，while(condition){...}等語句：condition 必須是一個布爾類型值

你可能會說這種方式需要編寫更多代碼......你是對的! 但是通過明確的方法，可以控制代碼的行為。 此外，顯性提高了可讀性。

2. 不要使用早期的JavaScript技巧

JavaScript的有趣之處在于，它的創建者沒有料到這種語言會如此流行。

基于JavaScript構建的應用程序的復雜性比語言發展的速度還要快。這種情況迫使開發人員使用JavaScript技巧和變通方法，只是為了讓事情正常運行。

一個典型的例子是查看數組是否包含某個元素。 我從來不喜歡使用array.indexOf(item)!== -1來檢查。

ES6 及以后版本的功能要強大得多，可以使用新的語言特性安全地重構許多技巧。

ES6 中可以使用 array.includes(item) 來代替 array.indexOf(item) !== -1

3. 不要污染函數作用域

在ES2015之前，你可能會養成了將所有變量聲明在函數作用域里面。

來看看一個例子：

function someFunc(array) { var index, item, length = array.length; /* * Lots of code */ for (index = 0; index < length; index++) { item = array[index]; // Use `item` } return someResult; }

變量index、item和length 在函數作用域內。但是這些變量會影響函數作用域，因為它們只在for()塊作用域內才被需要。

通過引入具有塊作用域 let和const，應該盡可能地限制變量的生命周期。

function someFunc(array) { /* * Lots of code */ const length = array.length; for (let index = 0; index < length; index++) { const item = array[index]; // Use `item` } return someResult; }

index和 item 變量被限制為for()循環塊作用域。length 被移動到使用地方的附近。

重構后的代碼更容易理解，因為變量不會分散在整個函數作用域內，它們存在于使用地方的附近。

在使用的塊作用域定義變量

if 塊作用域

// 不好 let message; // ... if (notFound) { message = 'Item not found'; // Use `message` } // 好 if (notFound) { const message = 'Item not found'; // Use `message` }

for 塊作用域

// 不好 let item; for (item of array) { // Use `item` } // 好 for (const item of array) { // Use `item` }

4.盡量避免 undefined 和 null

未賦值的變量默認被賦值為undefined。例如

let count; console.log(count); // => undefined const hero = { name: 'Batman' }; console.log(hero.city); // => undefined

count變量已定義，但尚未使用值初始化。 JavaScript隱式賦值給它undefined。

訪問不存在的屬性hero.city時，也會返回undefined。

為什么直接使用undefined是一個不好習慣? 因為與undefined進行比較時，你正在處理未初始化狀態的變量。

變量、對象屬性和數組在使用前必須用值初始化

JS 提供了很多避免與undefined進行比較方式。

判斷屬性是否存在

// 不好 const object = { prop: 'value' }; if (object.nonExistingProp === undefined) { // ... } // 好 const object = { prop: 'value' }; if ('nonExistingProp' in object) { // ... }

對象的默認屬性

? // 不好 function foo(options) { if (object.optionalProp1 === undefined) { object.optionalProp1 = 'Default value 1'; } // ... } // 好 function foo(options) { const defaultProps = { optionalProp1: 'Default value 1' }; options = { ...defaultProps, ...options } }

默認函數參數

// 不好 function foo(param1, param2) { if (param2 === undefined) { param2 = 'Some default value'; } // ... } // 好 function foo(param1, param2 = 'Some default value') { // ... }

null是一個缺失對象的指示符。應該盡量避免從函數返回 null，特別是使用null作為參數調用函數。

一旦null出現在調用堆棧中，就必須在每個可能訪問null的函數中檢查它的存在，這很容易出錯。

? function bar(something) { if (something) { return foo({ value: 'Some value' }); } else { return foo(null); } } function foo(options) { let value = null; if (options !== null) { value = options.value; // ... } return value; }

嘗試編寫不涉及null的代碼。 可替代方法是try /catch機制，默認對象的使用。

5. 不要使用隨意的編碼風格，執行一個標準

有什么比閱讀具有隨機編碼風格的代碼更令人生畏的事情? 你永遠不知道會發生什么!

如果代碼庫包含許多開發人員的不同編碼風格，該怎么辦?，這種就像各色人物涂鴉墻。

整個團隊和應用程序代碼庫都需要相同的編碼風格，它提高了代碼的可讀性。

一些有用的編碼風格的例子：

• Airbnb JS 風格指南
• 谷歌 JS 風格指南

老實說，當我在回家前準備提交時，我可能會忘記設計代碼的樣式。

我自己總說:保持代碼不變，以后再更新它，但是“以后”意味著永遠不會。

這里建議使用 eslint 來規范編碼風格。

安裝eslint

使用最適合自己的編碼風格配置 eslint

設置一個預提交鉤子，在提交之前運行eslint驗證。

總結

編寫高質量和干凈的代碼需要紀律，克服不好的編碼習慣。

JavaScript是一種寬容的語言，具有很大的靈活性。但是你必須注意你所使用的特性。這里建議是避免使用隱式類型轉換，undefined 和 null 。

現在這種語言發展得相當快。找出復雜的代碼，并使用最新 JS 特性來重構。

整個代碼庫的一致編碼風格有益于可讀性。良好的編程技能總是一個雙贏的解決方案。

代碼部署后可能存在的BUG沒法實時知道，事后為了解決這些BUG，花了大量的時間進行log 調試，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

---

閱讀目錄（置頂)(長期更新計算機領域知識）https://blog.csdn.net/weixin_43392489/article/details/102380691

閱讀目錄（置頂)(長期更新計算機領域知識）https://blog.csdn.net/weixin_43392489/article/details/102380882

總結

以上是生活随笔為你收集整理的第十四期：5 个 JS 不良编码习惯，你占几个呢？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。