前言
我們在前端開發中，&&運算子和||運算子是使用率和頻繁度比較高的，&&運算子和||運算子的功能特別強大，想成為一名優秀的前端工程師，&&運算子和||運算子是必不可少的，但是很多前端工程師(剛入門的小白【包括小編本身】)對於&&運算子和||運算子的使用率極為低下，之前小編在學校開發一些專案的時候根本就沒有用到過，因為我們已經被傳統概念束縛了。我們對於&&運算子和||運算子的理解是這樣的：
&&運算子
- &&運算子左邊的結果和右邊的結果同時為真時，結果真。
- &&運算子左邊的結果和右邊的結果同時為假時，結果為假。
- &&運算子左邊的結果和右邊的結果有一個為假時，結果為假。
總結：同真為真，否則為假。
||運算子
- ||運算子左邊的結果和右邊的結果同時為真，結果為真。
- ||運算子左邊的結果和右邊的結果有一個為假時，結果為真。
- ||運算子左邊的結果和右邊的結果同時為假時，結果為假。
總結：同假為假，否則為真。
但是實際上真的是這樣嗎?,我們看下關於&&運算子的小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,
如果您覺得本文對您有用，是對於我最大的幫助，您可以點選關注一下。