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

身為前端JavaScript打工人，當然是經驗越多，在排查錯誤時會比較容易。道理都懂，但還是會在遇到問題時會不知道怎麼著手。

推薦（免費）：JavaScript（影片）

Chrome DevTools 中的常見錯誤排查

Chrome 開發者工具的Console 相當好用，最常使用的不外乎是透過console.log 展示出變數或運算的結果，如果符合預期則皆大歡喜。

但是一旦出現紅字幸災樂禍的告訴我們“你出錯了！”，這對我們來說無疑是一種挫折，在不知如何著手解決錯誤的時，只能反复地檢查自己的代碼，看看是不是有什麼奇怪的地方，有時就算停在了錯誤地方也往往不知是什麼意思，會因此花費大量的時間。

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

注意：JavaScript 是屬於同步的程式語言，如果發生錯誤就會造成後面的程式碼無法執行，當紅字沒有解決時，都有可能造成接下來的程式碼行錯誤或無法繼續運行。

錯誤類型：SyntaxError

#SyntaxError 類型的錯誤通常是語法錯誤，遇到這中錯誤時建議透過你所使用的IDE 排查，例如VSCode 能夠直接跳出這類型的錯誤提示。

如下圖，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 报错时要保持淡定，在编码的过程中出现错误是很常见的，所谓的大佬与新手之间的区别之一就是遇到错误时的经验，遇到错误时搞不清楚没关系，这都是经验的累积。只要积累足够了，再遇到相同的问题时就能自然而然的轻松面对了。

以上是小總結 JavaScript 開發常見錯誤解決的詳細內容。更多資訊請關注PHP中文網其他相關文章！