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

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. Git上传代码的步骤

    1.git status 列出来所有修改的文件2.git add 所有的文件列表,或者git add -A,添加所有文件到Add列表 3.git reset --hard 取最新的git标签 4.gi ...

  2. HDU2034

    #include <bits/stdc++.h> using namespace std; int main() { int n,m,val; set<int>::iterat ...

  3. filebeat 收集的进度日志查看

    filebeat 收集的日志进度和文件在data 目录中是有保存的 默认路径地址: /usr/share/filebeat/data 里面有两个文件: meta.json:{"uuid&qu ...

  4. hbase_基本命令

    hbase 区分大小写. 1) create '表名','列族名'  --多个列族名用逗号分隔 2)  list  desc(查询表名详细信息) 3)  put '表名','行健','列族:列名',' ...

  5. poj 3126 Prime Path bfs

    题目链接:http://poj.org/problem?id=3126 Prime Path Time Limit: 1000MS   Memory Limit: 65536K Total Submi ...

  6. 如何实现Activiti的分支条件的自定义配置(转)

    如何实现Activiti的分支条件的自定义配置 博客分类: Activiti Java SaaS   一.Activiti的流程分支条件的局限 Activiti的流程分支条件目前是采用脚本判断方式,并 ...

  7. 【Linux】vim的使用

    使用vi和vim的原因:linux很多软件默认调用vi进行编辑,因此有必要熟悉它的使用规则 vi: 打开文件: vi 文件名 [一般模式]打开文件时进入一般模式,这个模式下的操作: 上下左右移动光标 ...

  8. k8s初始化搭建方法

    http://www.cnblogs.com/cocowool/p/kubeadm_install_kubernetes.html https://www.kubernetes.org.cn/doc- ...

  9. Mybatis MapperScannerConfigurer 自动扫描 将Mapper接口生成代理注入到Spring

    Mybatis MapperScannerConfigurer 自动扫描 将Mapper接口生成代理注入到Spring 非原创[只为记录],原博文地址:https://www.cnblogs.com/ ...

  10. MySQL PROFILE 跟踪语句各阶段性能开销

    PROFILE  可以跟踪查询语句各个阶段 Time,IO,CPU,MEMORY 等资源使用情况,比较详细.所以系统一般不会记录太多.启用是全局的,所以每个连接都保持语句的资源使用情况. 查看 PRO ...