你可曾见过如此简单粗暴的JavaScript解说 -- if 判断的正确打开方式?

在JavaScript中,对于 if else 的逻辑判断你肯定非常熟悉,本文罗列了几种你不一定知道的简写方式,仅供参考。

例子: 已知小明考了68分,小于60分为不及格,大于60分为及格,问:小明是否通过了考试?

1.传统的写法

if(score < 60){
    alert('不及格');
}else{
    alert('及格');
}

这没什么好说的,最基本的if else语法。可读性应该是最好的。

2.利用三目运算符来进行判断

score < 60 ? alert('不及格') : alert('及格') ;

这种写法应该还算是比较多见的,而且,如果只有单纯的一个if判断的话,可读性也不是很差。

3.利用&& 来判断

score < 60 && alert('不及格') ;
score >= 60 && alert('及格') ;

**&&的用法 **: 如果左边的结果为真,那么运行右边的表达式,如果右边的也为真,那么就返回真。其中,只要有一个为假,结果就是假。并且,一旦左边的结果为假,右边的就不执行了。

这里就是取了一个巧,因为我只是想要执行右边的表达式,无所谓返回值是什么。

那么,如果score < 60 为真,我不管三七二十一,都去执行一下右边的代码。我们的目的已经达到了。

这不就相当于这样吗:

if(score < 60 == true){
   alert('不及格') ;
}

if(score >= 60 == true){
   alert('及格') ;
}

简写:

if(score < 60){
   alert('不及格') ;
}

if(score >= 60){
   alert('及格') ;
}

就是说,一旦 ( ) 里面的表达式为真,就执行 { } 里面的内容。否则就不执行。

4.利用 || 来判断

score < 60  ||  alert('及格') ;
score >= 60  ||  alert('不及格') ;

**|| 的用法 **: 如果左边的结果为真,那么直接返回true,右边的就忽略了!

如果左边为假,那么就运行右边的,看看右边的结果如何?如果右边为真,就返回真,否则返回假。

也就是说,不管右边的结果怎样,只要左边为假了,右边就无论如何会被执行一次的。这边也就是利用这个原理,相当于这样:

if(score < 60 == false){
   alert('及格') ;
}

if(score >= 60 == false){
   alert('不及格') ;
}

如果分数 < 60 是假的,是骗你的,不就是说分数 > 60 才是真相吗?哦,超过60分就是及格了,所以alert出来的是及格。

如果分数 >= 60 是假的,是骗你的,不就是说分数 < 60 才是真相吗?哦,不满60分就是不及格了,所以alert出来的是不及格。

这样应该说的比较清楚了吧。

再说得白一点,就是: 你要么给我 < 60 ,要么给我 alert('及格') ; 你要么给我 >= 60 ,要么给我 alert('不及格') ;

5.实战演练

我们来一个小案例,看看可以怎么运用这些知识点?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <style type="text/css">
            .box1 {
                height:200px;
                width:300px;
                border: 1px solid #666;
            }
            
            .box2 {
                background: green;
            }
            
        </style>
        <script>
            
        </script>
    </head>
    <body>
        <div id='myBox' class='box1'></div>
    </body>
</html>

Paste_Image.png

我们引入了jQuery,现在希望自己来编写一个toggelClass,如何实现呢?

当我们点击这个div的时候,就自动将class换成box2。再次点击的时候,就把box2的样式去掉,依此循环。

上代码:

$('document').ready(function(){
    function toggleClass(dom , className){
        //判断该class是否已经存在
        if(dom.hasClass(className)){
            //如果存在,就去掉这个class
            dom.removeClass(className);
        }else{
            //如果不存在,就加上这个class
            dom.addClass(className);
        }
    }
    
    $('#myBox').click(function(){
        toggleClass($(this),'box2');
    });
});

1.gif

我猜想,jQuery对toggleClass的实现应该也差不多是这个意思。现在,我们考虑做如下简化:

第一种方式,用三目运算符简化:

function toggleClass(dom , className){
    dom.hasClass(className) ? dom.removeClass(className) : dom.addClass(className);
}

第二种方式,用&& 和 ||:

!dom.hasClass(className) && dom.addClass(className) || dom.removeClass(className);

可能有点绕,而且我也不是很推荐这种方式,一般来说,这种方式用于一些给变量赋值的场合。

我大概解释一下:

!dom.hasClass(className) && dom.addClass(className) 

这表示如果dom元素不包含你指定的className,那么 !dom.hasClass(className) 是真,于是无论如何我都要执行右边的代码: dom.addClass(className) ,也就是说,给dom元素添加这个class。

这样一来,

!dom.hasClass(className) && dom.addClass(className) 

这句话是不是已经成立了,OK,那么因为右边是 || , 左边都已经成立了,那么我右边的代码是不是可以不执行了呀?

好的,第二次点击:

!dom.hasClass(className)的意思是说,你这个dom元素是不是没有指定的class啊,不,我们刚才已经添加了,所以是有的。

那么,这句话就不成立了,&& 左边的是假,那么右边的就不执行了、

就是说:

 dom.addClass(className) 

这句话不执行了。

综合来看:

!dom.hasClass(className) && dom.addClass(className) 

这个条件就是不成立的。

好的, || 左边的不成立,是不是说,我们无论如何都要执行一下||右边的代码呢?

恩, dom.removeClass(className) 就被执行了。

本章结束 ...

剽悍一小兔,电气自动化毕业。 参加工作后对计算机感兴趣,深知初学编程之艰辛。 希望将自己所学记录下来,给初学者一点帮助。

免责声明: 博客中所有的图片素材均来自百度搜索,仅供学习交流,如有问题请联系我,侵立删,谢谢。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏用户2442861的专栏

JAVA注解

      http://blog.csdn.net/rj042/article/details/6399965

26020
来自专栏Python自动化测试

python接口测试之序列化与反序列化(四)

在python中,序列化可以理解为:把python的对象编码转换为json格式的字符串,反序列化可以理解为:把json格式字符串解码为python...

17740
来自专栏水击三千

ARCGIS接口详细说明

ArcGIS接口详细说明 目录 ArcGIS接口详细说明... 1 1.      IField接口(esriGeoDatabase)... 2 2.     ...

47060
来自专栏增长技术

采用现代Objective-C

多年来,Objective-C语言已经有了革命性的发展。虽然核心理念和实践保持不变, 但语言中的部分内容经历了重大的变化和改进。现代化的Objective-C在...

9530
来自专栏JavaEdge

注解机制及其原理什么是注解注解的使用注解的原理

382140
来自专栏恰童鞋骚年

.NET中那些所谓的新语法之一:自动属性、隐式类型、命名参数与自动初始化器

开篇:在日常的.NET开发学习中,我们往往会接触到一些较新的语法,它们相对以前的老语法相比,做了很多的改进,简化了很多繁杂的代码格式,也大大减少了我们这些菜鸟码...

8520
来自专栏ACM算法日常

UVA10305 | 拓扑排序

John has n tasks to do. Unfortunately, the tasks are not independent and the exe...

9720
来自专栏Echo is learning

字符、字符集、编码,以及它们python中会遇到的一些问题(上)

20670
来自专栏java 成神之路

NIO 之 Buffer 图解

43480
来自专栏专注 Java 基础分享

使用Java注解来简化你的代码

     注解(Annotation)就是一种标签,可以插入到源代码中,我们的编译器可以对他们进行逻辑判断,或者我们可以自己写一个工具方法来读取我们源代码中的注...

36050

扫码关注云+社区

领取腾讯云代金券