javascript if条件判断方法小结


Posted in Javascript onMay 17, 2014

条件语句用于基于不同的条件来执行不同的动作。

条件语句

通常在写代码时,您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。

在 JavaScript 中,我们可使用以下条件语句:

•if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码
•if...else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码
•if...else if....else 语句 - 使用该语句来选择多个代码块之一来执行
•switch 语句 - 使用该语句来选择多个代码块之一来执行

If 语句

只有当指定条件为 true 时,该语句才会执行代码。

语法

if (条件)
  {
  只有当条件为 true 时执行的代码
  }

注意:请使用小写的 if。使用大写字母(IF)会生成 JavaScript 错误!

实例
当时间小于 20:00 时,生成一个“Good day”问候:

if (time<20)
  {
  x="Good day";
  }

x 的结果是:

Good day

亲自试一试

请注意,在这个语法中,没有 ..else..。您已经告诉浏览器只有在指定条件为 true 时才执行代码。
If...else 语句
请使用 if....else 语句在条件为 true 时执行代码,在条件为 false 时执行其他代码。

语法

if (条件)
  {
  当条件为 true 时执行的代码
  }
else
  {
  当条件不为 true 时执行的代码
  }
 

实例
当时间小于 20:00 时,将得到问候 "Good day",否则将得到问候 "Good evening"。

if (time<20)
  {
  x="Good day";
  }
else
  {
  x="Good evening";
  }
 

x 的结果是:

Good day

亲自试一试
If...else if...else 语句
使用 if....else if...else 语句来选择多个代码块之一来执行。

语法

if (条件 1)
  {
  当条件 1 为 true 时执行的代码
  }
else if (条件 2)
  {
  当条件 2 为 true 时执行的代码
  }
else
  {
  当条件 1 和 条件 2 都不为 true 时执行的代码
  }

实例
如果时间小于 10:00,则将发送问候 "Good morning",否则如果时间小于 20:00,则发送问候 "Good day",否则发送问候 "Good evening":
if (time<10)
  {
  x="Good morning";
  }
else if (time<20)
  {
  x="Good day";
  }
else
  {
  x="Good evening";
  }

x 的结果是:

Good morning

在javascript中,哪些值能作为if的条件呢

1、布尔变量true/false
2、数字非0,非NaN/ (0 或NaN)

见下面的例子,莫以为负数就以为if语句为假了。

var i = -1;
if(i){
 alert('here');
}else{
 alert('test is ok!');
}

3、对象非null/(null或undefined)
4、字符串非空串(“”)/空串("")

综上所述,对于字符串,不用写一大堆if(str!=null && str!=undefined && str !=''), 只要用一句

if(!str){
    //do something
}

就可以了。

对于数字的非空判断,则要考虑使用isNaN()函数,NaN不和任何类型数据相等,包括它本身,只能用isNaN()判断。对于数字类型,if(a)语句中的a为0时if(a)为假,非0时if(a)为真

var b;
var a = 0;
a = a + b;
if(a){
 alert('1');
}else{
 alert('2');
}
if(isNaN(a)){
 alert('a is NaN');
}

javascript教程:关于if语句优化的方法 if简写

UglifyJS是一个对javascript进行压缩和美化的工具,在它的文档说明中,我看到了几种关于if语句优化的方法。尽管我还没使用它去做一些尝试性的测试,但从这里可以看到它的确对js作了美化的工作。也许有人认为if语句就那么简单,能优化到什么程度?但是看看以下的几种方式,你也许会改变看法。

一、使用常见的三元操作符

if (foo) bar(); else baz(); ==> foo?bar():baz();
if (!foo) bar(); else baz(); ==> foo?baz():bar();
if (foo) return bar(); else return baz(); ==> return foo?bar():baz();

对于以上使用三元操作符来优化if语句你肯定不会陌生,或许你经常使用它。

三水点靠木给出的例子:

<script>
var i=9
var ii=(i>8)?100:9;
alert(ii);
</script>

输出结果:

100

二、使用and(&&)和or(||)运算符

if (foo) bar(); ==> foo&&bar();
if (!foo) bar(); ==> foo||bar();

老实说,我并没有这样去写过代码,这种写法我在学习《鸟哥的 Linux 私房菜》时看到过,但我并没想到在js中实现它。

三、省略大括号{}

if (foo) return bar(); else something(); ==> {if(foo)return bar();something()}

这种写法你我都很熟悉,但我建议在代码优化的时候这样做,或者交给UglifyJS帮你去解决。毕竟少一个大括号,代码的可阅读性并不高。

