JS直接if参数的用法&JS中!和!!区别

   经常在JS中见一些代码直接if(参数),然后参数调用的时候是将元素自己传下去。例如下面代码:

复制代码
    <body>
    <input type="text" name="" id="" value="111222" onclick="test1(this)" />
    <input type="text" name="" id="" value="111222" onclick="test1()" />
    </body>
    <script>
        function test1(obj){
            if(obj){
                alert($(obj).val());
            }else{
                alert("has not obj");
            }
        }
    </script>    
复制代码

 

  我们分别点击上面的两个输入框显示如下:

 

解释:实际上相当于java中的重载,如果传参数了就走if(obj),不传参数就走else。

  也就是如果参数不为空或者nul或者undefinedl或者“”空串则if(obj)成立。

 

进一步的测试:

复制代码
    <script>
        function test1(obj){
            if(obj){
                alert("has obj");
            }else{
                alert("has not obj");
            }
        }
        test1();//has not obj
        test1(null);//has not obj
        test1(undefined);//has not obj
        test1("");//has not obj
        test1(" ");//has obj
        test1("1");//has obj
    </script>    
复制代码

  总结:不传参数,传的参数为null,传的参数为undefined,传的参数为""的时候if(obj)不成立,反之则成立。

 

补充:直接if(param)可以用于判断参数,也相当于if(param != null),相反if(!param)就相当于if(param == null),例如:

复制代码
    <script>
        function test(a, b) {
            if (!a || !b) {
                alert("参数没传");
            } else {
                alert("a与b不等于null")
            }
        }
        test();
        test("1", "2");
    </script>
复制代码

 结果:

  

 

补充:实际上是用!与上对象来求得一个布尔值,js中!和!!的区别及用法

js中!的用法是比较灵活的,它除了做逻辑运算常常会用!做类型判断,可以用!与上对象来求得一个布尔值,
1、!可将变量转换成boolean类型,null、undefined和空字符串、数字0 通过!转为boolean值0为true,其余为false。

!null=true
!undefined=true
!''=true
!100=false
!'abc'=false
!0=true

  特别注意0的情况。

2、!!  常常用来做类型判断,在第一步!(变量)之后再做逻辑取反运算,在js中新手常常会写这样臃肿的代码:
判断变量a为非空,未定义或者非空串才能执行方法体的内容

var a;
if(a!=null&&typeof(a)!=undefined&&a!=''){
    //a有内容才执行的代码  
}

实际上只需要一个表达式:

if(!a){
    //a有内容才执行的代码...  
}

 

比如:如下一个验证值必填的函数,有值的话返回true,没值的话返回字符串消息"required." 

        function required(val) {
            return !!val || 'required.';
        }

        console.log(required());
        console.log(required(''));
        console.log(required(0));
        console.log(required("xxxxx"));

结果:

(1)required('')解释: !'' 返回的是true, 再进行一次!之后是false。 所以会返回后面的字符串。

(2)required("xxxxx")解释: !"xxxxx" 返回的是false,再进行一次 ! 返回的是true。因此不与后面的字符串进行逻辑或运算,直接返回true。

 

posted @   QiaoZhi  阅读(9600)  评论(0编辑  收藏  举报
编辑推荐:
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
阅读排行:
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· Obsidian + DeepSeek:免费 AI 助力你的知识管理,让你的笔记飞起来!
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
历史上的今天:
2017-09-10 【Tomcat】如何注册Tomcat到Window Service服务
点击右上角即可分享
微信分享提示