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 相关文章推荐
本地对象Array的原型扩展实现代码
Dec 04 Javascript
网页右侧悬浮滚动在线qq客服代码示例
Apr 28 Javascript
jquery 实现两Select 标签项互调示例代码
Sep 25 Javascript
用js判断是否为360浏览器的实现代码
Jan 15 Javascript
JavaScript动态改变div属性的实现方法
Jul 22 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
Jun 17 Javascript
详解JavaScript的内置对象
Dec 07 Javascript
vue.js select下拉框绑定和取值方法
Mar 03 Javascript
完美解决axios在ie下的兼容性问题
Mar 05 Javascript
简单说说angular.json文件的使用
Oct 29 Javascript
ES6 async、await的基本使用方法示例
Jun 06 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
Jun 19 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
JS俄罗斯方块,包含完整的设计理念
2010/12/11 Javascript
jQuery ready函数滥用分析
2011/02/16 Javascript
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
2011/10/13 Javascript
JavaScript入门之事件、cookie、定时等
2011/10/21 Javascript
appendChild() 或 insertBefore()使用与区别介绍
2013/10/11 Javascript
调试代码导致IE出错的避免方法
2014/04/04 Javascript
javascript中 try catch用法
2015/08/16 Javascript
详解javascript数组去重问题
2015/11/06 Javascript
javascript实现获取浏览器版本、浏览器类型
2015/12/02 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
2016/08/25 Javascript
微信小程序 canvas API详解及实例代码
2016/10/08 Javascript
js中获取键盘事件的简单实现方法
2016/10/10 Javascript
Javascript动画效果(2)
2016/10/11 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
2016/11/26 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
2017/05/12 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
2017/05/17 Javascript
nodejs操作mongodb的增删改查功能实例
2017/11/09 NodeJs
微信小程序中如何使用flyio封装网络请求
2019/07/03 Javascript
Node.js API详解之 timer模块用法实例分析
2020/05/07 Javascript
浅析vue中的nextTick
2020/12/28 Vue.js
[01:01]青春无憾,一战成名——DOTA2全国高校联赛开启
2018/02/25 DOTA
python连接mysql数据库示例(做增删改操作)
2013/12/31 Python
Python实现方便使用的级联进度信息实例
2015/05/05 Python
python3写爬取B站视频弹幕功能
2017/12/22 Python
Python实现将json文件中向量写入Excel的方法
2018/03/26 Python
不知道这5种下划线的含义,你就不算真的会Python!
2018/10/09 Python
Python导入模块包原理及相关注意事项
2020/03/25 Python
TensorFlow实现批量归一化操作的示例
2020/04/22 Python
Flask中sqlalchemy模块的实例用法
2020/08/02 Python
class类在python中获取金融数据的实例方法
2020/12/10 Python
2014年大学生四年规划书范文
2014/04/03 职场文书
欢迎标语大全
2014/06/21 职场文书
班子成员四风问题自我剖析材料
2014/09/29 职场文书
计算机专业自荐信
2015/03/05 职场文书
返乡农民工证明
2015/06/24 职场文书
浅谈@Value和@Bean的执行顺序问题
2021/06/16 Java/Android