Javascript三元运算符的使用技巧

越来越觉得，当代码写多了的时候，就越来越想精简一下...潜移默化的从if...else到用三元表达式来实现；
也有人说用三元表达式实现会让你有那种'高潮'的感觉...是激动那种别想歪了~~

三元表达式

表达式 (expr1) ? (expr2) : (expr3)

在 expr1 求值为 TRUE 时的值为 expr2，在 expr1 求值为 FALSE 时的值为 expr3

普通用法

    if(努力学习){
        // do something you want here
        坐办公室
    }else{
       // do something you want here
       工地搬砖
    }

原生Js 虽然写起来很爽, 但是明显能感觉的繁琐和代码过长 .... 而使用三元表达式实现上述效果代码就会看起来精简不少更加清爽；

三元表达式用法

    努力学习 ? 坐办公室 : 工地搬砖

怎么样？是不是看起来很清爽 ... 有没有‘高潮’呢？[邪恶]

聪明点的：

    flag ? $('body').addClass('hover') : $('body').removeClass('hover') ;

变态点的：

    $('.item')[ flag ? 'addClass' : 'removeClass']('hover');

上面的代码看着比较困惑。因为当flag = true 的时候，代码就变成以下代码：

    $('.item')['addClass']('hover')  这等同于  $('.item').addClass('hover')
    也可以写成 function a() ,  function b()形式 ， 最后变成：flag ? a() : b();

演示DEMO

我需要点击按钮切换一个弹出框效果:

一般if...else

    oBth.onclick=function(){
        if (oUl.style.display=='block') {
            oUl.style.display=='none';
        }else{
            oUl.style.display=='block';
        }
    }

使用三元表示式

    oBth.onclick=function(){
        oUl.style.display == "block" ? oUl.style.display="none" : oUl.style.display="block"
    }

是不是很清爽呢？当然它还有优化的空间

    oBth.onclick=function(){
        var style = oUl.style.display;
        //这样写的话就一定不能忘了把运算结果重新赋值给元素 - -
        oUl.style.display= style == "block" ? "none":"block"; 
        //可读性更高的写法
　　    oUl.style.display= (style == "block" ? "none":"block") 
    }

Note注意

不是[false, 0, undefined, NaN, "" or null] Javascript都认为是true;

文章目录