JavaScript常见报错及处理方法

实际开发中，我们经常会遇到一些报错，有些错误可以定位到具体行，通过自己的开发经验就能够修复，而有些报错并不是那么容易搞定，熟悉JavaScript常见的报错有助于更加快速的优化自己的业务。今天，我们就来整理一下常见的错误类型吧。

常见的错误类型

• Error: Error是基类型，其他的错误类型都是继承自该类型。

• EvalError: 当函数eval()使用不正确的时候会抛出该错误，但是由于这个错误在不同浏览器中表现不一致，所以很少使用，也即很少遇到。

• RangeError：当设置的数值超出相应的范围触发。比如，new Array(-30)。

• ReferenceError：当引用一个不存在的变量时触发。比如：console.log(god)。

• SyntaxError：语法错误。比如if大括号没闭合。

• TypeError：类型错误，表示值的类型非预期类型时发生的错误。

• URIError： 使用encodeURI()或decodeURI()函数时，传入的URI格式不正确时报错。

1、RangeError: Maximum call stack size exceeded

超出了最大堆栈的大小就会报错，就好像一个教室里只有100个同学，你叫同学出来一下，(⊙o⊙)…就尴尬了。

在使用递归时会消耗大量堆栈，导致浏览器抛出错误，因为浏览器给分配的内存不是无限的:

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

如此无止境的递归调用，会持续消耗浏览器内存，这是不可以的。

解决办法

我们需要设定一个条件来终止程序的运行，不然猴年马月才是个头。

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

2、ReferenceError: "god" is not defined

当引用一个没有定义的变量时，就会抛出一个ReferenceError。当你使用变量的时候，这个变量必须要声明，或者你可以确保它在你当前的脚本或作用域 (scope) 中可用。例如：

// 变量未声明
console.log(student);
fn();

// 错误的作用域   
function sum() {
  let score1 = 20, score2 = 30;
  return score1 + score2;
}
console.log(score1);

解决办法

我们可以对变量使用 var|let|const 进行声明，或提升变量的作用域。

// 变量未声明
let student;
function fn() {};
console.log(student);
fn();

// 错误的作用域
let score1 = 20, score2 = 30;
function sum() {
   return score1 + score2;
}
console.log(score1);

3、SyntaxError: Identifier 'god' has already been declared

如果某个变量已经被声明，又使用let再次声明就会报错。例如：

// let 重复声明
let Tom = 1;
let Tom = 2;

// 在函数中参数已经出现，函数里使用let重新声明
function fn(arg) {
 let arg = []
}

4、SyntaxError: Invalid or unexpected token

代码中有非法的字符或缺少必要的标识符，比如减号 ( - ) 与连接符 ( – ) ，或者是英文双引号 ( " ) 与中文双引号 ( “ )。例如：

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

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

// 错配字符(使用中文引号字符)
let str3 = ‘string’;

这些错误看一眼可能无法被修复，记住对应的错误提示就很容易定位了。

5、SyntaxError: Unexpected end of input

意外的终止输入会造成这个报错，比如代码中的括号或者引号不匹配。编码时，括号应该成对出现。

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

// 缺少结束符号
(function () {
    console.log('哈哈哈');
}()

6、TypeError: Cannot read property 'god' of undefined

如果无法读取属性'god', 或无法设置属性'god'。访问或设置未定义(undefined)或null值的属性时会发生这种报错。

// undefined
let Tom = undefined;
Tom.id; // 读取
Tom.id = 123; // 设置

// null
let Tom = null; 
Tom.id  // 读取
Tom.id = 567 // 设置
null.filter(item=>item)

我们可以使用逻辑运算符&&来避免这种错误。

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

6、TypeError: 'god' is not a constructor

使用不是构造器的对象或者变量来作为构造器使用就会报错。

let Student = 1;
new Student();

7、SyntaxError: Invalid regular expression flags

正则表达式标志无效，代码中出现了无效的正则表达式的标记。

let reg = /tom/mick;

8、DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL

无效的url，在使用ajax 请求时url错误，导致请求失败。

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://127.0.0.1.8080') // 错误url
  createXHR('http:/127.0.0.1:8080/open') // 缺少 /

异常调试及捕获

try/catch，JavaScript中处理异常的一种模式，try用于可能会发生错误的代码，catch对错误的处理。

try{
  // 可能会导致错误的代码
}catch(error) {
  // 错误处理
}

Promise的异常处理，Promise执行中，本身自带try...catch的异常处理，出错时，将错误Rejact函数。

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

 欢迎关注公众号【前端技术驿站】，关注获取视频资源，共同学习！