2. 程式人生 > >10個常見的JavaScript BUG

10個常見的JavaScript BUG

阿新 • • 發佈：2018-01-25
分享 需要 you 慎用 div -a 地址 var 最好

譯者按： 安全起見，在開發中我基本不用==。

  • 原文: 10 COMMON JAVASCRIPT BUGS AND HOW TO AVOID THEM
  • 譯者: Fundebug

為了保證可讀性，本文采用意譯而非直譯。另外，本文版權歸原作者所有，翻譯僅用於學習。

就算最牛的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!

技術分享圖片 

版權聲明:
轉載時請註明作者Fundebug以及本文地址：
https://blog.fundebug.com/2017/12/18/10-common-javascript-bugs-and-how-to-avoid-them/

10個常見的JavaScript BUG

相關推薦

10個常見的JavaScript BUG

分享 需要 you 慎用 div -a 地址 var 最好 譯者按： 安全起見，在開發中我基本不用==。 原文: 10 COMMON JAVASCRIPT BUGS AND HOW TO AVOID THEM 譯者: Fundebug 為了保證可讀性，本文采用意譯而非直

10個常見的Redis面試題

導讀：在程式設計師面試過程中Redis相關的知識是常被問到的話題。作為一名在網際網路技術行業打擊過成百上千名的資深技術面試官，本文作者總結了面試過程中經常問到的問題。十分值得一讀。 作者簡介：錢文品（老錢），網際網路分散式高併發技術十年老兵，目前任掌閱科技資深後端工程師。熟練使用 Java、Py

Hibernate 的 10 個常見面試問題及答案

原文出處： 開源中國 在Java J2EE方面進行面試時，常被問起的Hibernate面試問題，大多都是針對基於Web的企業級應用開發者的角色的。Hibernate框架在Java界的成功和高度的可接受性使得它成為了Java技術棧中最受歡迎的物件關係影射（ORM）解決方案。

10個學習JavaScript的免費線上資源丨附地址

我們都聽說過“ JavaScript ” 這個術語，但我們中只有少數人知道它的用法和應用。這裡的“我們中的少數”是指技術青年、網路程式設計師和IT專業人員。但是，對於外行來說，“JavaScript”只不過是一個與計算機程式設計相關的複雜術語。 那麼，什麼是Java

合併請求的 10 個常見問題及建議

我參加過很多 GitHub 託管的專案，不管是個人的、開源的還是合約的。有時候用免費的 GitHub，其他時候用 GitHub 企業版。但有一件事是一樣的：提交合並請求（Pull Request）很容易的，但審查好 PR 真的很難。 所以乾脆寫一篇合併請求的 10

10個常見的Redis面試"刁難"問題

導讀：在程式設計師面試過程中Redis相關的知識是常被問到的話題。作為一名在網際網路技術行業打擊過成百上千名的資深技術面試官，本文作者總結了面試過程中經常問到的問題。十分值得一讀。 作者簡介：錢文品（老錢），網際網路分散式高併發技術十年老兵，目前任掌閱科技資深後端工程師。熟

Hibernate的10個常見面試問題及答案

在Java J2EE方面進行面試時，常被問起的Hibernate面試問題，大多都是針對基於Web的企業級應用開發者的角色的。Hibernate框架在Java界的成功和高度的可接受性使得它成為了Java技術棧中最受歡迎的物件關係影射（ORM）解決方案。Hibernate將你從

和BEM的戰鬥：10個常見問題及如何避免

無論你是剛剛發現BEM或者已經是個中熟手（作為web術語來說），你可能已經意識到它是一種有用的方法。如果你還不知道BEM是什麼，我建議你在繼續閱讀這篇文章之前去BEM website瞭解一下它，因為我會假設你對這種CSS的方法有一個基礎的理解。 本文旨在對

7個常見Javascript框架介紹_+14個…

