网站中怎么做图片的变换,制作网页小程序,宁波网站建设 熊掌号,内蒙古市最新新闻JavaScript青少年简明教程#xff1a;异常处理 在 JavaScript 中#xff0c;异常指的是程序执行过程中出现的错误或异常情况。这些错误可能导致程序无法正常执行#xff0c;甚至崩溃。ECMA-262规范了多种JavaScript错误类型#xff0c;这些类型都继承自Error基类。主要的错…JavaScript青少年简明教程异常处理 在 JavaScript 中异常指的是程序执行过程中出现的错误或异常情况。这些错误可能导致程序无法正常执行甚至崩溃。ECMA-262规范了多种JavaScript错误类型这些类型都继承自Error基类。主要的错误类型包括
Error这是所有错误的基类。
EvalError这个描述部分正确但需要注意的是在现代JavaScript中EvalError几乎不再被使用。eval()函数的错误通常会抛出其他类型的错误如SyntaxError。
SyntaxError当JavaScript代码不符合语法规则时抛出。
ReferenceError当引用一个未声明的变量时或者在变量声明之前访问块级作用域中的变量时抛出。
TypeError当操作数或参数的类型与预期不符时抛出。
URIError当使用全局URI处理函数时如果URI格式不正确会抛出此错误。
RangeError当数值变量或参数超出其有效范围时抛出。
此外开发者可以通过继承Error或其子类来创建自定义异常。 JavaScript 的异常处理机制通过 try...catch...finally 语句和 throw 语句提供了一种优雅的方式来捕获和处理运行时错误。
以下是关键点
try...catch 语句用于捕获和处理在 try 块中发生的异常。
finally 块无论是否发生异常都会执行用于清理资源或执行收尾工作。
throw 语句用于手动抛出异常可以抛出任意类型的异常。
自定义异常通过继承 Error 类可以创建自定义的异常类型。
try...catch...finally语句
语法
try { // 尝试执行的代码块 // 如果在尝试执行时发生异常控制将立即转到catch块 } catch (error) { // 当try块中发生异常时执行的代码块 // 可以在这里处理异常如记录错误或执行一些清理操作 } [finally { // 无论是否发生异常都会执行的代码块 // 通常用于执行清理操作如关闭文件或释放资源 }]
说明
try 块: 包含可能抛出异常的代码。 如果发生异常,执行会立即转到catch块。
catch 块: 捕获并处理try块中抛出的异常。 error参数包含异常信息。 catch块是可选的,但如果没有catch,则必须有finally。
finally 块: finally块是可选的。 无论是否发生异常都会执行。 通常用于清理资源。 throw 语句
throw 语句用于手动抛出异常可以抛出任意类型的异常如字符串、数字、对象等。
基本语法
throw expression;
throw 可以在任何地方使用但通常建议将可能抛出异常的代码包裹在 try-catch 块中以便适当处理异常。其中expression 可以是任何类型的值例如
字符串: 用于描述错误信息。
数字: 用于表示错误代码。
对象: 用于提供更详细的错误信息例如错误类型、错误位置等。
Error 对象: JavaScript 内置的 Error 对象可以用于创建自定义错误类型。 示例
function divide(a, b) {if (b 0) {throw new Error(除数不能为零);}return a / b;
}try {console.log(divide(10, 0));
} catch (error) {console.log(捕获到错误, error.message);
}下面给出几个例子。
例1限制HTML5输入框限制输入 0 到 100 之间的正整数不能带小数。
使用try-catch源码如下
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title整数输入验证/title
/head
bodyh1整数输入验证实时使用try-catch/h1label forintegerInput请输入一个 0 到 100 之间的正整数不能带小数/labelinput typetext idintegerInputp idintegerError/pscriptfunction validateInteger() {const input document.getElementById(integerInput);const error document.getElementById(integerError);const value input.value.trim();try {if (value ) throw new Error(请输入一个数值);// 检查是否只包含数字for (let i 0; i value.length; i) {if (value[i] 0 || value[i] 9) {throw new Error(输入的不是正整数请重新输入);}}const n parseInt(value, 10);// 检查是否为整数if (n.toString() ! value) throw new Error(输入的不是正整数请重新输入);// 检查范围if (n 0 || n 100) throw new Error(输入的正整数不在 0 到 100 之间请重新输入);error.textContent 输入正确;error.style.color green;} catch (e) {error.textContent e.message;error.style.color red;}}document.getElementById(integerInput).addEventListener(input, validateInteger);/script
/body
/html例2限制HTML5输入框请输入一个 0 到 100 之间的数值可带小数。
使用try-catch源码如下
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title浮点数输入验证/title
/head
bodyh1浮点数输入验证实时使用try-catch/h1label forfloatInput请输入一个 0 到 100 之间的数值可带小数/labelinput typetext idfloatInputp idfloatError/pscriptfunction validateFloat() {const input document.getElementById(floatInput);const error document.getElementById(floatError);const value input.value.trim();try {if (value ) throw new Error(请输入一个数值);// 检查是否为有效数值格式let dotCount 0;let isNegative false;for (let i 0; i value.length; i) {if (i 0 value[i] -) {isNegative true;continue;}if (value[i] .) {dotCount;if (dotCount 1) throw new Error(输入的不是有效的数值格式请重新输入);continue;}if (value[i] 0 || value[i] 9) {throw new Error(输入的不是有效的数值格式请重新输入);}}const num parseFloat(value);if (isNaN(num)) throw new Error(输入的不是有效的数值格式请重新输入);// 检查范围if (num 0 || num 100) throw new Error(输入的数值不在 0 到 100 之间请重新输入);error.textContent 输入正确;error.style.color green;} catch (e) {error.textContent e.message;error.style.color red;}}document.getElementById(floatInput).addEventListener(input, validateFloat);/script
/body
/html自定义异常
通过创建自定义错误类可以更具体地描述异常情况。所有自定义异常类应该继承自 Error 类。
示例
class CustomError extends Error {constructor(message) {super(message);this.name CustomError;// 可以添加自定义属性this.customProperty some value;}
}try {throw new CustomError(这是一个自定义错误);
} catch (error) {console.log(error.name); // 输出: CustomErrorconsole.log(error.message); // 输出: 这是一个自定义错误console.log(error.customProperty); // 输出: some value
}在 ES6 及以后的版本中自定义异常通常是通过创建类来实现的这是最常见和推荐的方式。 附录
JavaScript异常处理和调试 JavaScript异常处理和调试_js catch 异常栈-CSDN博客
流程控制与错误处理 - JavaScript | MDN (mozilla.org)
