10個常見的JavaScript BUG

時間＼2017-12-18

就算最牛的JavaScript開發者也會犯錯。有時候導致程式的執行結果和預期不一樣，

有時候根本無法運行。這裡我總結了10個常見的錯誤，我相信不管是初級還是資深開發者都可能遇到。

1.相等混淆

x是否和y相等？x是否為真？在JavaScript中，如何正確地做相等判斷很重要，但似乎很多人搞不清楚。簡單概括一下，主要是下面三種情況：條件判斷(if, &&, etc.)，相等操作符(==)，和嚴格相等操作符(===)。

甚至，有的時候會不小心把賦值(=)當做相等操作符使用，千萬不要搞錯了！

避免使用賦值(=)

賦值(=)將右邊的運算式賦值給左邊的變數，例如：

var a = 3;

該語句聲明了一個新的變數a，值為3。

運算式可以是程式中的任何東西，想像把它類比為語言中的名詞，操作符(+,-,*,/)類比為動詞。初學者一個常見的錯誤就是誤用賦值(=)作為相等判斷符。

if (a=4){...}

代碼並不會像預期的執行那樣。

慎用相等操作符

相等操作符(==)和他的雙胞胎不等操作符(!=)非常好用，但也很危險，儘量少用。接下來介紹為什麼：

0 == '0'

在相等符號下，0和0是相等的！因為解譯器發現左右類型不一致，首先做了隱式類型轉換。這會導致各種各樣的問題，然後一出錯還很難找到問題原因。

如果你真的想判斷一個字串包含的數位和某個數位是否真的相同，建議你這麼做：

parseInt(0) === parseInt('0')

所以，建議使用嚴格相等/不等操作符。

0 === '0'

會返回false。

2.丟失的大括弧

當程式變得複雜，特別是如果你使用JavaScript物件來存儲資料的話，大括弧會越來越多。

下面是一段代碼，但是少了一個大括弧：

{“status”: “OK”,“results”: [{ “id”: 12, “title”: “Coding JavaScript For Dummies”, “author”: “Chris Minnick and Eva Holland”, “publication_date”: ““, “summary_short”: ““, “link”: { “type”: “review”, “url”: ““, “link_text”: “Read the New York Times Reviewof Coding JavaScript For Dummies” }, “awards”: [{ “type”: “Nobel Prize”, “url”: ““, }]}

你能看出來哪裡少了東西嗎？當不確定的時候，一個好的編輯器將會非常有用。Sublime Text有一個很不錯的功能，當你把游標放在某個大括弧的時候，和它匹配的大括弧會高亮出來。

3.不匹配的引號

在定義字串的時候，

你可以自由使用單引號或則雙引號。但是，如果一個字串單引號開始，雙引號結束就不行了。而且你需要注意本身字串中的單引號或則雙引號。

var movieName = “Popeye’; // error!var welcomeMessage = ‘Thank you, ‘ + firstName + ‘, let’s learn JavaScript!’ // error!

總的來說，個人認為是一個非常靈活且好用的功能，但是一定要小心！

缺少必要的圓括號

該錯誤往往在條件陳述式出錯處，特別是有多個條件的時候。

if (x > y) && (y < 1000) {...}

如果你注意看，會發現少了括弧，正確的應該是這樣：

if ((x > y) && (y < 1000)) {...}

4.缺少分號

JavaScript中的語句都應該分號結束。

但如果這些語句各自占一行，那麼你不寫分號也沒關係。不過不建議使用，因為會有潛在問題。如果你使用自動代碼美化工具可能錯誤的將不同行的代碼合併而出錯。

最好的策略是都要加分號。

5.大寫錯誤

JavaScript對大小寫敏感，你需要對變數和函數的命名小心，不能把大小寫搞錯了。比如，Document物件的getElementById函數經常被寫錯為getElementByID。

6.在載入前引用

JavaScript的代碼通常是按循序執行，如果你引用了後面才創建的元素將會報錯。

This div is your div.

在腳本執行的時候，流覽器還不知道myDiv是什麼。

避免這個問題的方法有很多：

將代碼放到最後，也就是後面

將代碼放到函數中，並且和body的onload綁定。

This div is your div

7.濫用保留字做變數名

一個很難被追蹤的問題就是使用保留字做變數名。JavaScript中有超過60個保留字。當然，你不可能都把它們記住來避免使用。最好的方法就是使用更加具有描述性的字元來命名變數。

舉個例子，name是一個保留字。如果你喜歡用name，那麼最好細化，比如firstName，lastName，dogName和nameOfTheWind。

8.作用域問題

JavaScript中有函數作用域和全域作用域。如果你沒有使用var關鍵字來聲明，那麼它是全域的。為了確保不同作用域的安全隔離，建議使用var。譯者補充：建議使用let，更加安全，可參考本文：ES6之”let”能替代”var”嗎?。

9.函式呼叫缺少參數

在JavaScript中，在函式呼叫的時候少了幾個參數，有時候並不會出錯，但可能達不到預期的執行結果。所以，確保你傳入了足夠的函數參數。

10.從0開始

永遠不要忘記陣列是從0開始。

var myArray = new Array();myArray[10] = “List of 10 Common Mistakes”;myArray.length; // 輸出11!如果你引用了後面才創建的元素將會報錯。