主持人 > 博客 > 網絡新聞 > 哎呀，我又做了一次：調試 JavaScript 中的常見錯誤

哎呀，我又做了一次：調試 JavaScript 中的常見錯誤

哎呀，我又做了一次：調試 JavaScript 中的常見錯誤

正如許多開發人員所熟悉的那樣，編寫 JavaScript 程式碼可能具有挑戰性，有時甚至令人生畏。 工作過程中難免會出現錯誤，有的錯誤還常重複出現。 本文針對新手開發人員，討論這些錯誤以及如何解決它們。 為了清楚起見，函數、屬性和物件的名稱取自 流行歌。 所有這些都可以幫助您快速記住如何糾正常見錯誤。

提醒： 對於“Habr”的所有讀者 - 使用“Habr”促銷代碼註冊任何 Skillbox 課程可享受 10 盧布的折扣。

技能箱推薦： 實踐課程 “移動開發者專業版”.

類型錯誤：屬性未定義

let girl = {
    name: "Lucky",
    location: "Hollywood",
    profession: "star",
    thingsMissingInHerLife: true,
    lovely: true,
    cry: function() {
        return "cry, cry, cries in her lonely heart"
    }
}
console.log(girl.named.lucky)

上面的範例程式碼拋出錯誤 Uncaught TypeError: Cannot read property 'lucky' of undefined。 問題在於，girl 物件沒有命名屬性，儘管它確實有 name 屬性。 由於 Girl.named 屬性未定義，因此您無法存取它，因為形式上它不存在。 但如果你用girl.name取代girl.named.lucky，那麼一切都會正常，程式將會回傳Lucky。

您可以了解更多有關屬性的信息 在這裡閱讀.

如何解決類型錯誤

當程式設計師嘗試對與特定類型不符的資料執行操作時，就會發生類型錯誤。 範例包括使用 .bold()、請求未定義的屬性或呼叫實際上不是函數的函數。

因此，如果您嘗試呼叫 Girl()，您將收到錯誤 Uncaught TypeError: yourVariable.bold is not a function and Girl is not a function，因為它實際上是被呼叫的對象，而不是函數。

為了消除錯誤，您需要研究變數。 那麼，什麼是女孩呢？ 女孩.name是什麼？ 您可以透過分析程式碼、使用 console.log、偵錯器命令顯示變數或在控制台中呼叫變數名稱來找出答案。 您需要確保可以對變數中包含的資料類型進行操作。 如果不合適，請變更它，例如新增條件或 try..catch 區塊 - 並獲得對操作執行的控制。

堆疊溢位

如果你相信《Baby One More Time》這首歌的歌詞作者（這是布蘭妮·斯皮爾斯，是的），那麼在這種情況下，“hit”這個詞意味著歌手渴望再次被召喚（這裡是對這首歌的背景的解釋）歌曲-譯者註）。 這種願望很可能會導致現實生活中打電話的數量增加。 但在程式設計中，這是一種遞歸，如果呼叫堆疊溢出，可能會導致錯誤。

錯誤看起來像這樣：

錯誤：堆疊空間不足（邊緣）
內部錯誤：遞歸過多（Firefox）
RangeError：超出最大呼叫堆疊大小（Chrome）

如果開發人員在遞迴中沒有考慮基本情況，或是程式碼沒有解決預期情況，就會發生堆疊溢位。

function oneMoreTime(stillBelieve=true, loneliness=0) {
    if (!stillBelieve && loneliness < 0) return
    loneliness++
    return oneMoreTime(stillBelieve, loneliness)
}

在這種情況下， stillBelieve 永遠不會為 false，因此每次都會呼叫 oneMoreTime，但函數永遠不會完成。

如果你開始依賴兩個朋友，這會減少孤獨感，你不必等待電話。

function oneMoreTime(stillBelieve=true, loneliness=0) {
    if (!stillBelieve && loneliness < 0) return
    loneliness--
    stillBelieve = false
    return oneMoreTime(stillBelieve, loneliness)
}

一個例子是無限循環的情況，即係統不會產生錯誤訊息，但執行 JavaScript 程式碼的頁面只是凍結。 如果 while 迴圈沒有終止條件，就會發生這種情況。

let worldEnded = false
 
while (worldEnded !== true) {
  console.log("Keep on dancin' till the world ends")
}

您可以透過以下方式解決問題：

let worldEnded = false
 
while (worldEnded !== true) {
  console.log("Keep on dancin' till the world ends")
  worldEnded = true
}

調試無限循環和遞歸

如果遇到無限循環問題，則需要關閉 Chrome 或 Edge 中的選項卡，並關閉 Firefox 中的瀏覽器視窗。 之後，你需要仔細分析程式碼。 如果找不到問題，則值得在循環或函數中添加調試器命令並檢查變數的值。 如果結果與預期不符，那麼我們將其替換，這可以很容易地完成。

在上面的範例中，應將偵錯器新增為函數或循環的第一行。 然後你需要在 Chrome 中開啟偵錯選項卡，分析作用域中的變數。 使用下一個按鈕，您可以追蹤每次迭代的變更。 這一切都很容易做到，而且大多數情況下都能找到問題。

您可以在這裡閱讀有關這一切的更多資訊（適用於 Chrome） 和這裡 （對於火狐瀏覽器).

語法錯誤

JavaScript 中最常見的錯誤之一是 SyntaxError。 文字編輯器擴充功能將幫助您避免它們。 例如，Bracket Pair Colorizer 以不同的顏色標記程式碼中的括號，Prettier 或類似的分析工具可以快速發現錯誤。 減少語法錯誤可能性的最佳選擇是最小化嵌套。

在評論中分享：您如何防止錯誤或快速發現並消除錯誤？

技能箱推薦：

來源： www.habr.com

添加評論