JavaScript 開發中常見錯誤解決小總結

時間 2020-11-19

標籤前端程序員面試編程 segmentfault 數組服務器微信多線程框架欄目 JavaScript 简体版

原文原文鏈接

身爲一名前端打工人，固然是經驗越多，在排查錯誤時會更容易。道理都懂，但仍然會在遇到問題時會不知道怎樣着手。前端

Chrome DevTools 中的常見錯誤排查

Chrome 開發者工具的 Console 至關好用，最常使用的不外乎是經過 console.log 展現出變量或運算的結果，若是符合預期則皆大歡喜。程序員

可是一旦出現紅字幸災樂禍的告訴咱們「你出錯了！」，這對咱們來講無疑是一種挫折，在不知如何着手解決錯誤的時，只能反覆地檢查本身的代碼，看看是否是有什麼奇怪的地方，有時就算停在了錯誤地方也每每不知是什麼意思，會所以花費大量的時間。面試

本文就來介紹在 Chrome 開發者工具中常見的錯誤反饋及排除技巧，讓你再也不爲了滿屏幕的紅字感到挫折，更能從中學習如何快速搜尋錯誤代碼。編程

注意：JavaScript 是屬於同步的編程語言，若是出現錯誤就會形成後面的代碼沒法運行，當 紅字沒有解決時，都有可能形成接下來的代碼行錯誤或是沒法繼續運行。

錯誤類型：SyntaxError

SyntaxError 類型的錯誤一般是語法錯誤，遇到這中錯誤時建議經過你所用的 IDE 排查，好比 VSCode 可以直接跳出這類型的錯誤提示。segmentfault

以下圖，VSCode 用紅色波浪線提示 family 對象有錯誤，當出現錯誤時會建議不要只檢查當前行，錯誤可能會存在於上下文中（有可能跨多行的錯誤），這個例子中仔細檢查能夠發如今'小明'後面少了一個逗號。數組

排查重點：使用主流的 IDE 例如 "VSCode" 進行排查

Uncaught SyntaxError: Unexpected identifier

var person = {
  name: '小明'
  family: {
    name: '小明家'
  }
}

語法解析錯誤，由於在對象結構中缺乏一個逗號，除了經過在 VSCode 中查看外，也能夠直接經過 Chrome Console 切換到 Source 頁面查看錯誤行，並檢查此行的上下文中是否存在語法錯誤。服務器

Uncaught SyntaxError: Unexpected end of input

function fn() {
  console.log('這是一個函數');
console.log(fn);

語法解析錯誤：未預期的結束，這個例子中缺乏結尾的大括號 }，在編寫代碼時儘量的維持正確的鎖緊，將代碼排列整齊以後更容易找到錯誤。微信

Uncaught SyntaxError: Unexpected token '}'

if (name)
  console.log('當即執行函數')
};

語法解析錯誤：未預期的符號 }，代碼結尾多了一個 } 符號致使環境運行錯誤，這個錯誤的排查方法與上面相同，儘量將代碼排整齊並維持首尾符號的一致。多線程

除此以外再推薦一個 VSCode 工具，能夠爲你的首尾標籤加上對應的色彩：https://marketplace.visualstu...框架

例子：代碼中成對的 {} 都會以相同的顏色展現。

Uncaught SyntaxError: Identifier 'a' has already been declared

let a;
let a;

語法解析錯誤：識別符號（在這裏指的是變量）已經被聲明，應該避免重複生命同一個變量，在 ES6 都禁止用 let、const 對變量進行重複聲明，直接排除便可。

錯誤類型：ReferenceError

ReferenceError 這類錯誤一般是指找不到引用，當出現這類錯誤時在 IDE 中不必定會提示現錯誤（除非安裝了 Linter），因此在代碼的運行階段纔會看到這類錯誤。

排查重點：

經過 Chrome 的提示改正

在 JavaScript 開發環境中安裝 ESLint

ReferenceError: a is not defined

ReferenceError: a is not defined

引用錯誤：因爲變量 a 未定義，因此在使用這個變量時會出現未定義的提示，只要先定義好這個變量便可。

還有另外一種很常見的狀況，當引用外部包時出現「包名 + is not defined」，這種狀況一般是外部資源沒有被正確載入，應該確保該資源被正確的引入。

下面的例子就是由於 jQuery 沒有正確導入而致使的。

Uncaught ReferenceError: $ is not defined

錯誤類型：TypeError

TypeError 是類型上的錯誤，一樣 IDE 也不會預先提示有錯誤，必須在執行時纔會看到，這類型的錯誤一般是如下幾種：

試圖獲取 undefined、null 的屬性
嘗試調用非函式變量或表達式（例如: 'text'()）

排查重點：在獲取變量前先確認其當前的數據類型及結構

Uncaught TypeError: Cannot read property 'a' of undefined

var a;
console.log(a.a);

說明：在這個變量的值中沒法找到其特定的屬性，例如在 undefined、null 的值上是找不到其它屬性的，若是沒法確認該變量是否爲 undefined，能夠把代碼改爲這樣：

if (typeof a !== 'undefined') {
  console.log(a.a);
}

Uncaught TypeError: console.log(...) is not a function

console.log('a')
(function() {
  console.log('當即執行函數')
})()

說明：這代碼看起來是當即執行函數的錯誤，可是卻出現了 console.log(...) is not a function。這個錯誤主要是由於缺乏了分號。

當遇到這類錯誤時只要在二者之間補上分號便可。

console.log('a');
(function() {
  console.log('當即執行函數')
})()

錯誤類型：RangeError

這是建立了超過長度上限的數組或執行了沒法退出的遞歸函數所形成的錯誤，遇到這類問題須要從新檢查代碼的邏輯，是否消耗了過多的資源（內存或CPU資源）。

排查重點：須要從新檢查邏輯，若是有必要可先刪除部分代碼，先找出錯誤的片斷後再進行除錯。

Uncaught RangeError: Maximum call stack size exceeded

(function a() {
  a();
})();

說明：在函數調用時會產生一個函數調用棧，若是在遞歸的過程當中超過上限則會產生錯誤。

這類錯誤也很常見，卻不容易找到出錯的緣由，其主要緣由是在遞歸時超過了環境的限制（使用框架時也很常見），若是遇到這錯誤建議改寫當前調用函數的方式。

總結

當 Chrome Console 報錯時要保持淡定，在編碼的過程當中出現錯誤是很常見的，所謂的大佬與新手之間的區別之一就是遇到錯誤時的經驗，遇到錯誤時搞不清楚不要緊，這都是經驗的累積。只要積累足夠了，再遇到相同的問題時就能天然而然的輕鬆面對了。

本文首發微信公衆號：前端先鋒

歡迎掃描二維碼關注公衆號，天天都給你推送新鮮的前端技術文章

歡迎繼續閱讀本專欄其它高贊文章：

更多文章...

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。