在開發中，有時，我們花了幾個小時寫的Js 代碼，在游覽器調試一看，控制臺一堆紅，瞬間一萬頭草泥馬奔騰而來。

至此，本文主要記錄 Js 常見的一些錯誤類型，以及常見的報錯信息，分析其報錯原因，并給予處理方法。并且將介紹幾種捕獲異常的方法。

注：本文使用的谷歌游覽器驗證，不同的游覽器，報錯可能會不一樣。

**常見的錯誤類型**

- RangeError：標記一個錯誤，當設置的數值超出相應的范圍觸發。比如，new Array(-20)。
- ReferenceError：引用類型錯誤，當一個不存在的變量被引用時發生的錯誤。比如：console.log(a)。
- SyntaxError：語法錯誤。比如 if(true) {。
- TypeError：類型錯誤，表示值的類型非預期類型時發生的錯誤。

## **常見的錯誤**

```
RangeError:` `Maximum` `call` `stack` `size` `exceeded
```

含義：超出了最大的堆棧大小

為什么報錯?

在使用遞歸時消耗大量堆棧，導致游覽器拋出錯誤，因為游覽器給分配的內存不是無限的。

舉個栗子：

```js
function pow(x, n) {
return x * pow(x, n - 1);
}
pow(10,5)
```

處理辦法：

使用遞歸的時候，設定一個條件來終止遞歸，否則會無限循環，直到用盡調用堆棧空間為止。

```js
function pow(x, n) {
if (n == 1)  return x
return x * pow(x, n - 1);
}
pow(10,5)
ReferenceError:` `"x"` `is` `not` `defined
```

含義：“x”未定義

為什么報錯？

當你引用一個沒有定義的變量時，拋出一個ReferenceError; 當你使用變量的時候，這個變量必須要聲明，或者你可以確保它在你當前的腳本或作用域 (scope) 中可用。

舉個栗子：

```js
// 變量未聲明
console.log(a)
fn()
// 錯誤的作用域  
function sum() {
let number1 = 20,number2 = 30;
return number1 + number2;
}
console.log(number1)
```

處理辦法：

變量使用var|let|const 聲明

提升變量的作用域

```js
// 變量未聲明
let a;
function fn() {};
console.log(a);
fn();

// 錯誤的作用域
let number1 = 20, number2 = 30;
function sum() {
 return number1 + number2;
}
console.log(number1)
SyntaxError:` `Identifier` `'x'` `has` `already` `been` `declared
```

含義: 標識符已申明

為什么報錯？

某個變量名稱已經作為參數出現了，又在使用let再次聲明。

舉個栗子：

```js
// let 重復聲明
let a = 0;
let a = 2;

// 在函數中參數已經出現，函數里使用let重新聲明
function fn(arg) {
let arg = []
}
SyntaxError:` `Invalid` `or` `unexpected` `token
```

含義：捕獲無效或意外的標記

為什么報錯？

代碼中有非法的字符或者缺少必要的標識符號，比如減號 ( - ) 與連接符 ( – ) ，或者是英文雙引號 ( " ) 與中文雙引號 ( “ )。

舉個栗子：

```js
// 遺漏的字符
let str = 'string;
let colors = ['#000', #333', '#666'];

// 使用特殊字符
let str1 = 'string";
let str2 = 5#5;

// 錯配字符(使用中文引號字符)
let str3 = ‘string’;
```

處理辦法

檢查是否有特殊字符或者是否遺漏一些字符。

```
SyntaxError:` `Unexpected` `end` `of` `input
```

含義：意外的終止輸入

為什么報錯？

代碼中某些地方的括號或引號不匹配缺失，缺少()、[]、{}等。

舉個栗子：

```js
// 缺少括號
if(true)
let obj = {id: 1
let arr = [1,2,3

// 缺少結束符號
(function () {
  console.log('hello world')
}()
```

處理辦法：

檢查是否有特殊字符或者是否遺漏一些字符,括號需要配對出現。

```
TypeError:` `Cannot` `read` `property` `'x'` `of` `undefined
TypeError:` `Cannot` `set` `property` `'x'` `of` `undefined
```

含義：無法讀取屬性‘x’, 無法設置屬性 'x'

為什么報錯？

訪問或設置未定義(undefined)或null值的屬性時會發生這種報錯。

舉個栗子：

```js
// undefined
let a = undefined
a.id // 讀取
a.id = 1 // 設置
// null
let b = null
b.id  // 讀取
b.id = 2 // 設置
null.filter(item=>item)
```

處理辦法：

有一些方法可以避免這種錯誤。一種簡單且適用于小型屬性鏈的方法是使用邏輯運算符&&。

```js
let obj = undefined
console.log(obj&&obj.id)
TypeError:` `'x'` `is` `not` `a` `constructor
```

含義：表示 ‘x’不是構造函數

為什么報錯？

使用不是構造器的對象或者變量來作為構造器使用。比如：new 10。

舉個栗子：

```js
let Car = 1;
new Car();
new Math();
```

處理辦法：

使用正確的構造函數。Generator functions 也不能作為構造器來使用。

```js
function Car(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
}
```

`SyntaxError:` `Invalid` `regular` `expression` `flags`含義：正則表達式標志無效

為什么報錯？

在代碼中出現了無效的正則表達式的標記。

舉個栗子：

```js
let reg = /foo/bar;
```

處理辦法：

```js
let reg = /foo/g;
DOMException:` `Failed` `to` `execute` `'open'` `on` `'XMLHttpRequest':` `Invalid` `URL
```

含義：無效的Url

為什么報錯？

在使用ajax 請求時url錯誤，導致請求失敗。

舉個栗子：

```js
function createXHR(url) {
    let xhr = new XMLHttpRequest();
    xhr.open('POST', url, true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send('user=admin');
    xhr.onreadystatechange = function () {
    }
}
createXHR('http://192.168.10.8080') // 錯誤url
createXHR('http:/192.168.10:8080/open') // 缺少 /,注：有些游覽器會自動補全
```

處理辦法：

檢查url 請求是否正確，保證請求路徑的完整。

```js
createXHR('http://192.168.10:8080')
```

異常調試及捕獲

try/catch，Js中處理異常的一種模式，try用于可能會發生錯誤的代碼，catch對錯誤的處理

```js
try{
// 可能會導致錯誤的代碼
}catch(error) {
// 錯誤處理
}
```

舉個栗子：

```js
try{
console.log(a)
}catch(error) {
 // 打印錯誤信息
console.log(error)  // ReferenceError: a is not defined
}
```

throw，用來拋出一個用戶自定義的異常，執行將被停止。

```js
function getUserName(name) {
  if(!name) throw new Error('用戶名無效');
  return name;
}
getUserName()
```

Promise 的異常處理,Promise執行中，本身自帶try...catch的異常處理，出錯時，將錯誤Rejact函數。

```js
new Promise((resolve, reject) => {
 throw new Error('error!');
}).catch(alert);
```

console.log() 方法,在游覽器中，使用console.log打印javaScript的值。

```js
let value = '你最棒了，點個贊唄！'
console.log(value)
```

debugger 斷點調試，用于停止執行 JavaScript，并調用調試函數。

```js
let value = 15;
debugger
document.querySelector('body').innerHTML = '你最棒了，點個贊唄！'
```

## **總結**

報錯的時候別慌，有時候就是那么簡單，根據這些代碼敲一敲，熟悉一些常用的報錯信息，便于在報錯的時候快速的定位到報錯原因。

**-** **End** -

更多關于“html5培訓”的問題，歡迎咨詢千鋒教育在線名師。千鋒已有十余年的培訓經驗，課程大綱更科學更專業，有針對零基礎的就業班，有針對想提升技術的提升班，高品質課程助理你實現夢想。