Javascript程序异常处理

这篇具有很好参考价值的文章主要介绍了Javascript程序异常处理。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

什么是异常,异常就是我们在编写Javascript程序时出现的一些错误,并会在控制台中抛出这个错误,出现异常其实并不是一件坏事,相对的呢它可以提醒我们开发人员哪里出现了错误,方便我们后续的修改,能让我们的代码更加的流畅丝滑的运行,如果你对程序异常还不了解,看完该篇会让你对异常有一个初步的了解,也能在出现异常时做出相应的处理。

目录

1.异常的分类

 2.异常的执行流程

 3.捕获异常

 4.手动抛出异常

 5.总结


1.异常的分类

在Javascript中,异常通常表现为一个对象,不同的对象表达了不同的异常类型,不同类型的异常对应着不同的错误。

异常类型 含义
SyntaxError   语法错误
ReferenceError 引用错误,使用了不存在的变量或函数
TypeError

类型错误,往往是使用了一个对象中不存在的成员 

RangeError 范围错误,通常在操作超出有效范围时发生,如数组访问超出边界
URIError URI错误,通常发生在encodeURI()或者decodeURI()等方法时给出无效的URI时发生
EvalError eval错误,通常在eval()函数中执行代码时发生错误
InternalError 内部错误,通常发生在Javascript引擎内部发生错误导致

举几个常见的错误类型的例子

1.语法错误

 const user = [name: 'zs', age: 18]

我上面的这段代码是一个很明显的语法错误,错把数组当成了对象来存储数据,这时候控制台就会报语法错误的提示

Javascript程序异常处理,前端,javascript,javascript,开发语言

 2.引用错误

 function get() {
      console.log(111);
    }
 set()

我这段代码定义了一个get()函数,但是我们调用的是set()方法,看控制台的报错信息

Javascript程序异常处理,前端,javascript,javascript,开发语言

 3.类型错误

let arr = { name: '111' }
arr.push(222)

 我这里定义了一个对象,但是后续调用了push()方法,这个方法只有数组才有的,所以此时就会报这个类型错误

Javascript程序异常处理,前端,javascript,javascript,开发语言

 其实呢,所有的错误都是以对象形式存在的,比如我们也可以自定义一个错误,并将其打印出来

    let err = new TypeError('arr.push is not a function')
    console.error(err);

控制台也会输出相应的错误

Javascript程序异常处理,前端,javascript,javascript,开发语言

 2.异常的执行流程

当代码在执行过程中遇到了错误,会发生什么事情?

1.自动创建对应的异常对象,抛出错误

2.程序终止运行,我们知道js代码是从上到下依次运行的,如果前面出现错误,后面的代码也就不会执行了

3.控制台会显示异常对象,异常对象中包含了二个信息:程序异常的类型和原因,以及会描述出程序异常出现的位置

看下面这个例子

   function A() {
      console.log('start A');
      B()
      console.log('end A');
    }
    function B() {
      console.log('start B');
      C()
      console.log('end B');
    }
    function C() {
      console.log('start C');
      let a;
      console.log(a.name); //这里会出现错误
    }
    A()
    console.log('程序执行完毕');

初步分析我们可以知道 a.name这是一个典型的类型错误,a并不像一个对象

控制台信息:

Javascript程序异常处理,前端,javascript,javascript,开发语言

 可以很清楚的看到代码并没有执行完就终止了,因为中途遇到了错误导致的

报错信息也很详细的告诉了我们程序出错的原因,以及它出现的位置,并且这个报错信息会将有关的成员全部牵扯进来,最终的错误原因是因为在C()函数中的第52行,间接原因是B()中调用了C(),A()中调用了B(),总路线中出现的错误在54行,很清楚的描述了错误信息。

 3.捕获异常

捕获异常说白了就是去捕获在代码运行时可能会发生错误的代码,然后对其做出一些处理,让我们的代码能够完全执行完,不至于报错后就停止运行了。

利用try catch捕获异常 

看下面的代码

try {
      console.log("try 开始");
      console.log(a.name); //这里会出现错误,进行捕获
      console.log("try 结束");
    } catch (err) {
      console.log("catch 开始");
      console.log(err.message); //错误提示
      console.log("catch 结束");
    } finally { //无论是否发生错误都会执行
      console.log("整个程序结束");
    }

这是运行结果

Javascript程序异常处理,前端,javascript,javascript,开发语言

 从结果我们就能看出来try catch的执行流程了,首先运行try中的代码,只要发生了错误就是捕获错误,运行catch中的代码,并能从err.message中捕获到错误信息,并且整个代码都可以执行完毕,并不是出现停止运行的情况。

 其实在绝大多数情况下我们是不需要捕获异常的,毕竟写好的代码怎么可能无缘无故报错呢,一般都是跟一些业务场景结合才会使用捕获异常

首先是我们提前就能预知某段代码会出现异常,比如网络请求,出现错误的情况,用户在断网的情况下

然后就是我们必须要确定出现异常后该做些什么事情,就比如用户断网了,我们捕获错误后应该提醒用户

 4.手动抛出异常

它的语法是这样的,错误的类型我们可以随便定义

    throw new TypeError('这是一个类型错误')

这是控制台的报错

Javascript程序异常处理,前端,javascript,javascript,开发语言

 什么时候会用到手动抛出错误

1.可以预知某段代码可能会发生错误

2.浏览器不会自动抛出该错误

3.该函数无法处理这个错误

下面是一个例子:

 //这是一个求和的函数
    function sum(a, b) {
      if (typeof a !== 'number' || typeof b !== 'number') {
        throw new TypeError('传入的参数必须是数字')
      }
      return a + b
    }
    let s = sum(1, '2')

