您的位置：首页 > 编程技术 > js  >  javascript中&&运算符与||运算符的使用方法实例

javascript中&&运算符与||运算符的使用方法实例

 更新时间：2021年11月10日 09:42  点击：1460 作者：二郎神杨戬

前言

在前端开发领域中，&&运算符和||运算符是使用率和频繁度比较高的。

&&运算符和||运算符的功能特别强大，想成为一名优秀的前端工程师，&&运算符和||运算符是必不可少的。

但是很多前端工程师(刚入门的小白【包括小编本身】)对于&&运算符和||运算符的使用率极为低下。

之前在学校开发一些项目的时候根本就没有用到过，因为我们已经被传统概念束缚了。我们对于&&运算符和||运算符的理解是这样的。

&&运算符

  • &&运算符左边的结果和右边的结果同时为真时，结果真。
  • &&运算符左边的结果和右边的结果同时为假时，结果为假。
  • &&运算符左边的结果和右边的结果有一个为假时，结果为假。　　

总结：同真为真，否则为假

||运算符

  • ||运算符左边的结果和右边的结果同时为真，结果为真。
  • ||运算符左边的结果和右边的结果有一个为假时，结果为真。
  • ||运算符左边的结果和右边的结果同时为假时，结果为假。

总结：同假为假，否则为真

但是实际上真的是这样吗?我们看下关于&&运算符的小demo

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            let result=1&&2;
            console.log(result);
            
            
        </script>
    </body>
</html>

你想的结果是不是返回true呀！一开始也是和你们一样，但是在学习中实践了一下，并非这样，这里请允许小编打个小广告，各位同行可以在腾讯课堂或者bilibili搜索渡一教育，良心推荐，说实在里面的老师讲课讲的非常优秀，有兴趣的同行可以去尝试一下，扯远了，我们回归正题，实际上返回的结果是2。

||运算符的小demo

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            var result=1||0
            console.log(result);
        </script>
    </body>
</html>

结果：

是不是很惊讶！，天哪！出乎我的意料，两次的结果返回值都不是true或者false，好了小编也不和你们卖关子了。直接进入正题。

本章目标

  • 学会使用&&运算符和||运算符
  • 通过案例加强对&&运算符和||运算符的理解

案例实践(通过加载json渲染数据)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <stle type="text/css">
            #myTab{
                width: 800px;
                margin: 0 auto;
            }
            
            
        </style>
    </head>
    <body>
        <table border="1" cellspacing="0" cellpadding="0" id="myTab">
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>价格</th>
                <th>状态</th>
            </tr>
            
        </table>
        <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //0代表待支付，1代表已支付，2代表已收货，3代表其它
            var  orderArray=[
            {
                id:10001,
                name:'小米9',
                price:1999,
                status:0,
            },
            {
                id:10002,
                name:'huaweiPro',
                price:2999,
                status:1,
            },
            {
                id:10003,
                name:'小米8',
                price:999,
                status:2,
            },
            {
                id:10004,
                name:'荣耀8X',
                price:1399,
                status:3,
            }
            ];
            $("#myTab tr:not(:eq(0))").remove();
            for(var i=0;i<orderArray.length;i++){
                var tr=$("<tr/>");
                var td1=$("<td/>");
                var td2=$("<td/>");
                var td3=$("<td/>");
                var td4=$("<td/>")
                td1.html(orderArray[i].id);
                td2.html(orderArray[i].name);
                td3.html(orderArray[i].price);
                if(orderArray[i].status==0){
                    td4.html("待支付")
                }else if(orderArray[i].status==1){
                    td4.html("已支付")
                }else if(orderArray[i].status==2){
                    td4.html("已收货");
                }else if(orderArray[i].status==3){
                    td4.html("其它")
                }
                tr.append(td1);
                tr.append(td2);
                tr.append(td3);
                tr.append(td4);
                $("#myTab").append(tr);
            }
        </script>
    </body>
</html>

效果图如下：

