javascript中&&運算符和||運算符的使用

時間 2019-12-09

原文原文鏈接

前言

咱們在前端開發中，&&運算符和||運算符是使用率和頻繁度比較高的，&&運算符和||運算符的功能特別強大，想成爲一名優秀的前端工程師，&&運算符和||運算符是必不可少的，可是不少前端工程師(剛入門的小白【包括小編自己】)對於&&運算符和||運算符的使用率極爲低下，以前小編在學校開發一些項目的時候根本就沒有用到過，由於咱們已經被傳統概念束縛了。咱們對於&&運算符和||運算符的理解是這樣的：javascript

&&運算符

&&運算符左邊的結果和右邊的結果同時爲真時，結果然。
&&運算符左邊的結果和右邊的結果同時爲假時，結果爲假。
&&運算符左邊的結果和右邊的結果有一個爲假時，結果爲假。

　　總結：同真爲真，不然爲假。css

||運算符

||運算符左邊的結果和右邊的結果同時爲真，結果爲真。
||運算符左邊的結果和右邊的結果有一個爲假時，結果爲真。
||運算符左邊的結果和右邊的結果同時爲假時，結果爲假。

　　總結：同假爲假，不然爲真。html

可是實際上真的是這樣嗎?,咱們看下關於&&運算符的小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。java

||運算符的小demojquery

<!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>

結果：json

是否是很驚訝！，天哪！出乎個人意料，兩次的結果返回值都不是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>

效果圖以下：app

這是咱們沒有使用&&運算符和||運算符的結果，接下來咱們使用&&運算符和||運算符來簡化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,

若是您以爲本文對您有用，是對於我最大的幫助，您能夠點擊關注一下。