这是一个求和的函数,并且我们规定传入的参数必须是整数,但是执行此函数浏览器并不会报错,这时候我们就可以手动的抛出这个错误来提醒开发者

Javascript程序异常处理,前端,javascript,javascript,开发语言

 5.总结

1.对于异常的知识,大概要知道基本的错误类型有哪些,这样在写代码,调试代码时能更快的找出程序的错误

2.要能够根据错误信息迅速的反应过来是什么错误,并能找到错误的代码行

3.要知道捕获异常的语法以及捕获异常的时机

4.会在适当的时机手动抛出错误

希望此文对你了解异常的知识能有所帮助文章来源地址https://www.toymoban.com/news/detail-606504.html

到了这里,关于Javascript程序异常处理的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 加油优惠价格计算-课后程序(JavaScript前端开发案例教程-黑马程序员编著-第2章-课后作业)

    一、案例描述 考核知识点 if 、 if…else 、if…else if…else 练习目标 掌握if单分支语句。 掌握if…else双分支语句 掌握if…else if…else多分支语句 需求分析 加油站,为了鼓励车主多加油,实行多加多优惠政策,具体优惠如下: 已知92号汽油,每升6元;如果大于等于20升,那么每

    2024年02月07日
    浏览(59)
  • 5 种JavaScript 中的高级异常处理方法

    目录 1.自定义异常 2.try-catch-finally 3.Promises  4.Async/await  5.window.onerror  结论         异常处理是任何编程语言的重要组成部分,JavaScript 也不例外。在本文中,我们将讨论在 JavaScript 中处理异常的5种高级技术。         JavaScript 允许开发人员通过从内置错误对象创建新

    2024年02月07日
    浏览(28)
  • 大型医院云HIS系统:采用前后端分离架构,前端由Angular语言、JavaScript开发;后端使用Java语言开发 融合B/S版电子病历系统

    一套医院云his系统源码 采用前后端分离架构,前端由Angular语言、JavaScript开发;后端使用Java语言开发。融合B/S版电子病历系统,支持电子病历四级,HIS与电子病历系统均拥有自主知识产权。 文末卡片获取联系! 基于云计算技术的B/S架构的医院管理系统(简称云HIS),采用前后

    2024年02月03日
    浏览(32)
  • 优雅而高效的JavaScript——try...catch语句(js异常处理)

    😁博主:小猫娃来啦 😁文章核心: 优雅而高效的JavaScript——try…catch语句 异常处理软件开发中扮演着至关重要的角色。无论是前端还是后端开发,JavaScript作为一种常用的编程语言,异常处理对于保证程序的健壮性和可靠性至关重要。下面将详细阐述异常处理的重要性,并

    2024年02月04日
    浏览(31)
  • JavaScript的try-catch-finally异常处理机制--详解

    JavaScript 提供了异常处理机制,通过 try-catch-finally 语句块来捕获和处理异常。以下是对该机制的详细解释和示例: 1. try 块: try 块用于包裹可能会产生异常的代码块。在 try 块内,您可以放置任何可能引发异常的代码。 2. catch 块: catch 块用于捕获和处理 try 块中抛出的异常。

    2024年02月11日
    浏览(43)
  • 【JavaScript】3.4 JavaScript在现代前端开发中的应用

    JavaScript 是现代前端开发的核心。无论是交互效果,还是复杂的前端应用,JavaScript 都发挥着关键作用。在本章节中,我们将探讨 JavaScript 在现代前端开发中的应用,包括如何使用 JavaScript 来处理用户交互、动态内容、前端路由、API 请求等。 JavaScript 是处理用户交互的主要工

    2024年02月04日
    浏览(38)
  • 前端开发——Javascript知识(介绍)

    目录 有关JavaScript的知识  JavaScript的优点   JavaScript的领域 JavaScript的组成 JavaScript的特点 第一个JavaScript程序 在 HTML 文档中嵌入 JavaScript 代码 在脚本文件中编写 JavaScript 代码 JavaScript内容  Html内容  JavaScript 代码执行顺序 JavaScript中的几个重要概念 标识符 保留字 区分

    2024年02月01日
    浏览(35)
  • 前端开发——JavaScript的条件语句

      世界不仅有黑,又或者白 世界而是一道精致的灰  ——Lungcen     目录 条件判断语句 if 语句 if else 语句 if else if else 语句  switch语句 break case 子句 default语句 while循环语句 do while循环语句 for循环语句 for 循环中的三个表达式 for 循环嵌套 for 循环变体——for in for 循环

    2023年04月21日
    浏览(30)
  • 快速认识,前端必学编程语言:JavaScript

    JavaScript是构建Web应用必学的一门编程语言,也是最受开发者欢迎的热门语言之一。所以,如果您还不知道JavaScript的用处、特点的话,赶紧补充一下这块基础知识。 JavaScript 是一种高级、单线程、垃圾收集、解释或即时编译、基于原型、多范式、动态语言,具有非阻塞事件循

    2024年02月05日
    浏览(35)
  • 【前端灵魂脚本语言JavaScript⑤】——JS中数组的使用

    🐚 作者: 阿伟 💂 个人主页: Flyme awei 🐋 希望大家多多支持😘一起进步呀! 💬 文章对你有帮助👉关注✨点赞👍收藏📂 第一种: var 数组名 = new Array(); 创建一个空数组 第二种: var arr2 = new Array(10); 创建一个定长为10的数组 第三种 var arr3 = new Array(a,b,c); 创建时直接指定元素值

    2023年04月08日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包