是 Ray 不是 Array

整理這些技術筆記真的很花時間，如果你願意 關閉 Adblock 支持我，我會把這份感謝轉換成更多「踩坑轉避坑」的內容給你！ヽ(・∀・)ﾉ

Advertisement
2021-11-26 JavaScript

JavaScript 錯誤類型(JavaScript Error Reference)

#JavaScript #Error Reference

前言

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

錯誤類型(Error Reference)

JavaScript 中的錯誤類型有以下

  • SyntaxError
  • RangeError
  • ReferenceError
  • TypeError
  • URIError

SyntaxError (語法錯誤)

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

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

1
2
3
4
// 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;

沒有正確撰寫括號：

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

缺少逗號：

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

使用 const、let 重複宣告：

1
2
3
4
5
6
// 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 宣告之前呼叫：

1
2
3
4
5
6
7
// 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 錯誤，也就是嚴格模式下使用一個沒有宣告的變數

1
2
3
4
5
6
7
// 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 是無法增加屬性的：

1
2
3
4
// 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

1
2
3
4
5
// Uncaught URIError: malformed URI sequence
decodeURI('%Ray');

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

補充事項

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

1
2
3
4
// 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)

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

參考文獻

整理這些技術筆記真的很花時間，如果你願意 關閉 Adblock 支持我，我會把這份感謝轉換成更多「踩坑轉避坑」的內容給你！ヽ(・∀・)ﾉ

Advertisement

你的支持會直接轉換成更多技術筆記

如果我的筆記讓你少踩一個坑、節省 Debug 的時間，
也許你可以請我喝杯咖啡，讓我繼續當個不是 Array 的 Ray ☕

buymeacoffee | line | portaly

Terminal

相關文章

JavaScript 數字格式化：最簡單的方法（千分位與貨幣）

2025-09-18

前端工程師應該要懂的瀏覽器渲染機制

2025-04-24

FizzBuzz for JavaScript

2025-02-04

關於 JavaScript 中 5 種物件取值方式

2025-01-06

分享這篇文章

留言

© 2025 Ray. All rights reserved.

Powered by Ray Theme