首頁 web前端 js教程 在JavaScript中遇到的BUG

在JavaScript中遇到的BUG

Jun 20, 2018 am 11:44 AM
bug javascript

給大家詳細著整理了在JavaScript開發中大家常遇到的BUG和問題,需要的朋友參考學習下吧。

就算最牛的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(“myp”).innerHTML = “This p is my p”;
 </script>
</head>
<body>
 <p id = “myp”>This p is your p.</p>
</body>
</html>
登入後複製

在腳本執行的時候,瀏覽器還不知道myp是什麼。

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

將程式碼放到最後,也就是後面

將程式碼放到函數中,並且和body的onload綁定。

<html>
<head>
 <script>
 function nameMyp() {
 document.getElementById(“myp”).innerHTML = “This p is my p”;
 }
 </script>
</head>
<body onload = “nameMyp();”>
 <p id = “myp”>This p is your p</p>
</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!
登入後複製

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在vue中详细介绍mixins和extends用法

在canvas中如何实现轨迹回放功能

在vue.js中通过vue-router如何实现无效路由提示

在Vue中extend 、component有哪些区别?

以上是在JavaScript中遇到的BUG的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何使用WebSocket和JavaScript實現線上語音辨識系統 如何使用WebSocket和JavaScript實現線上語音辨識系統 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript實現線上語音辨識系統引言:隨著科技的不斷發展,語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統,具備了低延遲、即時性和跨平台的特點,成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系

WebSocket與JavaScript:實現即時監控系統的關鍵技術 WebSocket與JavaScript:實現即時監控系統的關鍵技術 Dec 17, 2023 pm 05:30 PM

WebSocket與JavaScript:實現即時監控系統的關鍵技術引言:隨著互聯網技術的快速發展,即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用,並給出程式碼範例,詳細解釋其實作原理。一、WebSocket技

蘋果iOS18bug匯總 蘋果iOS18bug匯總 Jun 14, 2024 pm 01:48 PM

隨著蘋果WWDC發表會2024圓滿落幕,不僅揭曉了macos15,其中最受關注的還是蘋果iOS18新系統的更新,雖然有很多新功能出現,但是作為蘋果iOS18首版不免讓人糾結是否有必要升級蘋果iOS18,在最新發表的蘋果iOS18中又有哪些BUG存在呢?經過真實的使用測評,以下是蘋果iOS18bug匯總,一起來看看。目前有許多iPhone用戶都搶先升級到了iOS18.但各種系統Bug讓人難受。有部落客表示,升級iOS18要謹慎,因為「Bug多到飛起」。部落客表示,如果你的iPhone是

遊戲bug是什麼意思 遊戲bug是什麼意思 Feb 18, 2024 am 11:30 AM

遊戲bug是什麼意思在玩遊戲的過程中,我們常常會遇到一些意想不到的錯誤或問題,例如角色卡住、任務無法繼續、畫面閃爍等等。這些不正常的現象就被稱為遊戲bug,也就是遊戲中的故障或錯誤。在本文中,我們將探討遊戲bug是什麼意思以及對玩家和開發者的影響。遊戲bug是指在遊戲的開發或運作過程中出現的錯誤,導致遊戲無法正常進行或出現不符合預期的情況。這些錯誤可能是由於

如何利用JavaScript和WebSocket實現即時線上點餐系統 如何利用JavaScript和WebSocket實現即時線上點餐系統 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket實現即時線上點餐系統介紹:隨著網路的普及和技術的進步,越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統,我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議,可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中,當使用者選擇菜餚並下訂單

如何使用WebSocket和JavaScript實現線上預約系統 如何使用WebSocket和JavaScript實現線上預約系統 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代,越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統,並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工

JavaScript與WebSocket:打造高效率的即時天氣預報系統 JavaScript與WebSocket:打造高效率的即時天氣預報系統 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket:打造高效的即時天氣預報系統引言:如今,天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展,我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中,我們將學習如何使用JavaScript和WebSocket技術,來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We

簡易JavaScript教學:取得HTTP狀態碼的方法 簡易JavaScript教學:取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教學:如何取得HTTP狀態碼,需要具體程式碼範例前言:在Web開發中,經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時,我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功,並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼,並提供一些實用的程式碼範例。使用XMLHttpRequest

See all articles