JS宏进阶：常见报错与抛出异常

一、常见报错

在JavaScript开发中，遇到错误是常见的情况。了解如何识别和解决这些错误是提高开发效率和代码质量的重要部分。下面是对JavaScript错误的详细介绍，包括常见类型、原因及解决方法：

1、语法错误：（Syntax Error）

• 描述：代码中存在拼写错误或不符合JavaScript语法规则的地方。
• 示例：缺少分号、括号不匹配、关键字拼写错误。
• 解决方法：检查代码中的拼写和语法，使用代码编辑器的语法高亮和错误提示功能。

let a = 1+;

上述是一个语法错误示例，+好后面直接跟了个分号，会抛出语法错误，提示Unexprcted token ';'，如下图所示。

注意：WPS中的报错定位有问题，出现语法错误可能不在当前模块中，可能是在其他模块中。

2、引用错误：（ReferenceError）

• 描述：引用了不存在的变量或对象。
• 示例：mkdir(); 其中 mkdir 是一个未定义的方法。
• 解决方法：确保变量在使用前已定义，检查拼写错误。

效果图如下所示：

3、类型错误：（TypeError）

• 描述：对变量执行了不支持的操作，通常是由于类型不匹配。
• 示例：尝试调用一个不是函数的变量。
• 解决方法：检查变量的类型，确保操作与类型匹配。

效果图如下所示：

图中，a的类型是number而非function，然在console.log中尝试以函数的方式调用，因此出现类型错误：a is not a function 。

4、范围错误：（RangeError）

• 描述：数值超出了允许的范围。
• 示例：递归调用过深导致栈溢出。
• 解决方法：优化算法，避免过深的递归或过大的数值计算。

示例图如下所示：

上图是由于递归深度太深，导致栈溢出引发的范围错误，此外数据长度超出最大允许值也会引发范围错误。

注意：数组越界不报错，只会输出undefined

5、自定义报错

在JavaScript中，自定义错误可以帮助你更清晰地表达程序中发生的问题，并提供更多的上下文信息，从而更容易调试和维护代码。创建自定义错误通常涉及继承JavaScript内置的 Error 对象，并根据需要添加额外的属性或方法。

以下是一个创建和使用自定义错误的示例：

//自定义数组越界
class IndexError extends Error {
	constructor(message) {
		super(message);
        this.name = "数组越界";
	}
    
}


//在原型链中添加getItem方法，使用它获取数组中的元素更为安全
Array.prototype.getItem = function(index) {
	if(index < 0 || index >= this.length){
		 throw new IndexError(`Index out of bounds: ${index}`);
	}
	return this[index];
}

function main() {
	// 使用示例
	let arr = [1, 2, 3];
	console.log(arr.getItem(1)); // 输出: 2
	console.log(arr.getItem(5)); // 数组越界: Index out of bounds: 5
}

上述示例中，自定义一个名称为数组越界的异常，并在Array的原型链中添加getItem方法，使用它获取数组中的元素，若超出索引范围就会导致数组越界异常的发生。执行效果图如下所示：

二、抛出异常

抛出异常是指当程序遇到无法处理的错误情况时，主动中断程序的正常执行流程，并将错误信息以异常对象的形式传递给调用者。这样可以让调用者有机会捕获并处理这些异常，避免程序崩溃。示例语句如下所示：

throw new Error("异常");

其中的Error可以是TypeError、RangeError等。例如在数组Array的原型链中添加的getItem方法，其中就运用到了自定义的数组越界异常IndexError。

1、异常处理

异常处理通常通过try...catch...finally结构来实现。示例如下图所示

2、抛出异常使用场景

函数参数验证

function divide(a, b) {
    if (b === 0) {
        throw new Error("除数不能为0");
    }
    return a / b;
}

资源获取失败

function openFile(fileName) {
    if (!exists(fileName)) {
        throw new Error("找不到文件 " + fileName);
    }
}

业务逻辑错误

function processOrder(order) {
    if (order.status !== 'pending') {
        throw new Error("订单状态不正确");
    }
}

3、异常处理与最佳实践

避免过度捕获异常

尽量避免捕获所有的异常，除非明确知道如何处理它们。捕获过多的异常可能会掩盖实际问题，导致调试困难。

提供有意义的错误信息

抛出异常时，应该提供尽可能详细且有意义的错误信息，以便其他开发者或用户能够理解问题。

使用finally释放资源

在需要清理资源（如文件、数据库连接等）的场景中，应该使用finally确保资源的正确释放。

避免在finally中抛出异常

finally代码块中的异常会覆盖try或catch中的异常，可能导致原始错误信息丢失。因此，尽量避免在finally中抛出异常。

三、总结

在编写程序的过程中，遇到一些异常是难免的，而合理的抛出相关异常，可以使JavaScript程序更加健壮、易于维护和调试。