前言
在 Web 应用程序开发中，异常处理是一个非常重要的话题。Web 应用程序会遇到各种各样的异常情况。 这些异常如果不能得到及时和正确的处理，将可能导致应用程序崩溃、出现意外行为，甚至造成安全漏洞。
本文作为异常处理的开篇，将主要介绍开发中常见的异常类型，非常简单，跟随我一起读下去！
1：关于错误类型
首先通过一行代码查看浏览器下都有哪些错误类型，你也可以试试
Object.getOwnPropertyNames(window).filter(err => err.endsWith ('Error'))
可以得到16种的Error类型
对于我们开发常见的有以下几种类型的错误
RangeErrorReferenceErrorSyntaxError（一般不需要我们处理）TypeError
1：常见错误类型介绍
1.1：RangeError
描述:
这类错误发生在试图使用超出有效范围的值时，比如创建长度为负数的数组、递归调用超出最大调用深度等。
例子：
RangeError对象标明一个错误，当一个值不在其所允许的范围或者集合中。
var arr = []
a.length = -1 // Uncaught RangeError: Invalid array length
避免方法:
- 在使用数组、字符串等数据结构时，先检查输入值是否在合理范围内。
- 设置合理的递归调用深度限制，避免无限递归。
- 使用
try-catch语句捕获和处理可能导致范围错误的操作。
1.2：ReferenceError
描述:
这类错误发生在试图访问一个未定义的变量时。
例子：
ReferenceError（引用错误）对象代表当一个不存在的变量被引用时发生的错误
1.2.1：变量没有被声明：
b.length // Uncaught ReferenceError: b is not defined
1.2.2：错误的作用域：
function numbers() {
var num1 = 2,
num2 = 3
return num1 + num2
}
console.log(num1); // ReferenceError num1 is not defined.
避免方法:
- 在变量声明之前，先检查变量是否已定义。
- 使用
const和let关键字声明变量，避免使用var而导致的变量提升问题。 - 使用
ESLint等代码检查工具，它们可以帮助您发现未定义的变量。
1.3：SyntaxError
描述:
这类错误通常发生在代码编写阶段，比如漏写分号、大小写错误、缺少括号等。这些错误会在代码运行前被浏览器捕获。
例子：
SyntaxError 对象代表尝试解析语法上不合法的代码的错误
var a b c // Uncaught SyntaxError: Unexpected identifier
避免方法:
- 使用代码编辑器或
IDE，它们通常会实时检查代码语法并提供错误提示。 - 在代码提交或部署前，仔细检查代码，确保没有语法错误。
- 使用
ESLint等代码检查工具，它们可以帮助您发现并纠正代码中的语法错误。
。
1.4：TypeError
描述:
这类错误通常发生在运行时,比如尝试访问 null 或 undefined 的属性、调用非函数对象等。这些错误可能会导致应用程序崩溃。
例子：
TypeError（类型错误）对象用来表示值的类型非预期类型时发生的错误。
// undefined and null cases on which the substring method won't work
var foo = undefined
foo.substring(1) // TypeError: foo is undefined
var foo = null
foo.substring(1) // TypeError: foo is null
// Certain methods might require a specific type
var foo = {}
Symbol.keyFor(foo) // TypeError: foo is not a symbol
var foo = 'bar'
Object.create(foo) // TypeError: "foo" is not an object or null
避免方法：
- 在访问对象属性或调用函数之前，先检查变量是否为
null或undefined。 - 使用
TypeScript或Flow等静态类型检查工具，它们可以在编译时发现类型错误。 - 编写单元测试，并覆盖各种可能的输入情况，以发现潜在的类型错误。
2：总结
其实前端异常是一个我们每天开发都会遇到的常见问题，作为开发者需要熟悉各种异常类型。 并学会合理处理它们。以确保应用程序的稳定性和可靠性。通过采取适当的预防措施，我们可以极大减少异常的发生。 从而构建出更加健壮和可靠的前端应用程序。
后面在异常处理的第二篇Part2中我们将继续探讨如何捕获错误。