写到这里,我想到jQuery之父在《精通 JavaScript》中的一个获取HTML元素属性的方法。

function getAttr(el, attrName){
var attr = {'for':'htmlFor', 'class':'className'}[attrName] || attrName;
};

如果我们不这样写,可能我们需借助于两个if语句来进行处理,而上面的代码不仅简洁有效,而且可阅读性强。

仔细想想,好些时候我们都能找到解决问题的有效途径,但关键在于我们是否用心去寻找一种更好的途径。

【javascript技巧】if(x==null)简写

if(x==null)或if (typeof (x) == 'undefined')可以简写为if(!x),未验证。

反之if(x)表示x非空

判断对象是否存在

if(document.form1.softurl9){
//判断是否存在softurl9,防止js出错
}
if(document.getElementById("softurl9")){
//判断是否存在softurl9,防止js出错
}
Javascript 相关文章推荐
如何从jQuery的ajax请求中删除X-Requested-With
Dec 11 Javascript
jQuery判断checkbox选中状态
May 12 Javascript
手机图片预览插件photoswipe.js使用总结
Aug 25 Javascript
D3.js实现散点图和气泡图的方法详解
Sep 21 Javascript
js 点击a标签 获取a的自定义属性方法
Nov 21 Javascript
原生js实现轮播图
Feb 27 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
Mar 10 Javascript
解决VUEX兼容IE上的报错问题
Mar 01 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
Dec 05 Javascript
layui 实现自动选择radio单选框(checked)的方法
Sep 03 Javascript
详解vue中$nextTick和$forceUpdate的用法
Dec 11 Javascript
小程序双头slider选择器的实现示例
Mar 31 Javascript
js加减乘除丢失精度问题解决方法
May 16 #Javascript
js脚本获取webform服务器控件的方法
May 16 #Javascript
js加入收藏夹代码(兼容ie/ff/op)
May 16 #Javascript
javascript生成随机数的方法
May 16 #Javascript
从零学jquery之如何使用回调函数
May 16 #Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
May 16 #Javascript
Jquery倒计时源码分享
May 16 #Javascript
You might like
使用sockets:从新闻组中获取文章(一)
2006/10/09 PHP
php实例分享之通过递归实现删除目录下的所有文件详解
2014/05/15 PHP
PHP优化之批量操作MySQL实例分析
2020/04/23 PHP
TP - 比RBAC更好的权限认证方式(Auth类认证)
2021/03/09 PHP
Javascript全局变量var与不var的区别深入解析
2013/12/09 Javascript
JavaScript中伪协议 javascript:使用探讨
2014/07/18 Javascript
一个很有趣3D球状标签云兼容IE8
2014/08/22 Javascript
JavaScript取得键盘按下方向键是哪个的方法
2015/08/04 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
2015/08/21 Javascript
JS常用算法实现代码
2016/11/14 Javascript
Bootstrap导航条鼠标悬停下拉菜单
2017/01/04 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
2017/01/04 Javascript
详解vue express启动数据服务
2017/07/05 Javascript
js实现水平滚动菜单导航
2017/07/21 Javascript
给localStorage设置一个过期时间的方法分享
2018/11/06 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
2019/11/13 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
2020/06/05 Javascript
详解Python2.x中对Unicode编码的使用
2015/04/03 Python
python中ASCII码和字符的转换方法
2018/07/09 Python
python pandas消除空值和空格以及 Nan数据替换方法
2018/10/30 Python
python读取几个G的csv文件方法
2019/01/07 Python
python基于TCP实现的文件下载器功能案例
2019/12/10 Python
tensorflow 分类损失函数使用小记
2020/02/18 Python
意大利高端时尚买手店:Stefania Mode
2018/03/01 全球购物
澳大利亚购买健身器材网站:Gym Direct
2019/12/19 全球购物
MIKI HOUSE美国官方网上商店:日本领先的婴儿和儿童高级时装品牌
2020/06/21 全球购物
新西兰最大、占有率最高的综合性药房:PharmacyDirect药房中文网
2020/11/03 全球购物
彩色的非洲教学反思
2014/02/18 职场文书
文明村镇申报材料
2014/05/06 职场文书
销售顾问工作计划书
2014/08/15 职场文书
党旗在我心中演讲稿
2014/09/15 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
运动会宣传稿50字
2015/07/23 职场文书
PHP判断是否是json字符串
2021/04/01 PHP
如何理解Vue前后端数据交互与显示
2021/05/10 Vue.js
vue.js Router中嵌套路由的实用示例
2021/06/27 Vue.js