10個在JavaScript開發(fā)中常遇到的BUG
就算最牛的JavaScript開發(fā)者也會犯錯。有時候?qū)е鲁绦虻膱?zhí)行結(jié)果和預(yù)期不一樣，有時候根本無法運行。這里我總結(jié)了10個常見的錯誤，我相信不管是初級還是資深開發(fā)者都可能遇到。
相等混淆
x是否和y相等？x是否為真？在JavaScript中，如何正確地做相等判斷很重要，但似乎很多人搞不清楚。簡單概括一下，主要是下面三種情況：條件判斷(if, &&, etc.)，相等操作符(==)，和嚴格相等操作符(===)。
甚至，有的時候會不小心把賦值(=)當(dāng)做相等操作符使用，千萬不要搞錯了！
避免使用賦值(=)
賦值(=)將右邊的表達式賦值給左邊的變量，例如：
var a = 3;
該語句聲明了一個新的變量a，值為3。
表達式可以是程序中的任何東西，想象把它類比為語言中的名詞，操作符(+,-,*,/)類比為動詞。初學(xué)者一個常見的錯誤就是誤用賦值(=)作為相等判斷符。
if (a=4){...}
代碼并不會像預(yù)期的執(zhí)行那樣。
慎用相等操作符
相等操作符(==)和他的雙胞胎不等操作符(!=)非常好用，但也很危險，盡量少用。接下來介紹為什么：
0 == '0'
在相等符號下，0和0是相等的！因為解釋器發(fā)現(xiàn)左右類型不一致，首先做了隱式類型轉(zhuǎn)換。這會導(dǎo)致各種各樣的問題，然后一出錯還很難找到問題原因。
如果你真的想判斷一個字符串包含的數(shù)字和某個數(shù)字是否真的相同，建議你這么做：
parseInt(0) === parseInt('0')
所以，建議使用嚴格相等/不等操作符。
0 === '0'
會返回false。
丟失的大括號
當(dāng)程序變得復(fù)雜，特別是如果你使用JavaScript對象來存儲數(shù)據(jù)的話，大括號會越來越多。下面是一段代碼，但是少了一個大括號：
{
“status”: “OK”,
“results”: [{
“id”: 12,
“title”: “Coding JavaScript For Dummies”,
“author”: “Chris Minnick and Eva Holland”,
“publication_date”: ““,
“summary_short”: ““,
“l(fā)ink”: {
“type”: “review”,
“url”: ““,
“l(fā)ink_text”: “Read the New York Times Review
of Coding JavaScript For Dummies”
},
“awards”: [{
“type”: “Nobel Prize”,
“url”: ““,
}]
}
你能看出來哪里少了東西嗎？當(dāng)不確定的時候，一個好的編輯器將會非常有用。Sublime Text有一個很不錯的功能，當(dāng)你把光標放在某個大括號的時候，和它匹配的大括號會高亮出來。
不匹配的引號
在定義字符串的時候，你可以自由使用單引號或則雙引號。但是，如果一個字符串單引號開始，雙引號結(jié)束就不行了。而且你需要注意本身字符串中的單引號或則雙引號。
var movieName = “Popeye'; // error! var welcomeMessage = ‘Thank you, ‘ + firstName + ‘, let's learn JavaScript!' // error!
總的來說，個人認為是一個非常靈活且好用的功能，但是一定要小心！
缺少必要的圓括號
該錯誤往往在條件語句出錯處，特別是有多個條件的時候。
if (x > y) && (y < 1000) {
...
}
如果你注意看，會發(fā)現(xiàn)少了括號，正確的應(yīng)該是這樣：
if ((x > y) && (y < 1000)) {
...
}
缺少分號
JavaScript中的語句都應(yīng)該分號結(jié)束。但如果這些語句各自占一行，那么你不寫分號也沒關(guān)系。不過不建議使用，因為會有潛在問題。如果你使用自動代碼美化工具可能錯誤的將不同行的代碼合并而出錯。
最好的策略是都要加分號。
大寫錯誤
JavaScript對大小寫敏感，你需要對變量和函數(shù)的命名小心，不能把大小寫搞錯了。比如，Document對象的getElementById函數(shù)經(jīng)常被寫錯為getElementByID。
在加載前引用
JavaScript的代碼通常是按順序執(zhí)行，如果你引用了后面才創(chuàng)建的元素將會報錯。
<html> <head> <script> document.getElementById(“myDiv”).innerHTML = “This div is my div”; </script> </head> <body> <div id = “myDiv”>This div is your div.</div> </body> </html>
在腳本執(zhí)行的時候，瀏覽器還不知道m(xù)yDiv是什么。
避免這個問題的方法有很多：
將代碼放到最后，也就是</body>后面
將代碼放到函數(shù)中，并且和body的onload綁定。
<html>
<head>
<script>
function nameMyDiv() {
document.getElementById(“myDiv”).innerHTML = “This div is my div”;
}
</script>
</head>
<body onload = “nameMyDiv();”>
<div id = “myDiv”>This div is your div</div>
</body>
</html>
濫用保留字做變量名
一個很難被追蹤的問題就是使用保留字做變量名。JavaScript中有超過60個保留字。當(dāng)然，你不可能都把它們記住來避免使用。最好的方法就是使用更加具有描述性的字符來命名變量。
舉個例子，name是一個保留字。如果你喜歡用name，那么最好細化，比如firstName，lastName，dogName和nameOfTheWind。
作用域問題
JavaScript中有函數(shù)作用域和全局作用域。如果你沒有使用var關(guān)鍵字來聲明，那么它是全局的。為了確保不同作用域的安全隔離，建議使用var。譯者補充：建議使用let，更加安全，可參考本文：ES6之”let”能替代”var”嗎?。
函數(shù)調(diào)用缺少參數(shù)
在JavaScript中，在函數(shù)調(diào)用的時候少了幾個參數(shù)，有時候并不會出錯，但可能達不到預(yù)期的執(zhí)行結(jié)果。所以，確保你傳入了足夠的函數(shù)參數(shù)。
從0開始
永遠不要忘記數(shù)組是從0開始。
var myArray = new Array(); myArray[10] = “List of 10 Common Mistakes”; myArray.length; // 輸出11!
相關(guān)文章
JavaScript對象類型轉(zhuǎn)換的分類及步驟詳解
這篇文章主要為大家介紹了JavaScript對象類型轉(zhuǎn)換的分類及步驟詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
近期月報里提到了valueOf方法,興致來了翻了下ECMA5里關(guān)于valueOf方法的介紹真是令人發(fā)指啊,不可思議的朋友可以參考下啊2013-02-02
這篇文章主要為大家詳細介紹了js制作輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要為大家介紹了Promise 鏈式調(diào)用原理精簡示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
一文帶你掌握JavaScript中的執(zhí)行上下文和作用域
作為一名前端工作人員，我們必須知道JavaScript內(nèi)部是如何執(zhí)行的。那對于執(zhí)行上下文和作用域的理解至關(guān)重要，無論是工作還是面試都是無法跳躍的一步，本文就來帶大家深入了解一下2023-02-02
JavaScript 實現(xiàn)簡單的倒計時彈窗DEMO附圖
做一個簡單的設(shè)置網(wǎng)頁，因為需要重啟設(shè)備功能，于是就想在上面加一個倒計時彈窗的界面，下面是具體的實現(xiàn)，大家可以參考下2014-03-03
這篇文章主要詳細介紹了javascript操作數(shù)組的方法以及示例,需要的朋友可以參考下2014-12-12
JavaScript中的子窗口與父窗口的互相調(diào)用問題
本文給大家介紹了JavaScript中的子窗口與父窗口的互相調(diào)用問題，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-02-02
這篇文章主要介紹了uniapp??微信跳轉(zhuǎn)至半屏的使用示例,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-08-08
JavaScript實現(xiàn)字符串與HTML格式相互轉(zhuǎn)換
這篇文章主要介紹了JavaScript實現(xiàn)字符串與HTML格式相互轉(zhuǎn)換,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-03-03