相信在实际项目中，你可能经常会看到类似下面的代码

  1. try {
  2.    //  尝试执行代码块
  3. }
  4. catch(err) {
  5.    //  捕获错误的代码块
  6. }
  7. finally {
  8.     //  结果如何都会执行的代码块
  9. }

　　简单来说上面的代码是用于处理代码中可能出现的错误信息

　　try{} 里的代码表示要执行的代码

　　catch{} 用于捕获 try{} 里代码执行时报的错误信息

　　finally{} 不管怎样都会执行的代码

　　下面我会列出一个实例，有时候文字描述不太直观，不便于理解，把相关代码敲一边，试着去理解，或许原先不明白的地方就迎刃而解了

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.  
  9.         <button id="btn">点我</button>
  10.         <p id="message"></p>
  11.  
  12.         <script>
  13.             var btn = document.getElementById("btn");
  14.             btn.addEventListener("click", clickMe);
  15.  
  16.             function clickMe() {
  17.                 var y = document.getElementById("message");
  18.  
  19.                 try{
  20.                     show();
  21.                 }
  22.                 catch(err){
  23.                     y.innerHTML = "错误：" + err;
  24.                 }
  25.             }
  26.  
  27. //            function show() {
  28. //                alert(1);
  29. //            }
  30.         </script>
  31.     </body>
  32. </html>

　　注：上面实例如下图，点击按钮以后执行 clickMe() 方法里的 show()方法，因为没有定义该方法，所以报错，提示该方法没有定义

　　

　　下面在通过一个实例介绍当 catch{} 捕获到错误信息，通过 throw 创建自定义消息的用法

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title></title>
  7.     </head>
  8.  
  9.     <body>
  10.         <p>请输入 5 和 10 之间的一个数:</p>
  11.  
  12.         <input type="text" id="data" value="" />
  13.  
  14.         <button id="btn">检查输入</button>
  15.  
  16.         <p id="message"></p>
  17.  
  18.         <script>
  19.             var btn = document.getElementById("btn");
  20.             btn.addEventListener("click", myFunction);
  21.  
  22.             function myFunction() {
  23.                 var data = document.getElementById("data").value;
  24.                 var message = document.getElementById("message");
  25.                 message.innerHTML = "";
  26.  
  27.                 try {
  28.                     if (data === 0) {
  29.                         throw "值不能为0";
  30.                     } else if (isNaN(data)) {
  31.                         throw "值不能为非数字";
  32.                     } else if (data < 5) {
  33.                         throw "值不能小于5";
  34.                     } else if (data > 10) {
  35.                         throw "值不能大于10";
  36.                     } else {
  37.                         throw "你输入的值没有问题";
  38.                     }
  39.                 }
  40.                 catch(err) {
  41.                     message.innerHTML = "输入的值：" + err;
  42.                 }
  43.             }
  44.         </script>
  45.     </body>
  46.  
  47. </html>

　　补充：

　　①：try 和 catch  （必须一起使用）

　　②：try 和 catch 和 throw  （如果要创建自定义消息，就需要一起使用）

　　③：try 和 catch 和 finally （finally不是必须的，可选的）

　　