这是我们没有使用&&运算符和||运算符的结果，接下来我们使用&&运算符和||运算符来简化if...else..if...else语句。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #myTab{
                width: 800px;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <table border="1" cellspacing="0" cellpadding="0" id="myTab">
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>价格</th>
                <th>状态</th>
            </tr>
        </table>
        <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //0代表待支付，1代表已支付，2代表已收货，3代表其它
            var  orderArray=[
            {
                id:10001,
                name:'小米9',
                price:1999,
                status:0,
            },
            {
                id:10002,
                name:'huaweiPro',
                price:2999,
                status:1,
            },
            {
                id:10003,
                name:'小米8',
                price:999,
                status:2,
            },
            {
                id:10004,
                name:'荣耀8X',
                price:1399,
                status:3,
            }
            ];
            $("#myTab tr:not(:eq(0))").remove();
            for(var i=0;i<orderArray.length;i++){
                var tr=$("<tr/>");
                var td1=$("<td/>");
                var td2=$("<td/>");
                var td3=$("<td/>");
                var td4=$("<td/>")
                td1.html(orderArray[i].id);
                td2.html(orderArray[i].name);
                td3.html(orderArray[i].price);
                var status=orderArray[i].status== 0 && "待支付" ||orderArray[i].status== 1 && "已支付" ||orderArray[i].status== 2 && "已收货" ||orderArray[i].status== 3 && "其它"
                td4.html(status); 
//                if(orderArray[i].status==0){
//                    td4.html("待支付")
//                }else if(orderArray[i].status==1){
//                    td4.html("已支付")
//                }else if(orderArray[i].status==2){
//                    td4.html("已收货");
//                }else{
//                    td4.html("其它")
//                }
                tr.append(td1);
                tr.append(td2);
                tr.append(td3);
                tr.append(td4);
                $("#myTab").append(tr);
            }
        </script>
    </body>
</html>

在这里我们用一句代码解决了if..else..if..else的代码操作，使用了&&运算符和||运算符代替使代码更加简洁方便，当然&&运算符和||运算符的使用不仅仅是这样，总之&&运算符和||运算符的功能特别强大，我们要学会使用。

结尾

&&运算符

  • 先看第一个表达式转换为布尔值的结果，如果为真，那么它会看第二个表达式转换为布尔值的结果，然后如果只有两个表达式的话，只看第二个表达式的结果就可以返回该表达式的值。
  • 当第一个表达式的值为false时，直接返回第一个表达式的值，不再往后看
  • 如果第一个操作数是对象，则返回第二个操作数
  • 如果两个操作数都是对象，则返回第二个操作数
  • 如果第二个操作数是对象，则只有在第一个操作数的求值结果为true的情况才会返回该对象
  • 如果一个操作数为null,则返回null
  • 如果第一个操作数是NaN,则返回NaN
  • 如果第一个操作数是undefined,则返回undefined

||运算符

  • 先看第一个表达式转换为布尔值的结果，如果为假，那么它会看第二个表达式转换为布尔值的结果，然后如果只有两个表达式的话，只看第二个表达式的结果就可以返回该表达式的值
  • 当第一个表达式的值为false时，直接返回第二个表达式的值，不再往后看
  • 如果第一个操作数是对象，则返回第一个第一个操作数
  • 如果第一个操作数的求值结果为false,则返回第二个操作数
  • 如果两个操作数都是对象，则返回第一个操作数
  • 如果两个操作数都是null,则返回null
  • 如果两个操作数都是NaN，则返回NaN
  • 如果两个操作数都是undefined，则返回undefined

被认定为false的值：false, "", NaN, null, undefined

总结

到此这篇关于javascript中&&运算符与||运算符使用的文章就介绍到这了,更多相关JS中&&运算符与||运算符内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞！

原文出处：https://juejin.cn/post/7028365666243575815

[!--infotagslink--]

