javascript中&&運算符與||運算符的使用方法實例
前言
在前端開發(fā)領(lǐng)域中,&&運算符和||運算符是使用率和頻繁度比較高的。
&&運算符和||運算符的功能特別強大,想成為一名優(yōu)秀的前端工程師,&&運算符和||運算符是必不可少的。
但是很多前端工程師(剛?cè)腴T的小白【包括小編本身】)對于&&運算符和||運算符的使用率極為低下。
之前在學(xué)校開發(fā)一些項目的時候根本就沒有用到過,因為我們已經(jīng)被傳統(tǒng)概念束縛了。我們對于&&運算符和||運算符的理解是這樣的。
&&運算符
- &&運算符左邊的結(jié)果和右邊的結(jié)果同時為真時,結(jié)果真。
- &&運算符左邊的結(jié)果和右邊的結(jié)果同時為假時,結(jié)果為假。
- &&運算符左邊的結(jié)果和右邊的結(jié)果有一個為假時,結(jié)果為假。
總結(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)子了。直接進入正題。
本章目標(biāo)
- 學(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
總結(jié)
到此這篇關(guān)于javascript中&&運算符與||運算符使用的文章就介紹到這了,更多相關(guān)JS中&&運算符與||運算符內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
layer關(guān)閉彈出窗口觸發(fā)表單提交問題的處理方法
今天小編就為大家分享一篇layer關(guān)閉彈出窗口觸發(fā)表單提交問題的處理方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09javascript如何讀寫本地sqlite數(shù)據(jù)庫
這篇文章主要介紹了javascript如何讀寫本地sqlite數(shù)據(jù)庫問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-02-02JS面向?qū)ο螅?)之Object類,靜態(tài)屬性,閉包,私有屬性, call和apply的使用,繼承的三種實現(xiàn)方法
這篇文章主要介紹了JS面向?qū)ο螅?)之Object類,靜態(tài)屬性,閉包,私有屬性, call和apply的使用,繼承的三種實現(xiàn)方法的相關(guān)資料,需要的朋友可以參考下2016-02-02JavaScript中條件語句的優(yōu)化技巧總結(jié)
這篇文章主要給大家介紹了關(guān)于JavaScript中條件語句的優(yōu)化技巧,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12firefox瀏覽器下javascript 拖動層效果與原理分析代碼
這篇文章主要給大家介紹了關(guān)于在firefox瀏覽器下如何利用javascript實現(xiàn)拖動層效果,以及其中的原理分析,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,下面來一起看看吧2007-12-12