js中的条件判断方法总结

js中我们可以使用以下语句：

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

（1）if语句：只有当指定条件为 true 时，该语句才会执行代码。

代码块：

if(条件){
    //只有当指定条件为true时，该语句才会执行代码            
}

实例：

window.onload=function (){
    var oA1=document.getElementById("a1");
    var oA2=document.getElementById("a2");
    var op=document.getElementById("p1");
    var num=15;

    oA1.onclick=function (){
        if(num>12){  //当满足num>12时，执行以下代码
            num--;
            op.style.fontSize=num+"px";  //这里需要注意js中不允许出现“-”;所以font-size需要写成fontSize
        }
    }
    oA2.onclick=function (){
        if(num<22){  //当满足num<22时，执行以下代码
            num++;
            op.style.fontSize=num+"px";  //这里需要注意js中不允许出现“-”;所以font-size需要写成fontSize
        }
    }
}

HTML部分：

<div class="box">
    <a href="javascript:;" id="a1">-</a>
    <a href="javascript:;" id="a2">+</a>
    <p id="p1">
        大会由人民邮电出版社主办，中国电信、中国移动、中国联通、信息通信大数据产业联盟支持，通信世界全媒体平台、
        物联网学报、万物互联产业联盟(GIA联盟)协办，信通传媒、信通创展科技承办，围绕物联网相关政策、平台规划与建
        设、网络安全、NB-IoT等新技术的发展及其在垂直领域的创新应用，700多位业界人士群策群力，共促物联网产业创新
        发展。大会同期还表彰了通信物联网行业优秀个人、企业和产品技术，宣传行业先进典型，发挥先进典型的示范作用，
        引领行业健康发展。
    </p>
</div>

（2）if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码：

代码块：

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

实例：下面这个例子有两处用到了if(){}else{}，分别是：

（1）定义一个变量i；当i为偶数的时候表情的路径为img/1.png，否则的话路径为img/2.png；

（2）当输入框内容为空时，弹出请输入内容！！！对话框，否则的话执行oDiv.innerHTML+="<img src='"+imgSrc+"' />"+oText.value+"<br />"; oText.value="";

<div class="box" id="div1"></div>
<div class="con">
    <img src="img/1.png" id="img1" />
    <input type="text" id="text1" />
    <input type="submit" value="按钮" id="btn" />
</div>

//属性读操作：获取、找到
//元素.属性名

/*
 *属性写操作：替换、修改
 * 元素.属性名="新的值";
 */

//innerHTML  读取元素内所有html内容
//innerHTML="新的值";  替换元素内所有html内容

window.onload=function (){
    var oDiv=document.getElementById("div1");
    var oImg=document.getElementById("img1");
    var oText=document.getElementById("text1");
    var oBtn=document.getElementById("btn");
    var i=0;
    var imgSrc="img/1.png";
    oImg.onclick=function (){
        i++;
        if(i%2!=0){
            oImg.src="img/1.png";
        }
        else{
            oImg.src="img/2.png";
        }
        imgSrc=oImg.src;
        //alert(oImg.src);
    }
    oBtn.onclick=function (){
        //a=a+b;
        //a+=b;
        //oDiv.innerHTML=oDiv.innerHTML+oSpan.innerHTML+oText.value+"<br />";
        if(oText.value==""){
            alert("请输入内容！！！");
        }else{
            oDiv.innerHTML+="<img src='"+imgSrc+"' />"+oText.value+"<br />";
            oText.value="";
        }
    };
};

*{margin:0;padding:0;}
.box{width:360px;height:360px;border:1px solid #ccc;background:#f1f1f1;margin-left:20px;padding:10px;line-height:30px;}
.con{margin:10px 0 0 20px;line-height:30px;}
#img1{cursor:pointer;display:inline-block;width:28px;height:28px;border: none;vertical-align: middle;}
#text1{line-height:30px;padding-left:10px;vertical-align: top;}
#btn{height:30px;line-height:30px;padding:0 10px;vertical-align: top;cursor: pointer;}

效果为：

点击表情的时候可以切换，在输入框中，如果没有输入内容点击按钮的时候，会弹出提示框：请输入内容！！！，当输入框里内容不为空时，点击按钮会将表情输入的内容一块放到的div中：

（3）if...else if....else 语句 - 使用该语句来选择多个代码块之一来执行：代码块：

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

实例：

请输入验证：
<input type="text" id="text1" />
<input type="button" id="btn" value="验证" />

window.onload=function (){
    var oText=document.getElementById("text1");
    var oBtn=document.getElementById("btn");
    oBtn.onclick=function (){
        if(oText.value==""){
            alert("验证内容不能为空，请输入！！！");
        }else if(oText.value=="CSS"){
            alert("你输入的内容是："+oText.value+"，恭喜通过验证");
        }else if(oText.value=="JAVASCRIPT"){
            alert("你输入的内容是："+oText.value+"，恭喜通过验证");
        }else if(oText.value=="HTML"){
            alert("你输入的内容是："+oText.value+"，恭喜通过验证");
        }else{
            alert("验证不正确，你输入的内容是："+oText.value+"，请重新输入");
        }
    }
}

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

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

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 (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();

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

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

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

三、省略大括号{}

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

jQuery之父在《精通 JavaScript》中的一个获取HTML元素属性的方法。

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

【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出错
}