我的编程空间,编程开发者的网络收藏夹
学习永远不晚

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

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

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

前言

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

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

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

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

&&运算符

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

总结:同真为真,否则为假

||运算符

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

总结:同假为假,否则为真

但是实际上真的是这样吗?我们看下关于&&运算符的小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 class="lazy" data-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 class="lazy" data-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中&&运算符与||运算符内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

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

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

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

本篇文章为大家展示了javascript中&&运算符与||运算符的使用方法,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。前言在前端开发领域中,&&运算符和||运算符是使用率和频繁度比较高的。&&运算
2023-06-25

c++中运算符的使用方法

运算符是执行操作的特殊符号或关键字,有不同的类型和执行顺序,主要包括算术运算符用于数学运算,关系运算符用于比较,逻辑运算符用于处理布尔值,赋值运算符用于赋值,指针运算符用于处理指针,位运算符用于对二进制位执行操作,条件运算符用于根据条件结果
c++中运算符的使用方法
2024-04-22

JavaScript的运算符和方法怎么使用

这篇文章主要介绍“JavaScript的运算符和方法怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“JavaScript的运算符和方法怎么使用”文章能帮助大家解决问题。1.JS的类型按照数据类
2023-06-26

在JavaScript中使用Spread运算符的8种方法

了解如何在JavaScript中使用Spread(延展操作)运算符。ES6中引入了延展操作运算符(...)。延展操作运算符将可迭代的对象扩展为其单独的元素,可迭代对象是可以使用 for 循环进行循环的任何对象。可迭代的示例:Array,St

Python运算符*的使用方法

本篇内容主要讲解“Python运算符*的使用方法”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Python运算符*的使用方法”吧!1.有用的键盘快捷键缩进代码按Tab。取消缩进代码按Shift
2023-06-02

python not运算符的实例用法

说明 1、not逻辑非,可以对符号右侧的值进行非运算。 2、对于布尔值,非运算会对其进行取反操作,True变False,False变True。 对于非布尔值,非运算会先将其转换为布尔值,然后再取反。 空性值为False,其他为True。 实
2022-06-02

python中的运算符使用实例分析

本篇内容介绍了“python中的运算符使用实例分析”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!一、比较运算符比较运算符主要是True和Fa
2023-06-30

C#算术运算符使用实例分析

这篇文章主要介绍了 C#算术运算符使用实例分析的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇 C#算术运算符使用实例分析文章都会有所收获,下面我们一起来看看吧。实例using System;namespace
2023-06-17

javascript中instanceof运算符怎么使用

在JavaScript中,instanceof运算符用于检查一个对象是否是某个构造函数的实例。它的使用方法如下:```javascriptobject instanceof constructor```其中,`object`是要检查的对象,
2023-08-12

javascript中不等于运算符的用法

这篇文章主要介绍“javascript中不等于运算符的用法”,在日常操作中,相信很多人在javascript中不等于运算符的用法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”javascript中不等于运算符
2023-06-20

编程热搜

目录