2个简单实例让你快速理解try-catch的用法的更多相关文章

  1. 字符编码那点事：快速理解ASCII、Unicode、GBK和UTF-8

    原作者:阮一峰(ruanyifeng.com),现重新整理发布,感谢原作者的无私分享. 1.引言 今天中午,我突然想搞清楚 Unicode 和 UTF-8 之间的关系,就开始查资料. 这个问题比我想象 ...

  2. SignalR代理对象异常：Uncaught TypeError: Cannot read property 'client' of undefined 推出的结论 SignalR 简单示例 通过三个DEMO学会SignalR的三种实现方式 SignalR推送框架两个项目永久连接通讯使用 SignalR 集线器简单实例2 用SignalR创建实时永久长连接异步网络应用程序

    SignalR代理对象异常:Uncaught TypeError: Cannot read property 'client' of undefined 推出的结论   异常汇总:http://www ...

  3. 数据可视化之DAX篇（十六）如何快速理解一个复杂的DAX?这个方法告诉你

    https://zhuanlan.zhihu.com/p/64422393 经常有朋友提出一个问题,然后我给出一个DAX之后,TA又不是很理解,反复多次沟通才能把一个表达式讲清楚.或者TA自己写了一个 ...

  4. Hibernate(二)__简单实例入门

    首先我们进一步理解什么是对象关系映射模型? 它将对数据库中数据的处理转化为对对象的处理.如下图所示: 入门简单实例: hiberante 可以用在 j2se 项目,也可以用在 j2ee (web项目中 ...

  5. 【转】快速理解Kafka分布式消息队列框架

     from:http://blog.csdn.net/colorant/article/details/12081909 快速理解Kafka分布式消息队列框架 标签: kafkamessage que ...

  6. Docker初步认识安装和简单实例

    前话 问题 开发网站需要搭建服务器环境,FQ官网下载软件包,搭建配置nginx,apache,数据库等.官网没有直接可用的运行版本,担心网络流传的非官方发布软件包不安全还得自行编译官方源码安装,忘记步 ...

  7. 简单实例一步一步帮你搞清楚MVC3中的路由以及区域

    我们都知道MVC 3 程序的所有请求都是先经过路由解析然后分配到特定的Controller 以及 Action 中的,为什么这些知识讲完了Controller Action Model 后再讲呢?这个 ...

  8. Selenium 2.0 WebDriver 自动化测试 使用教程 实例教程 API快速参考

    Selenium 2.0 WebDriver 自动化测试 使用教程 实例教程 API快速参考 //System.setProperty("webdriver.firefox.bin" ...

  9. C++ 容器的综合应用的一个简单实例——文本查询程序

    C++ 容器的综合应用的一个简单实例——文本查询程序 [0. 需求] 最近在粗略学习<C++ Primer 4th>的容器内容,关联容器的章节末尾有个很不错的实例.通过实现一个简单的文本查 ...

随机推荐

  1. BFC是什么及能用它能做什么

    最近较为频繁的碰到了一个新的名词:BFc,每次都可以在相关的技术博客里面看到对其的简单介绍,刚开始以为自己懂了,但实际上没懂,今天就来搞清楚它到底是什么,以及我们能用他做什么? BFC:全名为 Blo ...

  2. HYSBZ 2743 (树状数组) 采花

    题目:这里 题意: 在2016年,佳媛姐姐刚刚学习了树,非常开心.现在他想解决这样一个问题:给定一颗有根树(根为1),有以下 两种操作:1. 标记操作:对某个结点打上标记(在最开始,只有结点1有标记, ...

  3. 图解Golang的GC算法

    虽然Golang的GC自打一开始,就被人所诟病,但是经过这么多年的发展,Golang的GC已经改善了非常多,变得非常优秀了. 以下是Golang GC算法的里程碑: v1.1 STW v1.3 Mar ...

  4. Google资深工程师深度讲解Go语言完整教程

    资源获取链接点击这里 欢迎大家来到深度讲解Go语言的课堂.本课程将从基本语法讲起,逐渐深入,帮助同学深度理解Go语言面向接口,函数式编程,错误处理,测试,并行计算等元素,并带领大家实现一个分布式爬虫的 ...

  5. Web性能和负载测试工具补充

    压力测试文档:https://yq.aliyun.com/articles/377543https://www.cnblogs.com/ahjxxy/archive/2012/09/17/268899 ...

  6. JAVA微信支付~

    1,简单说明 现在好多项目上都需要用到微信支付接口,官方文档上也是简单的描述了下,技术不高深的真的难以理解(我自己看官方文档就看不懂),还是需要自己收集,总结, 网上看了好多 有些照着弄最后还是没法成 ...

  7. 洛谷[LnOI2019]长脖子鹿省选模拟赛 简要题解

    传送门 听说比赛的时候T4T4T4标程锅了??? WTF换我时间我要写T3啊 于是在T4T4T4调半天无果的情况下260pts260pts260pts收场真的是tcltcltcl. T1 快速多项式变 ...

  8. FFMPEG增加和提取字幕流

    转自 https://www.cnblogs.com/satng/p/5514683.html 防抽复制一遍 增加字幕流ffmpeg -i video.avi -i sub.ass -map 0:0 ...

  9. Notes ： <Hands-on ML with Sklearn & TF> Chapter 3

    Chapter 3-Classification .caret, .dropup > .btn > .caret { border-top-color: #000 !important; ...

  10. python操作Redis安装、支持存储类型、普通连接、连接池

    一.python操作redis安装和支持存储类型 安装redis模块 pip3 install redis 二.Python操作Redis之普通连接 redis-py提供两个类Redis和Strict ...