javascript中&&運算符與||運算符的使用方法實例

更新時間：2021年11月09日 16:44:41 作者：二郎神楊戩

&&和||總是傻傻分不清,在這里詳細記錄一下吧,也給你們分享一下,所以這篇文章主要給大家介紹了關(guān)于javascript中&&運算符與||運算符的使用方法,需要的朋友可以參考下

前言

在前端開發(fā)領(lǐng)域中，&&運算符和||運算符是使用率和頻繁度比較高的。

&&運算符和||運算符的功能特別強大，想成為一名優(yōu)秀的前端工程師，&&運算符和||運算符是必不可少的。

但是很多前端工程師(剛?cè)腴T的小白【包括小編本身】)對于&&運算符和||運算符的使用率極為低下。

之前在學(xué)校開發(fā)一些項目的時候根本就沒有用到過，因為我們已經(jīng)被傳統(tǒng)概念束縛了。我們對于&&運算符和||運算符的理解是這樣的。

&&運算符

&&運算符左邊的結(jié)果和右邊的結(jié)果同時為真時，結(jié)果真。
&&運算符左邊的結(jié)果和右邊的結(jié)果同時為假時，結(jié)果為假。
&&運算符左邊的結(jié)果和右邊的結(jié)果有一個為假時，結(jié)果為假?！　?/li>

總結(jié)：同真為真，否則為假

||運算符

||運算符左邊的結(jié)果和右邊的結(jié)果同時為真，結(jié)果為真。
||運算符左邊的結(jié)果和右邊的結(jié)果有一個為假時，結(jié)果為真。
||運算符左邊的結(jié)果和右邊的結(jié)果同時為假時，結(jié)果為假。

總結(jié)：同假為假，否則為真

但是實際上真的是這樣嗎?我們看下關(guān)于&&運算符的小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>

你想的結(jié)果是不是返回true呀！一開始也是和你們一樣，但是在學(xué)習(xí)中實踐了一下，并非這樣，這里請允許小編打個小廣告，各位同行可以在騰訊課堂或者bilibili搜索渡一教育，良心推薦，說實在里面的老師講課講的非常優(yōu)秀，有興趣的同行可以去嘗試一下，扯遠了，我們回歸正題，實際上返回的結(jié)果是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>

結(jié)果：

是不是很驚訝！，天哪！出乎我的意料，兩次的結(jié)果返回值都不是true或者false，好了小編也不和你們賣關(guān)子了。直接進入正題。

本章目標

學(xué)會使用&&運算符和||運算符
通過案例加強對&&運算符和||運算符的理解

案例實踐(通過加載json渲染數(shù)據(jù))

<!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>狀態(tài)</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>

效果圖如下：

這是我們沒有使用&&運算符和||運算符的結(jié)果，接下來我們使用&&運算符和||運算符來簡化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>狀態(tài)</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的代碼操作，使用了&&運算符和||運算符代替使代碼更加簡潔方便，當(dāng)然&&運算符和||運算符的使用不僅僅是這樣，總之&&運算符和||運算符的功能特別強大，我們要學(xué)會使用。

結(jié)尾

&&運算符

先看第一個表達式轉(zhuǎn)換為布爾值的結(jié)果，如果為真，那么它會看第二個表達式轉(zhuǎn)換為布爾值的結(jié)果，然后如果只有兩個表達式的話，只看第二個表達式的結(jié)果就可以返回該表達式的值。
當(dāng)?shù)谝粋€表達式的值為false時，直接返回第一個表達式的值，不再往后看
如果第一個操作數(shù)是對象，則返回第二個操作數(shù)
如果兩個操作數(shù)都是對象，則返回第二個操作數(shù)
如果第二個操作數(shù)是對象，則只有在第一個操作數(shù)的求值結(jié)果為true的情況才會返回該對象
如果一個操作數(shù)為null,則返回null
如果第一個操作數(shù)是NaN,則返回NaN
如果第一個操作數(shù)是undefined,則返回undefined

||運算符

先看第一個表達式轉(zhuǎn)換為布爾值的結(jié)果，如果為假，那么它會看第二個表達式轉(zhuǎn)換為布爾值的結(jié)果，然后如果只有兩個表達式的話，只看第二個表達式的結(jié)果就可以返回該表達式的值
當(dāng)?shù)谝粋€表達式的值為false時，直接返回第二個表達式的值，不再往后看
如果第一個操作數(shù)是對象，則返回第一個第一個操作數(shù)
如果第一個操作數(shù)的求值結(jié)果為false,則返回第二個操作數(shù)
如果兩個操作數(shù)都是對象，則返回第一個操作數(shù)
如果兩個操作數(shù)都是null,則返回null
如果兩個操作數(shù)都是NaN，則返回NaN
如果兩個操作數(shù)都是undefined，則返回undefined

被認定為false的值：false, "", NaN, null, undefined