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

try {

   //  尝试执行代码块

}

catch(err) {

   //  捕获错误的代码块

}

finally {

    //  结果如何都会执行的代码块

}

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

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

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

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

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

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <button id="btn">点我</button>

        <p id="message"></p>

        <script>

            var btn = document.getElementById("btn");

            btn.addEventListener("click", clickMe);

            function clickMe() {

                var y = document.getElementById("message");

                try{

                    show();

                }

                catch(err){

                    y.innerHTML = "错误：" + err;

                }

            }

//            function show() {

//                alert(1);

//            }

        </script>

    </body>

</html>

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

　　

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

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <p>请输入 5 和 10 之间的一个数:</p>

        <input type="text" id="data" value="" />

        <button id="btn">检查输入</button>

        <p id="message"></p>

        <script>

            var btn = document.getElementById("btn");

            btn.addEventListener("click", myFunction);

            function myFunction() {

                var data = document.getElementById("data").value;

                var message = document.getElementById("message");

                message.innerHTML = "";

                try {

                    if (data === 0) {

                        throw "值不能为0";

                    } else if (isNaN(data)) {

                        throw "值不能为非数字";

                    } else if (data < 5) {

                        throw "值不能小于5";

                    } else if (data > 10) {

                        throw "值不能大于10";

                    } else {

                        throw "你输入的值没有问题";

                    }

                }

                catch(err) {

                    message.innerHTML = "输入的值：" + err;

                }

            }

        </script>

    </body>

</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. T-SQL流程控制语句

    文章目录 if else语句 简单case语句 搜索式case语句 while语句 if else语句 格式: IF 布尔表达式 BEGIN END ELSE BEGIN END 示例: DECLAR ...

  2. mysql读写分离——中间件ProxySQL的简介与配置

    mysql实现读写分离的方式 mysql 实现读写分离的方式有以下几种: 程序修改mysql操作,直接和数据库通信,简单快捷的读写分离和随机的方式实现的负载均衡,权限独立分配,需要开发人员协助. am ...

  3. final，finally，finalize

    final:可以修饰属性,可以修饰方法(方法不能被重写,可以继承),可以修饰类(该类不能被继承,不能产生子类) finally:无论什么情况,都会执行 finalize:垃圾回收时,调用此方法

  4. 问题：计算foldRight(1)(_-_) 与foldLeft(1)(_-_)值不一样

    List(1,2,3,4)问题:计算foldRight(1)(_-_) 与foldLeft(1)(_-_)值不一样首先看foldRight(1)(_-_)计算过程((( (1-1)-2)-3)-4) ...

  5. Linux环境下Redis集群实践

    环境:centos 7 一.编译及安装redis源码 源码地址:redis版本发布列表 cd redis-3.2.8 sudo make && make install 二.创建节点 ...

  6. 关于Idea里设置Terminal为Git/bin/bash.exe中文乱码的问题的终极解决方案

    1.这里如果设置为Git/git-bash.exe确实不会乱码,但是每次点Idea里的Terminal都会弹出一个单独的terminal窗口而非在idea子窗口里出现: 2.因此需要设置为Git/bi ...

  7. HTTP lab01 做一个简单的测试用 web页面

      做一个简单的测试用 web页面     1.安装httpd服务   yum install httpd   安装完httpd服务后,系统就自动生成了/var/www/html目录     创建一个 ...

  8. spring mvc 扩展 标签解析

    spring mvc 标签解析 InterceptorsBeanDefinitionParser http://www.cnblogs.com/fangjian0423/p/springMVC-int ...

  9. [Solution] JZOJ-5818 做运动

    [Solution] JZOJ-5818 做运动 Time Limits:2000ms Memory Limits:524288KB Description 一天,Y 君在测量体重的时候惊讶的发现,由 ...

  10. 2019/3/7 Java学习之多线程（基础）

    Java学习之多线程 讲到线程,就必须要懂得进程,进程是相当于一个程序的开始到结束,而线程是依赖于进程的,没有进程,就没有线程.线程也分主线程和子线程,当在主线程开启子线程时,主线程结束,而子线程还可 ...