javascript中&&運(yùn)算符與||運(yùn)算符的使用方法實(shí)例

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

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

前言

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

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

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

之前在學(xué)校開發(fā)一些項(xiàng)目的時(shí)候根本就沒有用到過，因?yàn)槲覀円呀?jīng)被傳統(tǒng)概念束縛了。我們對于&&運(yùn)算符和||運(yùn)算符的理解是這樣的。

&&運(yùn)算符

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

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

||運(yùn)算符

||運(yùn)算符左邊的結(jié)果和右邊的結(jié)果同時(shí)為真，結(jié)果為真。
||運(yùn)算符左邊的結(jié)果和右邊的結(jié)果有一個(gè)為假時(shí)，結(jié)果為真。
||運(yùn)算符左邊的結(jié)果和右邊的結(jié)果同時(shí)為假時(shí)，結(jié)果為假。

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

但是實(shí)際上真的是這樣嗎?我們看下關(guān)于&&運(yù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í)中實(shí)踐了一下，并非這樣，這里請?jiān)试S小編打個(gè)小廣告，各位同行可以在騰訊課堂或者bilibili搜索渡一教育，良心推薦，說實(shí)在里面的老師講課講的非常優(yōu)秀，有興趣的同行可以去嘗試一下，扯遠(yuǎn)了，我們回歸正題，實(shí)際上返回的結(jié)果是2。

||運(yùn)算符的小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)子了。直接進(jìn)入正題。

本章目標(biāo)

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

案例實(shí)踐(通過加載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>價(jià)格</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>

效果圖如下：

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

結(jié)尾

&&運(yùn)算符

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

||運(yùn)算符

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

被認(rèn)定為false的值：false, "", NaN, null, undefined