javascript 逻辑与(&&) 和逻辑或(||) 的骚操作

布满荆棘的人生 2022-01-23 01:51 269阅读 0赞

> 逻辑运算符通常用于布尔型（逻辑）值。这种情况下，它们返回一个布尔值。然而，&& 和 || 运算符会返回一个指定操作数的值，因此，这些运算符也用于非布尔值。这时，它们也就会返回一个非布尔型值。

逻辑运算符在写代码时上镜率颇高，通常都与 if 条件语句 一起使用，下面的代码是常规操作

/* 逻辑与的常规操作 */
    if(true && true){
    	console.log("YES")	//返回true 输出"YES"
    }
    /* 逻辑或的常规操作 */
    if(false || true){
    	console.log("YES")	//返回true 输出"YES"
    }

如果本篇文章只是示例这种常规操作，那本篇文章就完全没有写的必要了，在说骚操作之前，先看一下 MDN 的官方描述，见下表

逻辑运算符如下表所示 (其中expr可能是任何一种类型, 不一定是布尔值):

相信各位读者在学习逻辑与的时候，学习资料都是写当 表达式1 和 表达式2 都为true返回true否则返回false。这么说当然没错，不过现在带着官方的说明继续下面的表演。

### 逻辑或的骚操作： ###

根据逻辑或的官方说明，当 表达式1 为true 时返回 表达式1 ，否则返回表达式2。

在工作中，经常要给变量设置默认值，比如性别默认为“男”、商品价格默认为“0元等”。

function test1(sex,money){
        var sex = sex || '男',
            money = money || 0
        console.log(sex,money)
    }
    
    test1('',10)
    //执行结果输出 男,10
    //因为 '' 转为布尔值为false，所以返回表达式2，sex的值即为'男'

根据逻辑或的的特性，这样写能很方便的给变量设置默认值 ，非常的实用。

### 逻辑与的骚操作 ###

根据逻辑与的官方说明，当 表达式1 为true 时返回 表达式2 ，否则返回表达式1。

在工作中，特别是封装方法的时候，经常要判断参数传的回调函数是否是一个 function。先演示一下常规的写法。

function test2(fun){
        if(fun){
            fun();
        }
    }
    
    function test3(fun){
        if(typeof fun == 'function'){
            fun();
        }
    }
    
    test2(function(){
        console.log("我是一个callback函数")
    })
    //执行结果输出 '我是一个callback函数'
    
    test3(function(){
        console.log("typeof is function")
    })
    //执行结果输出 'typeof is function'

这么写完全没毛病，但是不够简便，下面示例简便的写法

function test4(fun){
        fun && fun();
    }
    
    test4(function(){
        console.log("逻辑与的骚操作真优秀")
    })
    //执行结果输出 '逻辑与的骚操作真优秀'

简短的代码，实现了相同的功能，希望本篇文章对各位读者有所帮助，写好代码，了解语言特性。让自己写代码的时候浑身充满骚气。

![20190601201728111.gif][]                   ![20190601201748725.gif][]

在文章的结尾，奉上本篇文章的姐妹篇[《javascript 逻辑非(!) 的骚操作》][javascript _]的传送门

传送地址：[https://blog.csdn.net/u013350495/article/details/90744951][javascript _]

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处。
> 
> 更多精彩文章，请扫下方二维码关注我的公众号
> 
> ![20190512094840637.jpg][]

[20190601201728111.gif]: https://img-blog.csdnimg.cn/20190601201728111.gif
[20190601201748725.gif]: /images/20220123/d77a1d72b6d846df999cda46c8092d20.png
[javascript _]: https://blog.csdn.net/u013350495/article/details/90744951
[Link 1]: https://blog.csdn.net/u013350495
[20190512094840637.jpg]: /images/20220123/6385787f0c7c4a7e8d596ddf1df8b399.png