JavaScript条件判断_动力节点Java学院整理


Posted in Javascript onJune 26, 2017

JavaScript使用if () { ... } else { ... }来进行条件判断。例如,根据年龄显示不同内容,可以用if语句实现如下:

var age = 20;
if (age >= 18) { // 如果age >= 18为true,则执行if语句块
  alert('adult');
} else { // 否则执行else语句块
  alert('teenager');
}

其中else语句是可选的。如果语句块只包含一条语句,那么可以省略{}:

var age = 20;
if (age >= 18)
  alert('adult');
else
  alert('teenager');

省略{}的危险之处在于,如果后来想添加一些语句,却忘了写{},就改变了if...else...的语义,例如:

var age = 20;
if (age >= 18)
  alert('adult');
else
  console.log('age < 18'); // 添加一行日志
  alert('teenager'); // <- 这行语句已经不在else的控制范围了

上述代码的else子句实际上只负责执行console.log('age < 18');,原有的alert('teenager');已经不属于if...else...的控制范围了,它每次都会执行。

相反地,有{}的语句就不会出错:

var age = 20;
if (age >= 18) {
  alert('adult');
} else {
  console.log('age < 18');
  alert('teenager');
}

这就是为什么我们建议永远都要写上{}。

多行条件判断

如果还要更细致地判断条件,可以使用多个if...else...的组合:

var age = 3;
if (age >= 18) {
  alert('adult');
} else if (age >= 6) {
  alert('teenager');
} else {
  alert('kid');
}

上述多个if...else...的组合实际上相当于两层if...else...:

var age = 3;
if (age >= 18) {
  alert('adult');
} else {
  if (age >= 6) {
    alert('teenager');
  } else {
    alert('kid');
  }
}

但是我们通常把else if连写在一起,来增加可读性。这里的else略掉了{}是没有问题的,因为它只包含一个if语句。注意最后一个单独的else不要略掉{}。

请注意,if...else...语句的执行特点是二选一,在多个if...else...语句中,如果某个条件成立,则后续就不再继续判断了。

Javascript 相关文章推荐
javascript学习随笔(使用window和frame)的技巧
Mar 08 Javascript
js小技巧--自动隐藏红叉叉
Aug 13 Javascript
将页面table内容与样式另存成excel文件的方法
Aug 05 Javascript
使用impress.js制作幻灯片
Sep 09 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
Jun 12 Javascript
vue 注册组件的使用详解
May 05 Javascript
vue动态设置img的src路径实例
Sep 18 Javascript
angularjs1.5 组件内用函数向外传值的实例
Sep 30 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
Aug 07 Javascript
vue服务端渲染操作简单入门实例分析
Aug 28 Javascript
JavaScript运动原理基础知识详解
Apr 02 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
Aug 25 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
Jun 26 #Javascript
JavaScript简介_动力节点Java学院整理
Jun 26 #Javascript
JavaScript数组_动力节点Java学院整理
Jun 26 #Javascript
Angular 表单控件示例代码
Jun 26 #Javascript
jQuery实现一个简单的验证码功能
Jun 26 #jQuery
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 #jQuery
JavaScript实现三级联动菜单实例代码
Jun 26 #Javascript
You might like
PHP会员找回密码功能的简单实现
2016/09/05 PHP
PHP中CheckBox多选框上传失败的代码写法
2017/02/13 PHP
PHP 返回数组后处理方法(开户成功后弹窗提示)
2017/07/03 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
Laravel5.0+框架邮件发送功能实现方法图文与实例详解
2019/04/23 PHP
PHP创建XML的方法示例【基于DOMDocument类及SimpleXMLElement类】
2019/09/10 PHP
JS解密入门之凭直觉解
2008/06/25 Javascript
Html中JS脚本执行顺序简单举例说明
2010/06/19 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
2014/09/10 Javascript
jQuery中使用each处理json数据
2015/04/23 Javascript
Jquery为DIV添加click事件的简单实例
2016/06/02 Javascript
AngularJS基础 ng-keyup 指令简单示例
2016/08/02 Javascript
jQuery中show与hide方法用法示例
2016/09/16 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
2016/09/28 Javascript
ajax的分页查询示例(不刷新页面)
2017/01/11 Javascript
Vue.js事件处理器与表单控件绑定详解
2017/03/20 Javascript
webpack2.0搭建前端项目的教程详解
2017/04/05 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
2017/07/10 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
2017/07/10 Javascript
JS+Canvas绘制动态时钟效果
2017/11/10 Javascript
js回文数的4种判断方法示例
2019/06/04 Javascript
layui实现根据table数据判断按钮显示情况的方法
2019/09/26 Javascript
Nodejs文件上传、监听上传进度的代码
2020/03/27 NodeJs
[58:37]Serenity vs Fnatic 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python模拟登陆阿里妈妈生成商品推广链接
2014/04/03 Python
Python 比较文本相似性的方法(difflib,Levenshtein)
2018/10/15 Python
Django利用cookie保存用户登录信息的简单实现方法
2019/05/27 Python
Django模型序列化返回自然主键值示例代码
2019/06/12 Python
Numpy ndarray 多维数组对象的使用
2021/02/10 Python
解决TensorFlow训练模型及保存数量限制的问题
2021/03/03 Python
请说出几个常用的异常类
2013/01/08 面试题
2014年银行员工年终自我评价
2014/09/19 职场文书
鸦片战争观后感
2015/06/09 职场文书
JS代码编译器Monaco使用方法
2021/06/11 Javascript
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS
linux目录管理方法介绍
2022/06/01 Servers