JavaScript 判断错误、查找错误、处理错误

在 JavaScript 开发与运行时，难免会遇到一些错误。首先，我们要知道报什么错误，也就是错误类型；其次，我们需要查找错误，找到引起错误的代码块；最后，一些关键代码要预防错误，以及处理错误。

1.JavaScript 判断错误

在 JavaScript 中，有多种内置错误类型，主要用于在运行时捕获和处理不同类型的错误。以下是 7 种一些常见的错误类型及其说明和示例：

1.1 Error

最基本的错误对象，当运行时错误产生时，Error 对象会被抛出。

throw new Error('这是一个普通错误'); //Uncaught Error: 这是一个普通错误

1.2 EvalError

eval() 函数会将传入的字符串当做 JavaScript 代码进行执行。与 eval() 函数有关。

throw new EvalError('Hello', 'someFile.js', 10); //Uncaught EvalError: Hello

1.3 RangeError

范围错误，数值变量或参数超出其有效范围，例：

let arr = new Array(-1); // Uncaught RangeError: Invalid array length

1.4 ReferenceError

引用错误，尚未初始化的变量被引用时发生的错误。例：

var a = b; //Uncaught ReferenceError: b is not defined

1.5 SyntaxError

语法错误，不符合语法的代码

var a = ;//Uncaught SyntaxError: Unexpected token ';'

1.6 TypeError

类型错误，变量或参数不属于有效类型，以下情况会抛出 TypeError：

• 传递给运算符的操作数或传递给函数的参数与预期的类型不兼容
• 尝试修改无法更改的值
• 尝试以不适当的方法使用一个值

//传递给运算符的操作数或传递给函数的参数与预期的类型不兼容
let c = 'hello';
let d = c * 2; // 实际上不会抛出TypeError，因为JavaScript会尝试进行类型转换
console.log(d); //NaN

// 尝试修改只读属性
const obj = Object.freeze({ name: 'simahe' });
obj.name = '18'; //Uncaught TypeError: Cannot assign to read only property 'name' of object '#<Object>'

//尝试以不适当的方法使用一个值
let notAFunction = 42;
notAFunction(); //  Uncaught TypeError: notAFunction is not a function

1.7 URIError

uri 错误，用来表示以一种错误的方式使用全局 URI 处理函数而产生的错误。

var url = decodeURIComponent('htt%s://developer.mozilla.org'); //Uncaught URIError: URI malformed

2.JavaScript 查找错误位置

查找和调试 JavaScript 中的错误可以通过多种工具和技术实现。以下是几个常用的方法和最佳实践，用于定位和解决 JavaScript 中的错误。

2.1 开发者工具-控制台Console

• 运行时错误查看：当 JavaScript 代码在浏览器中执行时，错误会在浏览器控制台Console中显示。Console会明确指出 7 种错误类型、错误信息以及错误发生的位置。
• 手动添加日志输出：在代码的关键位置添加console.log语句，可以输出变量的值、函数的执行状态等信息。通过查看这些日志，可以了解代码的执行流程，发现不符合预期的地方，从而帮助定位错误。

2.2 开发者工具-源代码Debugger

在浏览器的开发者工具中，可以在 JavaScript 代码中设置断点。断点会暂停代码的执行，使你可以查看此时变量的值、函数的调用栈等信息。 有 2 种方式可以设置debugger断点：

• 在编辑器代码中插入debugger
• 开发者工具-源代码面板-左键点击代码-设置debugger

function add(a, b) {
  let result = a * b;
  return result;
}
let x = 2;
let y = 3;
debugger; // 设置断点
let result = add(x, y);
console.log(result); //6

2.3 代码检查工具（ESLint）

使用代码检查工具（如 ESLint）可以在编写代码阶段发现潜在的错误。代码检查工具会检查代码的语法规范、代码风格以及一些常见的错误模式。

//使用eslint设置代码规则
rules: {
  eqeqeq: 'error', // 要求使用 === 和 !==
  'no-var': 'error', // 禁用var，用let和const代替
},
var b = 10;
console.log(a);

2.4 单元测试（Unit Testing）

编写单元测试用例,可以系统地检查代码的各个功能是否正确工作。常用的测试框架有 Jest、Mocha、 AVA等，使用单元测试可以针对特定代码，模拟各种输入、输出情况。如果测试用例失败，就可以根据错误信息来定位代码中的问题。

function sum(a, b) {
  return a + b;
}

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

3.JavaScript 处理错误

JavaScript 提供了多种机制来处理错误，这些机制能帮助你识别、捕获和处理程序中的异常情况。以下是 JavaScript 错误处理的主要方法和机制：

3.1 throw与try-catch-finally

• 1、使用 throw 语句抛出一个异常。throw expression;
• 2、在 try 块中放入可能抛出错误的代码，catch 块将捕获异常并执行相关处理。
• 3、finally块无论是否抛出异常都会执行。

let result = 0;
try {
  console.log(
    '首先执行 try 块中的代码，如果它抛出异常，则将执行 catch 块中的代码。'
  );
  const _array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
  _array.forEach((item) => {
    if (item === 5) {
      throw item; //**抛出错误**
    }
    console.log(item); //0,1,2,3,4
  });
} catch (e) {
  console.log('catch里面给e：' + e); //catch里面给e：5
  result = e;
} finally {
  console.log('finally 块中的代码退出之前始终被执行:' + result); //finally 块中的代码退出之前始终被执行:5
}
console.log(result); //等到我们想要的值5

3.2 promise 错误处理

在处理异步操作promise时，catch 方法可以捕获错误。

new Promise((resolve, reject) => {
  reject('test');
})
  .then(function () {
    console.log('promise');
  })
  .catch((err) => {
    console.error(err);
  });

3.3 async/await 错误处理

在使用 async/await 语法时，通常会使用 try-catch 来处理异步代码中的错误

async function fetchData() {
  try {
    let res = await fetch('url');
    if (!res.success) {
      throw new Error('error');
    }
    console.log(res.data);
  } catch (err) {
    console.error(err);
  }
}

3.4. 全局错误处理

可以通过 window.onerror , window.addEventListener('error', ...) 来捕获未处理的错误。

使用示例：

window.onerror = function (message, source, lineno, colno, error) {
  console.error(`捕获到错误: ${message}`);
  console.error(`来源: ${source}, 行号: ${lineno}, 列号: ${colno}`);
  console.error(error);
};

window.addEventListener('error', function (event) {
  console.error(event);
});

3.5 自定义错误类

可以通过扩展内置错误,创建自定义错误。

class ValidationError extends Error {
  constructor(message) {
    super(message);
    this.name = 'ValidationError';
  }
}

function validateInput(value) {
  if (!value) {
    throw new ValidationError('输入不能为空');
  }
}

try {
  validateInput('');
} catch (error) {
  if (error instanceof ValidationError) {
    console.error('验证错误:', error.message);
  } else {
    console.error('未知错误:', error.message);
  }
}

4 总结

JavaScript 的错误类型帮助开发者更好地调试和处理运行时异常。通过不同的错误类型，可以更准确地捕获和处理问题。我们在查找和调试错误的过程通常依赖于多种工具和方法结合使用。通过浏览器开发者工具、错误处理机制、eslint 工具、单元测试等，可以有效捕获、定位和解决问题。JavaScript 也提供了强大的错误处理机制，通过结合使用 try-catch、throw以及全局错误处理等，我们可以有效管理和处理代码中的错误。在构建健壮的应用程序时，良好的错误处理是不可或缺的。

点个关注：谢谢！