前言

在前端开发领域中，&&运算符和||运算符是使用率和频繁度比较高的，&&运算符和||运算符的功能特别强大，想成为一名优秀的前端工程师，&&运算符和||运算符是必不可少的，但是很多前端工程师(刚入门的小白【包括小编本身】)对于&&运算符和||运算符的使用率极为低下，之前小编在学校开发一些项目的时候根本就没有用到过，因为我们已经被传统概念束缚了。我们对于&&运算符和||运算符的理解是这样的

&&运算符

  • &&运算符左边的结果和右边的结果同时为真时，结果真

  • &&运算符左边的结果和右边的结果同时为假时，结果为假

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

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

||运算符

  • ||运算符左边的结果和右边的结果同时为真，结果为真

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

  • ||运算符左边的结果和右边的结果同时为假时，结果为假

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

但是实际上真的是这样吗?我们看下关于&&运算符的小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中&&运算符和||运算符的使用的更多相关文章

  1. 浅析JavaScript中的typeof运算符

    对JavaScript中的typeof运算符进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助. 如果typeof的运算符是数字.字符串或者布尔值,它返回的结果就是"numb ...

  2. JavaScript中的逗号运算符

    JavaScript逗号运算符  阅读本文的前提,明确表达式.短语.运算符.运算数这几个概念. 所谓表达式,就是一个JavaScript的“短语”,JavaScript解释器可以计算它,从而生成一个值 ...

  3. JavaScript中涉及得运算符以及运算符的优先级

    在js中主要有三种运算符:算术运算符,逻辑与比较运算符,位运算符.在着三种运算符中,最常见的应该是算术与比较运算符,位运算符比较少见一些 *说到了运算符,就不得不说运算符的优先级.下面我来列一下这些运 ...

  4. JavaScript学习系列8 - JavaScript中的关系运算符

    JavaScript中有8个关系运算符,分别是 ===, !===, ==, !=, <, <=, >, >= 1. 恒等运算符 (===) ===也叫做 严格相等运算符,它要 ...

  5. JavaScript学习系列4 ----- JavaScript中的扩展运算符 三个点(...)

    在JavaScript中, ES6开始有rest参数 和 三个点扩展运算符 (spread运算符) 我们来看看他们各自的用处 1. rest参数 rest参数的形式为 ...变量名          ...

  6. javaScript 中的布尔运算符 && 和 ||

    布尔运算符 && 和 ||的返回结果不一定是布尔值!由此来展开一定的研究及理解. 1.首先先介绍下常见的数据类型转化为bool后的值. (常用地方)在if表达式中,javascript ...

  7. Javascript中的位运算符和技巧

    ECMAScript 整数有两种类型,即有符号整数(允许用正数和负数)和无符号整数(只允许用正数).在 ECMAScript 中,所有整数字面量默认都是有符号整数,这意味着什么呢? 有符号整数使用 3 ...

  8. javascript中的instanceof运算符

    instanceof运算符希望左操作数是一个对象,右操作数表示对象的类:如果左侧的对象是右侧类的实例,则返回true,否则返回false.由于js中对象的类是通过初始化它们的构造函数来定义的,因此in ...

  9. JavaScript中使用typeof运算符需要注意的几个坑

    typeof是一个运算符,它对操作数返回的结果是一个字符串,有6种(只针对ES,不包含HOST环境对象). 1.'undefined'2.'boolean'3.'string'4.'number'5. ...

  10. javascript中的in运算符

    in运算符希望它的左操作数是一个字符串或可以转换为字符串,希望他的又操作数是一个对象:如果右侧对象拥有一个名为左操作数值的属性名,那么表达式返回true: var point = {x:1,y:1}; ...

随机推荐

  1. Redis 宝典 | 基础、高级特性与性能调优

    转载:Redis 宝典 | 基础.高级特性与性能调优 本文由 DevOpsDays 本文由简书作者kelgon供稿,高效运维社区致力于陪伴您的职业生涯,与您一起愉快的成长.     作者:kelgon ...

  2. UWP 扩展/自定义标题栏的方法，一些概念和一些注意事项

    原文 UWP 扩展/自定义标题栏的方法,一些概念和一些注意事项 在 Windows 10 的前几个版本中将页面内容扩展到标题栏上还算简单,主要是没什么坑.直到一些新控件的引入和一些外观设计趋势变化之后 ...

  3. urllib2使用总结

    keywords: urllib2,BeautifulSoup,cookielib 题外话: 小弟是编程爱好者,各位看官轻拍. 最近在使用urllib2抓取网页内容,在学习的过程中也查阅了不少资料,并 ...

  4. .net core service && angular项目 iis发布

    项目结构 .net core 后端服务站点 angular 前端页面站点 项目模板来自于abp或者52abp .net core 后端服务站点发布到IIS 发布报错 .Net Core使用IIS部署出 ...

  5. C# 桌面软件开发-深入学习 [1]- AY-C#人爱学不学-aaronyang技术分享

    原文:C# 桌面软件开发-深入学习 [1]- AY-C#人爱学不学-aaronyang技术分享 曾经我做office,不想依赖别人dll,就使用了 Type.GetTypeFromProgID 可以根 ...

  6. 用友u8各版本在输出的时候报错提示：外部数据库驱动程序（1）中的意外错误

    从10月12日起很多U8用户反馈,在各版本U8中输出报表时软件报错,报错内容“外部数据库驱动程序(1)中的意外错误”,经初步分析有以下解决方案:1.卸载微软的补丁:(1)如果是PC操作系统(一般是客户 ...

  7. Win8 Metro(C#)数字图像处理--2.41彩色图像密度分割算法

    原文:Win8 Metro(C#)数字图像处理--2.41彩色图像密度分割算法  [函数名称]   彩色图像密度分割函数      DensitySegmentProcess(WriteableB ...

  8. Android零基础入门第5节：善用ADT Bundle，轻松邂逅女神

    原文:Android零基础入门第5节:善用ADT Bundle,轻松邂逅女神 在前几期中总结分享了Android的前世今生.Android 系统架构和应用组件那些事.带你一起来聊一聊Android开发 ...

  9. 正则表达式-Csharp

    原文:正则表达式-Csharp 学习笔记:正则表达式 一． 正则表达式 正则表达式(Regex)是用来进行文本处理的技术,是语言无关的,在几乎所有语言中都有实现. 一个正则表达式就是由普通的字符及特殊 ...

  10. 【必须知道】Enum_Flags

    [Flags] enum AnyThings{ A=1, B=2, C=4, D=8 } 枚举赋值必须是2^n才可以,目的是实现他们的二进制表示中的 1 ,不要重叠,如 1=0001   2=0010 ...