iT邦幫忙

2022 iThome 鐵人賽

DAY 17
0
自我挑戰組

那些 Notion 中的前端筆記系列 第 17

Day17 | JS 常見的錯誤類型

  • 分享至 

  • xImage
  •  

前言

在六角學院的「 JavaScript 核心篇 」中常遇到開發者工具顯示 Uncaught SyntaxErrorUncaught ReferenceError 錯誤訊息,藉此篇文章整理開發中常遇到的錯誤訊息們,方便日後除錯翻閱。

❐ JavaScript 常見的錯誤類型 ( Error Reference )

  • SyntaxError
  • ReferenceError
  • TypeError
  • RangeError
  • URIError

❐ SyntaxError 語法錯誤

SyntaxError 通常為語法結構的錯誤,此錯誤結構有時候也可以透過 VSCdoe 的提示來查看,結構有問題的地方 VSCode 會顯示紅色毛毛蟲樣式。

範例 1. 函式缺少結尾 }

function callName() {
  console.log('Hello, 媽');

callName() 結尾少了 },開發者工具會跳出 Uncaught SyntaxError 錯誤訊息。

範例 2. 結尾符號不正確

let myName = 'Carrie',

正確寫法應為 let myName = 'Carrie'; 而非逗號,開發者工具會跳出 Uncaught SyntaxError 錯誤訊息。

❐ ReferenceError 參考、引用錯誤

ReferenceError 錯誤類型較常在執行階段才會看到錯誤,編輯器中不一定會顯示錯誤,除非裝 ESLint 工具,可透過下面方式進行除錯。

除錯重點

  • 可透過 Chrome 開發者工具的錯誤訊息排錯。
  • 於 JS 撰寫的開發環境中 ( 例如 VSCode ) 裝 ESLint 工具。

範例1.

console.log(Ming);
let Ming = '小明';

因為 let 宣告變數,變數在創造階段會位於暫時性死區,而 console.log(Ming);Ming = '小明'; 之前,自然讀取不到 Ming 的值,會顯示 Uncaught ReferenceError: Cannot access 'Ming' before initialization 錯誤訊息。

範例 2. 呼叫為宣告的變數

console.log(Ming);

會顯示錯誤訊息 Uncaught ReferenceError: Ming is not defined

❐ TypeError 型別錯誤

TypeError 錯誤訊息不會顯示於編輯器中,也是須於執行環境中才會看到錯誤訊息。

除錯重點:

  • 可透過 Chrome 開發者工具的錯誤訊息排錯。
  • 在要取變數、重新賦予變數新值,先確認此變數的資料型別與結構。
    • const 不能重新賦予值。
    • undefined  與 null  無法再增加屬性。

範例 1. const 重新賦予值

const Ming = '小明';
Ming = '大明';

由於 const 不能重新賦予值,所以會顯示錯誤訊息 Uncaught TypeError: Assignment to constant variable

範例 2. undefined  與 null 新增屬性

null.name = 'Hi';
undefined.callMe = 'Hello';

由於 undefined  與 null  無法再增加屬性,所以分別會顯示錯誤訊息:

  • Uncaught TypeError: Cannot set properties of null (setting 'name')
  • Uncaught TypeError: Cannot set properties of undefined (setting 'callMe')

範例 3. 對 undefined 的值新增屬性

var family = {
  dog: 2,
}
family.father.child = 3;

錯誤訊息:Uncaught TypeError: Cannot set properties of undefined (setting 'child')

  • 因為 father 並沒有定義 ( 不存在 ),所以它的值為 undefined ,在 undefined 上是無法新增任何屬性。

❐ RangeError 範圍錯誤

RangeError 錯誤訊息的原因為

  • 無效的陣列長度
  • 過度執行函式,會產生過多執行堆疊
    • 需檢視程式碼的邏輯找出問題點,否則會過去消耗硬體資源。

範例 1. 無效的陣列長度

let ary = ['A'];
ary.length = ary.length - 2;

錯誤訊息 Uncaught RangeError: Invalid array length

範例 2. 函式自己呼叫自己

(function fn(){
  fn();
})();

執行堆疊超過環境限制,錯誤訊息 Uncaught RangeError: Maximum call stack size exceeded

❐ URIError Url 錯誤

Url 解析不成功的原因為:傳遞給 decodeURIencodeURLencodeURIComponentdecodeURIComponent 這些函數的參數不合格,導致函數無法正確對它進行解析。

範例1. decodeURL

// 錯誤: Uncaught URIError: URI malformed at decodeURI
decodeURI('%carrie');

// 正確
decodeURI('%25carrie');

參考資訊


上一篇
Day16 | JS 的 Hoisting 提升與執行環境
下一篇
Day18 | JS 關於 let、 const、var
系列文
那些 Notion 中的前端筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言