設計開發中的“框架”指一套包含工具、函式庫、約定，以及嘗試從常用任務中抽象出可以複用的通用模組，目標是使設計師和開發人員把重點放在任務專案所特有的方面，避免重複開發。通常的講，框架就是就是最常用的JavaScript框架和Web應用框架，當然，還有CSS框架(15個CSS框架簡介和Typogridp

扼殺效能的 10 個常見 Hibernate 錯誤

錯誤1：使用Eager Fetching FetchType.EAGER的啟示已經討論了好幾年了，而且有很多文章對它進行了詳細的解釋。我自己也寫了一篇。但不幸的是，它仍然是效能問題最常見的兩個原因之一。 FetchType定義了Hibernate何時初始化關聯。你可以

百度優化10個常見問題

越來越多的新人學習SEO，很多都是盯著百度優化在做，在國內做SEO把重心放在百度優化上也很正常，誰讓百度是中文搜尋引擎老大呢！自己和百度打交道也好幾年了，不能說對百度有多麼的瞭解，但是還是有一些自己的認識和體會，想必大家在做百度SEO的時候都會遇到一些問題，而這些問題是大家經常會遇到的，今天就羅列10個關於

《軟體架構的10個常見模式》，看完真心覺得不錯

作者：半吊子全棧工匠 原文連結：https://blog.csdn.net/wireless_com/article/detai

Java程式設計師注意——扼殺效能的 10 個常見 Hibernate 錯誤

那麼請閱讀這篇文章！ 我在很多應用程式中修復過效能問題，其中大部分都是由同樣的錯誤引起的。修復之後，效能變得更溜，而且其中的大部分問題都很簡單。所以，如果你想改進應用程式，那麼可能也是小菜一碟。 這裡列出了導致Hibernate效能問題的10個最常見的錯誤，以及如何修復它們。 錯誤1：使用Eager Fet

10.3.3 WebView的幾個常見功能

layout class alert 組件 creat mage ets error settitle 當前主流的開發模式是“WebView+ProgressDialog” <LinearLayout xmlns:android="http://schemas.an

10個最熱javascript開源框架的社區活躍度對比

udp down tgs wcf sp2 jsp tmp scn dlp 天將軍一擊強猛的毀滅劍斬落在了魂殤身上，而魂殤亦毫不畏懼的回敬了一擊一模一樣的毀滅劍斬，不過，魂殤的攻擊力要遜色了一絲，攻擊輸出略遜一籌！ 急忙起身，卻發現淩雪已經離開了，被子整整齊齊的疊放在床頭，從

【JavaScript】隨機生成10個0~100的數字

set 需要 false 不重復 meta col 包含 四舍五入 true 隨機生成10個0~100不重復的數字（包含0和100）； 需要用到的知識點：隨機數 　　　　　　　　　去重 下面放代碼 <!DOCTYPE html> <html>

javaScript從數組裏隨機抽取10個值

rand element class () shuffle shu return scrip floor function getRandomArrayElements(arr, count) { var shuffled = arr.slice(0), i =

10個JavaScript難點

內存 立即執行函數 vsc %20 輸入 私有 over 避免 命名沖突 閑暇無事，就根據自己在學習JavaScript過程中認為比較難的地方進行了一下總結，以便在日後的工作和學習中遇到類似的問題能夠快速的應對，也希望大佬們多指正。 1. 立即執行函數 立即執行函數，即Im

spring框架常見的10個問題

一、找不到配置檔案的異常 org.springframework.beans.factory.BeanDefinitionStoreException: IOException parsing XML document from class path resource [com/herman/ss/co

設計過程中常見的 10 個小問題

重讀《別讓我思考》   「好的設計是不言而喻的」（good design is obvious）這句話已經提出來很久了。而我相信在過去很長一段時間裡，從事食品、音樂、建築、服裝、哲學和其它等領域的相關人士，對這句話都會有不同的理解。   我們忘記了非常重要的一點，那就是人類思想