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

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. selenium启动谷歌浏览器

    谷歌浏览器可以是任意版本. 根据谷歌浏览器的版本,下载响应的浏览器驱动(百度:谷歌驱动与谷歌浏览器版本映射表). 我用的是win7 ,下载win32就行了.下载解压之后可以放在python的安装目录下 ...

  2. echart 图例

    说明:stack相同,两个bar合并但是不会重叠 如果需要重叠 用barGap: '-100%', 根据不同的需求来使用两者. <template> <div> echart ...

  3. oracle数据导出以及导入

    导出 1.服务器上mkdir创建一个真实目录/home/oracle/dump 2.sqlplus /nolog 3.conn /as sysdba; 4.SQL> create directo ...

  4. ConcurrentQueue并发队列

    表示线程安全的先进先出 (FIFO) 集合 System.Collections.Concurrent 命名空间提供多个线程安全集合类.当有多个线程并发访问集合时,应使用这些类代替 System.Co ...

  5. vue.js中axios的封装

    基于前文所述,axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它有很多优秀的特性,例如拦截请求和响应.取消请求.转换json.客户端防御XSRF等. 如果还对a ...

  6. 关于canvas补充说明

    上篇文章提到的canvas画布,用到f2组件,组件地址https://gw.alipayobjects.com/os/antv/assets/f2/3.0.0/f2.js或利用npm下载:npm in ...

  7. 高速上手C++11 14 笔记1

    1 constexpr constexpr关键字可以让已经具备常量返回的函数运用于常量的位置. c++14起可以在函数内部使用局部变量.循环和分支等简单语句. 2 委托构造&继承构造 委托构造 ...

  8. C++入门

    <完美C++>第5版 (美)Walter Savitch,Kenrick Mock 萨维奇//默克 著  薛正华,沈庚,韦远科 译    出版社: 电子工业出版社 时间2019/4/11- ...

  9. Document.write和 getElementById(ID)

    在javascript中,document.write()方法:常用来网页向文档中输出内容. 示例:通过document.write()方法,向网页文档中输出了一段文字. document.write ...

  10. Vue下载页面显示内容

    摘抄自 https://www.cnblogs.com/zhangtianqi520/p/9323873.html 先下载所需依赖 npm install --save html2canvas npm ...