JS中对象和变量是否可以作为if选择结构的条件?

            由于JS很菜,工作中看别人写的js代码,发现很多都是自己没见过没想过的。有段时间发现别人把一个方法或者对象作为if选择结构的条件,感到很疑惑?方法和对象也可以作为if选择结构的条件吗?

然后一直想去验证,但是都很懒,没去行动;有一天去测试过了,当时是明白这些是不是可以作为if选择结构,但是过了一段时间后,发现自己又把这些验证过的东西给忘了,记不起来了。

所以今晚又来测试一下js中方法和对象是不是可以作为if选择结构的条件,并且把测试结果记录下来。古人言:好记性不如烂笔头。此话诚不欺我也!

 

测试开始了:

html页面中有一个标签:

下面是js测试代码:

function TestIf() {
    var btn = document.getElementById("btnIf"); //存在该对象
    var btn0 = $("#btnIf");                     //jQuery获取存在的对象
    var btn2 = document.getElementById("btnIf2"); //不存在该对象
    var btn3 = $("#btnIf2");                    //jquery获取不存在的对象

    try {//用来验证js和jQuery分别获取不能再的对象,然后调用对象的属性会不会报错
        var btnResult = btn.innerHTML;
        var btn3Result = btn3.val();
    } catch (e) {//没有进入catch
        alert(e.Message+",报错了");
    }

    try {
        var btn2Result = btn2.innerHTML;//js获取不存在的对象,调用它的属性会报异常,而jqeury获取不存在的对象不会报异常
    } catch (e) {//进入catch
        alert("js获取不存在的对象调用对象属性果然会报错!--》  "+e.Message);
    }

    //测试js和jQeury获取的不存在的对象能否用对象的属性
    try {
        var btn2Value = btn2.innerHTML;
    } catch (e) {//进入catch,报错
        alert("js获取的不存在的对象不能调用属性 -- 》  "+e.Message);
    }
    try {
        var btn3Value = btn3.val();
    } catch (e) {//没有进入catch,说明jQuerry获取不存在的对象调用对象属性不会报错
        alert("jquery获取的不存在的对象不能调用属性--- >  "+e.Message);
    }

    var str1; var str2 = null, str3 = "", str4 = undefined; str5 = "nihao";

    if (btn) {
        alert('Id为btnIf的对象存在'); //if跳入这里
    } else if(!btn){
        alert('Id为btnIf的对象不存在');
    }

    if (btn0) {
        alert("jQuery获取存在的对象可以作为if选择条件"); //跳入这里
    } else if(!btn0) {
        alert("jQuery获取存在的对象不可以作为if选择条件");
    }


    if (btn2) {
        alert('Id为btnIf2 的对象存在');
    } else if(!btn2){
        alert('Id为btnIf2 的对象不存在');  //结果跳入这里,false
    }

    if (btn3) {
        alert("jQuery获取不存在的对象可以作为if选择条件"); //结果跳入这里,jqeury获取的对象就算不存在,作为if选择结构条件时也是为true
    } else if (!btn3) {
        alert("jQuery获取不存在的对象不可以作为if选择条件");
    }

    alert('btn2==undefined---》 ' + (btn2 == undefined) + ' , btn2==null--》' + (btn2 == null)
    + "\nbtn==true -- > " + (btn == true) + "\nbtn0==true -- > " + (btn0 == true) +
    "\nbtn3==true -- > "+(btn3==true)+"\nbtn2==true -- > "+(btn2==true));//结果对象==true的结果都是false

    if (str3) {//str3==""
        alert('str3=""存在');
    } else if(!str3) {
        alert('str3=""不存在');//进入这里
    }

    if (str1) { //str1=undefined -->跳入str1不存在
        alert('str1存在');
    } else if(!str1) {
        alert('str1不存在。。');//进入这里
    }

    str1 = function () { } //赋值
    if (str1) { //str1为一个构造函数,应该跳入str1存在
        alert('str1存在');
    } else if(!str1) {
        alert('str1不存在');
    }

    if (str5) {
        alert("str5=nihao 可以作为if条件"); //进入这里
    } else if (!str5) {
        alert("str5=nihao不可以作为if条件");
    }

    var str6 = "   "; //空格
    if (str6) {
        alert("空格可以作为if条件");
    } else if (!str6) {
        alert("空格不可以作为if条件");
    }

    var str7 = null, str8 = "", str9 = undefined;

    alert("str5==true -- >" + (str5 == true) + "\nstr8==true --> " 
    + (str8 == true) + "\nstr9==true --> " + (str9 == true));//结果都是false,很奇怪;按理来说既然既然str5可以作为if条件,那么和true相比应该是true才对,事实不是如此

}

 

现在把刚才的测试结果统计一下:

1、js获取的存在的对象、jQuery获取存在或者不存在的对象、赋值不为空(可以为空格,不能是‘’或者“”)、方法都可以作为 if 选择结构的条件。即把他们作为 if 条件都能进入if大括号里面

2、js获取的不存在对象、变量为null 或者 为 undefined、或者变量为‘’ 或者 “” 不能作为 if 选择结构的条件;表现有点类似false了

3、这些对象、变量、方法和布尔类型比较都是false,比如 var   str="nihao";  这个str变量作为 if  选择结构的条件表现为true,可以进入 if  选择结构,但是str==true 的结果为false

4、js获取不存在对象,调用该对象的属性,会报错,异常;而jQuery获取的不存在的对象,调用该对象的属性不会报错报异常。

5、jQuery获取的对象不管该对象是否存在,它作为 if  条件都会为true,这就没什么意义了。所以如果想把jQuery获取的对象作为if判断条件,即想判断该对象是否存在,则可以用对象.length这个属性来判断,对象存在则调用length属性返回的值至少为1(表示存在一个对象,大于1就表示有多个对象存在),对象不存在则length结果为0

 

暂时只测到这里了,路漫漫其修远兮,我将上下而求索,加油吧,路还有很远!uploading.4e448015.gif转存失败重新上传取消

 

你可能感兴趣的:(大前端)