前言

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

&&运算符

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

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

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

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

||运算符

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

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

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

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

但是实际上真的是这样吗?我们看下关于&&运算符的小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. 百度地图 JavaScript API 极速版 开发体会

    前段时间百度地图API推出了 JavaScript API 极速版 1.0 简单看了一下,从产品定位来说真是挺好. 把开发人员细分成普通web开发人员和移动web开发人员.正好用到了手机地图这块决定尝 ...

  2. Customize Acrylic Brush in UWP Applications(在UWP中自定义亚克力笔刷)

    原文 Customize Acrylic Brush in UWP Applications(在UWP中自定义亚克力笔刷) Windows 10 Fall Creators Update(Build ...

  3. bootstrap学习之路

    接触bootstrap也半年有余,从一开始不知道如何使用,到知道其各个模块的具体功能,再到提炼哪些使用的比较多,再此又体会到bootstrap源码的精髓,通过oocss写的类使其感觉更有易用性,开始本 ...

  4. 【读书笔记】——《A Brief History of Humankind》

    I encourage all of us, whatever our beliefs, to question the basic narratives of our world, to conne ...

  5. chaos —— 混沌

    混沌,一个被严重滥用的物理数学概念. 混沌(chaos)是一个动力学系统(Dynamic System)概念,指的是确定性动力学系统因对初值敏感而表现出的不可预测的.类似随机性的运动. 1. 洛伦兹吸 ...

  6. scipy —— 丰富的子包（io、cluster）

    io,顾名思义,input/output,输入输出接口: 1. io Input and output (scipy.io) - SciPy v0.18.1 Reference Guide wavfi ...

  7. React学习（2）——action，reducer

    action creator 是一个函数,格式如下: var actionCreator = function() { // 构建一个 action 并返回它 return { type: 'AN_A ...

  8. [WPF] PerformClick ?

    原文:[WPF] PerformClick ? [WPF] PerformClick ?  周银辉 WPF没有提供这个方法,还真是让人觉得有些讨厌啊.而关于这个嘛,Google中搜一下,一大堆,但一般 ...

  9. mac_开发机初始化环境

    #安装 homebrew 类似 yum ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/ma ...

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

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