相关文章

  • c#中(&&,||)与(&,|)的区别详解

    这篇文章主要介绍了c#中(&&,||)与(&,|)的区别详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-06-25

  • C#语言中条件与&&与条件或||的区别

    这篇文章主要介绍了&&：逻辑与，前后条件同时满足表达式为真||：逻辑或，前后条件只要有一个满足表达式为真，下面结合案例给大家介绍，需要的朋友可以参考下...2020-06-25

  • c#的异或运算符介绍

    这篇文章介绍了c#的异或运算符，有需要的朋友可以参考一下...2020-06-25

  • 轻松学习C#的运算符

    轻松学习C#的运算符，对C#的运算符感兴趣的朋友可以参考本篇文章，帮助大家更灵活的运用C#的运算符。...2020-06-25

  • C#中38个常用运算符的优先级的划分和理解

    这只我自己在学C#中的一些总结，其中对于各级的划分方式、各操作符的优先级的理解并不见得正确，只是自己的看法，拿出来与大家分享...2020-06-25

  • R语言运算符知识点讲解

    在本篇文章里小编给大家分享了一篇关于R语言运算符知识点讲解内容，有兴趣的朋友们可以参考下。...2021-05-06

  • C++编程中的或||、与&&、非!逻辑运算符基本用法整理

    这篇文章主要介绍了C++中的或||、与&&、非!逻辑运算符基本用法整理,是C++入门学习中的基础知识,需要的朋友可以参考下...2020-04-25

  • JS不要再到处使用绝对等于运算符了

    这篇文章主要介绍了JS不要再到处使用绝对等于运算符了，对此感兴趣的同学，可以参考下...2021-05-01

  • C#编程自学之运算符和表达式

    这篇文章主要介绍了C#运算符和表达式,这是自学C#编程的第五篇，希望对大家的学习有所帮助。...2020-06-25

  • C#运算符重载用法实例分析

    这篇文章主要介绍了C#运算符重载用法,实例分析了C#中运算符重载的基本实现与使用技巧,需要的朋友可以参考下...2020-06-25

  • C++中运算符 &和&&、|和|| 的详解及区别

    这篇文章主要介绍了C++中运算符 &和&&、|和|| 的详解及区别的相关资料,这里举例说明该如何区别他们的不同，需要的朋友可以参考下...2020-04-25

  • PHP的三种类型的运算符

    在php中运算符有常用的三种了如有一元运算符,二元运算符,三元运算符了，下面来简单的介绍一下吧。 运算符是可以通过给出的一或多个值（用编程行话来说，表达式）来产生...2016-11-25

  • C#中的除法运算符与VB.NET中的除法运算符

    这篇文章主要介绍了C#中的除法运算符与VB.NET中的除法运算符,需要的朋友可以参考下...2020-06-25

  • C语言中逻辑运算符与条件运算符的学习教程

    这篇文章主要介绍了C语言中逻辑运算符与条件运算符的学习教程,条件运算符问号即三目运算符使用起来十分方便,需要的朋友可以参考下...2020-04-25

  • C# null 合并运算符??(双问号)使用示例

    这篇文章主要介绍了C# null 合并运算符??(双问号)使用示例,?? 运算符称作 null 合并运算符。如果此运算符的左操作数不为 null，则此运算符将返回左操作数；否则返回右操作数,需要的朋友可以参考下...2020-06-25

  • 一篇文章带你入门java算术运算符(加减乘除余,字符连接)

    这篇文章主要介绍了Java基本数据类型和运算符,结合实例形式详细分析了java基本数据类型、数据类型转换、算术运算符、逻辑运算符等相关原理与操作技巧,需要的朋友可以参考下...2021-08-05

  • 深入解析C++编程中__alignof 与__uuidof运算符的使用

    这篇文章主要介绍了C++编程中__alignof 与__uuidof运算符的使用,是C++入门学习中的基础知识,需要的朋友可以参考下...2020-04-25

  • perl运算符使用介绍与简单应用

    本文向大家简单介绍一下Perl语法中Perl运算符的概念，Perl语言中Perl运算符有很多值得学习的地方，这里和大家分享一下它的概念和用法...2020-06-29

  • JavaScript ES6解构运算符的理解和运用

    在ES6属性中新增了两个属性,分别是解构和…运算符,下面这篇文章主要给大家介绍了关于JavaScript ES6解构运算符的理解和运用,文中通过示例代码介绍的非常详细,需要的朋友可以参考下...2021-10-05

  • C#运算符大全_各种运算符号的概述及作用

    以下是对C#中各种运算符号的说明及作用进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助...2020-06-25