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

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

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

前言

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

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

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

之前在學(xué)校開(kāi)發(fā)一些項(xiàng)目的時(shí)候根本就沒(méi)有用到過(guò)，因?yàn)槲覀円呀?jīng)被傳統(tǒng)概念束縛了。我們對(duì)于&&運(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呀！一開(kāi)始也是和你們一樣，但是在學(xué)習(xí)中實(shí)踐了一下，并非這樣，這里請(qǐng)?jiān)试S小編打個(gè)小廣告，各位同行可以在騰訊課堂或者bilibili搜索渡一教育，良心推薦，說(shuō)實(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，好了小編也不和你們賣(mài)關(guān)子了。直接進(jìn)入正題。

本章目標(biāo)

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

案例實(shí)踐(通過(guò)加載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>編號(hào)</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>

效果圖如下：

這是我們沒(méi)有使用&&運(yùn)算符和||運(yùn)算符的結(jié)果，接下來(lái)我們使用&&運(yùn)算符和||運(yùn)算符來(lái)簡(jiǎn)化if...else..if...else語(yǔ)句。

<!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>編號(hào)</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)算符代替使代碼更加簡(jiǎn)潔方便，當(dāng)然&&運(yùn)算符和||運(yùn)算符的使用不僅僅是這樣，總之&&運(yùn)算符和||運(yùn)算符的功能特別強(qiáng)大，我們要學(xué)會(huì)使用。

結(jié)尾

&&運(yùn)算符

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

||運(yùn)算符

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

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

總結(jié)

到此這篇關(guān)于javascript中&&運(yùn)算符與||運(yùn)算符使用的文章就介紹到這了,更多相關(guān)JS中&&運(yùn)算符與||運(yùn)算符內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: