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

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. JVM总括二-垃圾回收：GC Roots、回收算法、回收器

    JVM总括二-垃圾回收:GC Roots.回收算法.回收器 目录:JVM总括:目录 一.判断对象是否存活 为了判断对象是否存活引入GC Roots,如果一个对象与GC Roots没有直接或间接的引用关 ...

  2. centos7 安装mysql5.7.20（yum方式）

    windows下安装mysql请访问:windows下mysql5.7.20安装(zip包方式) 一.安装过程 1.安装wget yum install wget 2.查找yum源名称 在mysql官 ...

  3. swoole和workerman

    作者:韩天峰链接:https://www.zhihu.com/question/47994137/answer/131700752来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注 ...

  4. Replace To Make Regular Bracket Sequence

    Replace To Make Regular Bracket Sequence You are given string s consists of opening and closing brac ...

  5. git 提交代码操作

    1.修改1分支后 git add git commint2.切换到本地分支git checkout local-5.0git remote update 更新远程仓库3.git pull origin ...

  6. C#事务提交

    using (System.Transactions.TransactionScope transcope = new System.Transactions.TransactionScope()) ...

  7. ssh多台主机之间不用密码远程

    二.多台服务器相互无密码访问 多台服务器相互无密码访问,与两台服务器单向无密码访问的原理是一样的,只不过由于是多台服务器之间相互无密码访问,不能象两台服务器无密码登录那样直接上传,步骤如下: 1.在需 ...

  8. python数据结构（二）------元组

    元组是不可变序列,因此,元组的操作非常简单,本文就简单介绍一下,并解释下元组存在的意义: 2.2.1 元组的创建 2.2.2 tuple函数 2.2.3 基本元组操作 2.2.4 元组存在的意义 2. ...

  9. 企业微信自建应用移动端动态获取li并给其事件问题总结

    前段时间一个项目增加企业微信移动端应用,其中几个小功能用到ul-li列表点击并获得相应数据: 开始用var lis=$('#ul li'); for(var=i;i<lis.length;i++ ...

  10. EC20指令测试

    cat /dev/ttyUSB2 & echo -e "AT+CGMM\r\n" >/dev/ttyUSB2   //输出模块型号 echo -e "AT+ ...