您好,登錄后才能下訂單哦!
就算最牛的JavaScript開發者也會犯錯。有時候導致程序的執行結果和預期不一樣,有時候根本無法運行。這里我總結了10個常見的錯誤,我相信不管是初級還是資深開發者都可能遇到。
相等混淆
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。
丟失的大括號
當程序變得復雜,特別是如果你使用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 Review of Coding JavaScript For Dummies” }, “awards”: [{ “type”: “Nobel Prize”, “url”: ““, }] }
你能看出來哪里少了東西嗎?當不確定的時候,一個好的編輯器將會非常有用。Sublime Text有一個很不錯的功能,當你把光標放在某個大括號的時候,和它匹配的大括號會高亮出來。
不匹配的引號
在定義字符串的時候,你可以自由使用單引號或則雙引號。但是,如果一個字符串單引號開始,雙引號結束就不行了。而且你需要注意本身字符串中的單引號或則雙引號。
var movieName = “Popeye'; // error! var welcomeMessage = ‘Thank you, ‘ + firstName + ‘, let's learn JavaScript!' // error!
總的來說,個人認為是一個非常靈活且好用的功能,但是一定要小心!
缺少必要的圓括號
該錯誤往往在條件語句出錯處,特別是有多個條件的時候。
if (x > y) && (y < 1000) { ... }
如果你注意看,會發現少了括號,正確的應該是這樣:
if ((x > y) && (y < 1000)) { ... }
缺少分號
JavaScript中的語句都應該分號結束。但如果這些語句各自占一行,那么你不寫分號也沒關系。不過不建議使用,因為會有潛在問題。如果你使用自動代碼美化工具可能錯誤的將不同行的代碼合并而出錯。
最好的策略是都要加分號。
大寫錯誤
JavaScript對大小寫敏感,你需要對變量和函數的命名小心,不能把大小寫搞錯了。比如,Document對象的getElementById函數經常被寫錯為getElementByID。
在加載前引用
JavaScript的代碼通常是按順序執行,如果你引用了后面才創建的元素將會報錯。
<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>
在腳本執行的時候,瀏覽器還不知道myDiv是什么。
避免這個問題的方法有很多:
將代碼放到最后,也就是</body>后面
將代碼放到函數中,并且和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個保留字。當然,你不可能都把它們記住來避免使用。最好的方法就是使用更加具有描述性的字符來命名變量。
舉個例子,name是一個保留字。如果你喜歡用name,那么最好細化,比如firstName,lastName,dogName和nameOfTheWind。
作用域問題
JavaScript中有函數作用域和全局作用域。如果你沒有使用var關鍵字來聲明,那么它是全局的。為了確保不同作用域的安全隔離,建議使用var。譯者補充:建議使用let,更加安全,可參考本文:ES6之”let”能替代”var”嗎?。
函數調用缺少參數
在JavaScript中,在函數調用的時候少了幾個參數,有時候并不會出錯,但可能達不到預期的執行結果。所以,確保你傳入了足夠的函數參數。
從0開始
永遠不要忘記數組是從0開始。
var myArray = new Array(); myArray[10] = “List of 10 Common Mistakes”; myArray.length; // 輸出11!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。