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

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. java常用集合浅层解析-面试必备

    ArrayList 1.动态数组 2.线程不安全 3.存储空间连续 4.查询快,添加删除慢 构造方法 /** + Shared empty array instance used for defaul ...

  2. 2019新版UI设计面试题汇总（附答案）

    问题一.Android手机的常用设计尺寸有_________.怎么适配ios和安卓. 答案:安卓320 X 480是常规模拟器.但现在的开发都是用360x640做一倍率.480 X 800(1.5倍率 ...

  3. Vue.js 入门教程

    Vue.js 入门教程:https://cn.vuejs.org/v2/guide/index.html

  4. JSP 页面跳转的实现方法

    客户端跳转 1. 使用 href 超链接标记  <a href="new.jsp">跳转</a> 2. 使用表单提交完成跳转  <form actio ...

  5. Java 中12个原子操作类

    从JDK1.5 开始提供了 java.util.concurrent.atomic 包,该包提供了一种用法简单.性能高效.线程安全的更新一个变量的方法 原子更新基本类型类 AtomicBoolean: ...

  6. Workbench利用Python驱动DM执行Js进行建模

    Workbench的工作平台下可以利用Python进行一些操作,包括添加system和component等等.DM可以通过执行Jscript脚本进行自动建模,因此,结合这两块的内容,可以利用Pytho ...

  7. HTTP之请求消息Request

    客户端发送一个HTTP请求到服务器的请求消息包括以下格式: 请求行(request line).请求头部(header).空行和请求数据四个部分组成. 请求行以一个方法符号开头,以空格分开,后面跟着请 ...

  8. Appium+Python自动化 3 -获取 app 包名和 activity

    方法一: ①手机通过USB连接电脑 ②打开手机上被测app ③在电脑上 dos命令窗口,输入命令 adb shell dumpsys window w | findstr \/ | findstr n ...

  9. c语言基础课第一次作业

    1)大学和高中最大的不同是没有人天天看着你,请看大学理想的师生关系是?有何感想? 通过阅读邹欣老师的博客,了解到了老师心中理想的师生关系是(健身教练与健身学员).在初中,高中我们一直都是填鸭式教育,像 ...

  10. adb安装apk

    1.    安装配置 1.1安装包 下载adb.zip,解压至本机 1.2环境配置 将adb安装路径加入path中 2.    安装apk 使用数据线将Android手机与电脑连接,打开手机usb调试 ...