浏览器控制台报错，你真的看懂了吗？

「这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战」

在我们日常开发中，报错是最常见的事情了。有些错误很容易处理，也有一些错误困扰我们很久，最后究其原因竟是单词拼写错误，这更会让我们懊恼不已。了解控制台的报错信息，可以帮助我们更快更准确的定位错误，从而解决问题。

常见错误分类

错误类型	报错说明
TypeError	类型错误
ReferenceError	引用错误
SyntaxError	语法错误
RangeError	超出范围

介绍完常见的错误分类，下面我们对每个错误进行详细的举例说明

TypeError

数据类型不正确的错误

let b = 'xxx';
b();//Uncaught TypeError: b is not a function

很明显,我们声明了一个'xxx'的字符串,但是却当做函数调用，所以报了一个TypeError类型错误

ReferenceError

引用的数据不存在错误

   console.log(a);//Uncaught ReferenceError: a is not defined

我们在控制台直接输出a，由于a变量并没有声明，所以报了一个ReferenceError引用错误

SyntaxError

语法错误

consoe(a) //Uncaught ReferenceError: consoe is not defined

这个报错就比较简单了，由于我们把coonsole拼写错误，控制台会报一个SyntaxError语法错误，这类错误是最好解决的，一般也会在编辑器中会显示红色的波浪线给你提示

RangeError

超出最大调用栈错误

function test(){
    test()
  }
 test() //Uncaught RangeError: Maximum call stack size exceeded

上面代码调用后是个死循环，所以报错超出最大调用栈RangeError

错误处理

我们现在已经了解js的常见错误，下面我们就需要处理这些错误。因为js是单线程的，当代码报错后你不去处理，那么后面的程序就不会执行，就像下面的例子:

    console.log(a);
    console.log(123);

这里介绍2个常用的处理错误的方法

1.捕获错误 try...catch

2.抛出错误 throw error

try...catch

    //语法
    try{
       //有可能出错的代码
    }catch(error){
       //对错误进行处理
    }

首先上图中的报错信息Uncaught xxx,Uncaught译为未捕获的，说明次错误虽然报了，但是并没有被处理，如果我们想让123正常输出，我们可以这样写:

   try{
      console.log(a);
   }catch(error){
      console.log(error);
   }
   console.log(123);

可以看到，我们捕获到了错误，在控制台上并没有报红，也没有了Uncaught提示。后面的123也正常输出

throw error

上面的例子都是被动的报错，我们需要提前预防并处理它。当然我们也可以主动的抛出错误，这里就用到了throw这个语句。throw语句用来抛出一个用户自定义的异常。当前函数的执行将被停止（throw之后的语句将不会执行），并且控制将被传递到调用堆栈中的第一个catch块。如果调用者函数中没有catch块，程序将会终止。我们举个例子来说明:

 function test(boolean) {
    if (boolean) {
      console.log('参数为true')
    } else {
      throw new Error('错误！参数为false') //new Error()需传入一个报错文本
    }
  }
  // 抛出错误一般要与捕获错误一起使用,因为throw之后的语句都不会执行
  try {
    test(0)
  } catch (err) {
    console.log(err)
  }

有关js中的报错信息大概就这么多内容，有其他需要补充的也欢迎大家留言讨论！