JavaScript 錯誤類型(JavaScript Error Reference)

發表於 2021-11-26 分類於 JavaScript

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

｜

這一篇稍微整理一下 JavaScript 中各種錯誤的訊息，畢竟開發上我們是很常看到紅色的錯誤訊息，若能夠快速掌握錯誤訊息的類型的話，其實也可以幫助我們 debug。

前言

錯誤類型(Error Reference)

JavaScript 中的錯誤類型有以下

SyntaxError
RangeError
ReferenceError
TypeError
URIError

SyntaxError (語法錯誤)

SyntaxError 非常顧名思義就是語法使用上的錯誤

使用了不正確的命名宣告：

// Uncaught SyntaxError: missing variable name
var 1;
// Uncaught SyntaxError: missing variable name
var '小明' = 1;

常見的 LHS (Left-Head Side) 錯誤：

1 2	// Uncaught SyntaxError: invalid assignment left-hand side '小明' = 1;

沒有正確撰寫括號：

// Uncaught SyntaxError: expected expression, got '}'
if(true) 
  console.log('Ray');
}

缺少逗號：

// Uncaught SyntaxError: missing } after property list
var obj = {
  myName: 'Ray' 
  Url: 'https://israynotarray.com/'
};

使用 const、let 重複宣告：

// Uncaught SyntaxError: redeclaration of const myName
const myName = 'Ray';
const myName = 'Array';
// Uncaught SyntaxError: redeclaration of let myName
let myName = 'Ray';
let myName = 'Array';

const 缺少初始值(let 並不會有此問題)：

1 2	// Uncaught SyntaxError: missing = in const declaration const myName;

語法錯誤的錯誤狀況非常多，所以只列出特定幾種常見的。

RangeError (範圍錯誤)

基本上這個錯誤很少見，主要常見於無效的陣列長度，例如：

1	const array = new Array(-1); // Uncaught RangeError: invalid array length

又或者是這樣子：

1 2	let arr = []; arr.length = arr.length - 1; // Uncaught RangeError: invalid array length

ReferenceError (參考、引用錯誤)

呼叫一個不存在的變數或函式：

1 2	// Uncaught ReferenceError: myName is not defined console.log(myName);

let、const 宣告之前呼叫：

// Uncaught ReferenceError: can't access lexical declaration 'myName' before initialization
console.log(myName);
const myName = 'Ray';

// Uncaught ReferenceError: can't access lexical declaration 'myName' before initialization
console.log(myName);
let myName = 'Ray';

不正確的分配：

1	console.log = 1 \|\| console.log = 1

還有一種特別的狀況可以引起 ReferenceError 錯誤，也就是嚴格模式下使用一個沒有宣告的變數

// Uncaught ReferenceError: assignment to undeclared variable myName
function fn() {
  'use strict';
  myName = 'Ray';
}

fn()

TypeError (類型錯誤)

這個錯誤訊息大概是非常多的

不存在的屬性：

1
2
3

// Uncaught TypeError: obj.data is undefined
var obj = {};
obj.data.myName = 'Ray';

呼叫了一個不存在的方法：

1
2
3

// Uncaught TypeError: set.filter is not a function
const set = new Set();
set.filter();

(Set 是一個類陣列，因此沒有 filter 方法)

undefined 與 null 是無法增加屬性的：

// Uncaught TypeError: undefined has no properties
undefined.myName = 'Ray';
// Uncaught TypeError: null has no properties
null.myName = 'Ray';

const 重複賦予：

1
2
3

// Uncaught TypeError: invalid assignment to const 'myName'
const myName = 'Ray';
myName = 'qq';

URIError (Url 錯誤)

這個錯誤主要是解析 Url 時會出現的錯誤

不正確的解析 Url

// Uncaught URIError: malformed URI sequence
decodeURI('%Ray');

// Uncaught URIError: malformed URI sequence
encodeURI('\uD800');

補充事項

這邊要注意一件事情就是每個瀏覽器的錯誤訊息提示都會有一些許的不一樣，而這一篇文章我主要是在 Firefox 環境下撰寫的，所以舉例來講，前面有一個範例是：

// Uncaught SyntaxError: missing variable name
var 1;
// Uncaught SyntaxError: missing variable name
var '小明' = 1;

但是在其他瀏覽器，例如 Edge、Chrome 的錯誤訊息上可能就會有所不同：

1
2
3

SyntaxError: Unexpected identifier after numeric literal (Edge)
SyntaxError: identifier starts immediately after numeric literal (Firefox)
SyntaxError: Unexpected number (Chrome)

因此這邊建議知道錯誤訊息的類型就可以了。

參考文獻

JavaScript error reference