常見的錯(cuò)誤類型

• RangeError： 標(biāo)記一個(gè)錯(cuò)誤，當(dāng)設(shè)置的數(shù)值超出相應(yīng)的范圍觸發(fā)。比如，new Array(-20)。
• ReferenceError： 引用類型錯(cuò)誤，當(dāng)一個(gè)不存在的變量被引用時(shí)發(fā)生的錯(cuò)誤。比如：console.log(a)。
• SyntaxError：語(yǔ)法錯(cuò)誤。比如 if(true) {。
• TypeError：類型錯(cuò)誤，表示值的類型非預(yù)期類型時(shí)發(fā)生的錯(cuò)誤。

常見的錯(cuò)誤

• RangeError: Maximum call stack size exceeded

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

  為什么報(bào)錯(cuò)?

  在使用遞歸時(shí)消耗大量堆棧，導(dǎo)致游覽器拋出錯(cuò)誤，因?yàn)橛斡[器給分配的內(nèi)存不是無(wú)限的。

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

處理辦法

使用遞歸的時(shí)候，設(shè)定一個(gè)條件來(lái)終止遞歸，否則會(huì)無(wú)限循環(huán)，直到用盡調(diào)用堆?？臻g為止。

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

• ReferenceError: "x" is not defined

  含義： “x”未定義

  為什么報(bào)錯(cuò)？

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

  舉個(gè)栗子 → ????

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

處理辦法

1. 變量使用var|let|const 聲明
2. 提升變量的作用域

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

   // 錯(cuò)誤的作用域
   let number1 = 20, number2 = 30;
   function sum() {
      return number1 + number2;
   }
   console.log(number1)

• SyntaxError: Identifier 'x' has already been declared

  含義: 標(biāo)識(shí)符已申明

  為什么報(bào)錯(cuò)？

  某個(gè)變量名稱已經(jīng)作為參數(shù)出現(xiàn)了，又在使用let再次聲明。

  舉個(gè)栗子 → ????

// let 重復(fù)聲明
    let a = 0;
    let a = 2;

    // 在函數(shù)中參數(shù)已經(jīng)出現(xiàn)，函數(shù)里使用let重新聲明
    function fn(arg) {
     let arg = []
    }

• SyntaxError: Invalid or unexpected token

  含義：捕獲無(wú)效或意外的標(biāo)記

  為什么報(bào)錯(cuò)？

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

  舉個(gè)栗子 → ????

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

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

    // 錯(cuò)配字符(使用中文引號(hào)字符)
    let str3 = ‘string’;

處理辦法

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

• SyntaxError: Unexpected end of input

  含義：意外的終止輸入

  為什么報(bào)錯(cuò)？

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

  舉個(gè)栗子 → ????

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

    // 缺少結(jié)束符號(hào)
    (function () {
        console.log('hello world')
    }()

處理辦法

檢查是否有特殊字符或者是否遺漏一些字符,括號(hào)需要配對(duì)出現(xiàn)。

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

  含義： 無(wú)法讀取屬性‘x’, 無(wú)法設(shè)置屬性 'x'

  為什么報(bào)錯(cuò)？

  訪問(wèn)或設(shè)置未定義(undefined)或null值的屬性時(shí)會(huì)發(fā)生這種報(bào)錯(cuò)。

  舉個(gè)栗子 → ????

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

**處理辦法**

> 有一些方法可以避免這種錯(cuò)誤。一種簡(jiǎn)單且適用于小型屬性鏈的方法是使用邏輯運(yùn)算符&&。

let obj = undefined
 console.log(obj&&obj.id)

• TypeError: 'x' is not a constructor

  含義： 表示 ‘x’不是構(gòu)造函數(shù)

  為什么報(bào)錯(cuò)？

  使用不是構(gòu)造器的對(duì)象或者變量來(lái)作為構(gòu)造器使用。比如：new 10。

  舉個(gè)栗子 → ????

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

處理辦法

使用正確的構(gòu)造函數(shù)。Generator functions 也不能作為構(gòu)造器來(lái)使用。

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

• SyntaxError: Invalid regular expression flags

  含義：正則表達(dá)式標(biāo)志無(wú)效

  為什么報(bào)錯(cuò)？

  在代碼中出現(xiàn)了無(wú)效的正則表達(dá)式的標(biāo)記。

  舉個(gè)栗子 → ????

let reg = /foo/bar; 

處理辦法

let reg = /foo/g;

• DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL

  含義：無(wú)效的Url

  為什么報(bào)錯(cuò)？
  在使用ajax 請(qǐng)求時(shí)url錯(cuò)誤，導(dǎo)致請(qǐng)求失敗。

  舉個(gè)栗子 → ????

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') // 錯(cuò)誤url
      createXHR('http:/192.168.10:8080/open') // 缺少 /,注：有些游覽器會(huì)自動(dòng)補(bǔ)全

處理辦法

檢查url 請(qǐng)求是否正確，保證請(qǐng)求路徑的完整。

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

異常調(diào)試及捕獲

• try/catch，Js中處理異常的一種模式，try用于可能會(huì)發(fā)生錯(cuò)誤的代碼，catch對(duì)錯(cuò)誤的處理

try{
      // 可能會(huì)導(dǎo)致錯(cuò)誤的代碼
    }catch(error) {
      // 錯(cuò)誤處理
    }

舉個(gè)栗子 → ????

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

• throw，用來(lái)拋出一個(gè)用戶自定義的異常，執(zhí)行將被停止。

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

• Promise 的異常處理,Promise執(zhí)行中，本身自帶try...catch的異常處理，出錯(cuò)時(shí)，將錯(cuò)誤Rejact函數(shù)。

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

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

let value = '你最棒了，點(diǎn)個(gè)贊唄！'
    console.log(value)

• debugger 斷點(diǎn)調(diào)試，用于停止執(zhí)行 JavaScript，并調(diào)用調(diào)試函數(shù)。

    let value = 15;
    debugger
    document.querySelector('body').innerHTML = '你最棒了，點(diǎn)個(gè)贊唄！'