JavaScript 中程序异常处理的方法，提升代码运行的健壮性

异常处理是指预估代码执行过程中可能发生的错误，然后最大程度的避免错误的发生导致整个程序无法继续运行 ，下面分享在工作过程中用到的三种排查代码错误和异常情况交互的方法：

1.throw抛错

1. throw 抛出异常信息，程序也会终止执行
2. throw 后面跟的是错误提示信息
3. Error 对象配合 throw 使用，能够设置更详细的错误信息

代码示例：

<script>
  function counter(x, y) {

    if(!x || !y) {
      // throw '参数不能为空!';
      throw new Error('参数不能为空!')
    }

    return x + y
  }

  counter()
</script>

2.try ... catch，处理正常情况和报错情况的反馈

1. try...catch 用于区分成功情况和错误情况，并可以捕获错误信息
2. 将预估可能发生错误的代码写在 try 代码段中
3. 如果 try 代码段中出现错误后，会执行 catch 代码段，并截获到错误信息

示例代码：

<script>
   function foo() {
      try {
        // 查找 DOM 节点
        const p = document.querySelector('.p')
        p.style.color = 'red'
      } catch (error) {
        // try 代码段中执行有错误时，会执行 catch 代码段
        // 查看错误信息
        console.log(error.message)
        // 终止代码继续执行
        return

      }
      finally {
          alert('执行')
      }
      console.log('如果出现错误，我的语句不会执行')
    }
    foo()
</script>

3.debugger断点调试

在代码中需要打断点的地方，加上 debugger，表示一个断点。浏览器代码执行到该位置时，会停下来，进入调试模式

function a() {
  let a_var = 'a';
  b(a_var);
}

function b(a_var_from_a) {
  debugger;
  console.log(global_var);
  let b_var = 'b';
  c();
}

function c() {
  let c_var = 'c';
}

let module_var = 'module';
var global_var = 'global';

a();

整体就是调用 a，然后 a 调用 b，b 调用 c，然后有各种作用域的变量。

记得打开开发者工具面板，没打开的话，debugger 会静默失败。

下面是断点后的样子：

现在是 a 函数调用了 b 函数，b 函数调用的时候用 debugger 加了个断点，于是我们就停在这里了。

此时上下文状态和调用站会保留着，方便我们排查是什么分支导致变量状态错误，比如一个错误的条件判断，让一个为 null 的变量没能变成一个普通对象，导致访问它的属性报错。

以上就是本人工作中常用的发现错误和异常处理的三种方法，欢迎小伙伴们分享更多好用的方法！