javascript中&&運算符與||運算符的使用方法實例
更新時間：2021年11月09日 16:44:41 作者：二郎神楊戩
&&和||總是傻傻分不清,在這里詳細記錄一下吧,也給你們分享一下,所以這篇文章主要給大家介紹了關于javascript中&&運算符與||運算符的使用方法,需要的朋友可以參考下
前言
在前端開發(fā)領域中，&&運算符和||運算符是使用率和頻繁度比較高的。
&&運算符和||運算符的功能特別強大，想成為一名優(yōu)秀的前端工程師，&&運算符和||運算符是必不可少的。
但是很多前端工程師(剛入門的小白【包括小編本身】)對于&&運算符和||運算符的使用率極為低下。
之前在學校開發(fā)一些項目的時候根本就沒有用到過，因為我們已經(jīng)被傳統(tǒng)概念束縛了。我們對于&&運算符和||運算符的理解是這樣的。
&&運算符
- &&運算符左邊的結果和右邊的結果同時為真時，結果真。
- &&運算符左邊的結果和右邊的結果同時為假時，結果為假。
- &&運算符左邊的結果和右邊的結果有一個為假時，結果為假。
總結：同真為真，否則為假
||運算符
- ||運算符左邊的結果和右邊的結果同時為真，結果為真。
- ||運算符左邊的結果和右邊的結果有一個為假時，結果為真。
- ||運算符左邊的結果和右邊的結果同時為假時，結果為假。
總結：同假為假，否則為真
但是實際上真的是這樣嗎?我們看下關于&&運算符的小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搜索渡一教育，良心推薦，說實在里面的老師講課講的非常優(yōu)秀，有興趣的同行可以去嘗試一下，扯遠了，我們回歸正題，實際上返回的結果是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渲染數(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>
效果圖如下：
這是我們沒有使用&&運算符和||運算符的結果，接下來我們使用&&運算符和||運算符來簡化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的代碼操作，使用了&&運算符和||運算符代替使代碼更加簡潔方便，當然&&運算符和||運算符的使用不僅僅是這樣，總之&&運算符和||運算符的功能特別強大，我們要學會使用。
結尾
&&運算符
- 先看第一個表達式轉(zhuǎn)換為布爾值的結果，如果為真，那么它會看第二個表達式轉(zhuǎn)換為布爾值的結果，然后如果只有兩個表達式的話，只看第二個表達式的結果就可以返回該表達式的值。
- 當?shù)谝粋€表達式的值為false時，直接返回第一個表達式的值，不再往后看
- 如果第一個操作數(shù)是對象，則返回第二個操作數(shù)
- 如果兩個操作數(shù)都是對象，則返回第二個操作數(shù)
- 如果第二個操作數(shù)是對象，則只有在第一個操作數(shù)的求值結果為true的情況才會返回該對象
- 如果一個操作數(shù)為null,則返回null
- 如果第一個操作數(shù)是NaN,則返回NaN
- 如果第一個操作數(shù)是undefined,則返回undefined
||運算符
- 先看第一個表達式轉(zhuǎn)換為布爾值的結果，如果為假，那么它會看第二個表達式轉(zhuǎn)換為布爾值的結果，然后如果只有兩個表達式的話，只看第二個表達式的結果就可以返回該表達式的值
- 當?shù)谝粋€表達式的值為false時，直接返回第二個表達式的值，不再往后看
- 如果第一個操作數(shù)是對象，則返回第一個第一個操作數(shù)
- 如果第一個操作數(shù)的求值結果為false,則返回第二個操作數(shù)
- 如果兩個操作數(shù)都是對象，則返回第一個操作數(shù)
- 如果兩個操作數(shù)都是null,則返回null
- 如果兩個操作數(shù)都是NaN，則返回NaN
- 如果兩個操作數(shù)都是undefined，則返回undefined
被認定為false的值：false, "", NaN, null, undefined
總結
到此這篇關于javascript中&&運算符與||運算符使用的文章就介紹到這了,更多相關JS中&&運算符與||運算符內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
今天小編就為大家分享一篇layer關閉彈出窗口觸發(fā)表單提交問題的處理方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
javascript如何讀寫本地sqlite數(shù)據(jù)庫
這篇文章主要介紹了javascript如何讀寫本地sqlite數(shù)據(jù)庫問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
JS面向?qū)ο螅?）之Object類，靜態(tài)屬性，閉包，私有屬性， call和apply的使用，繼承的三種實現(xiàn)方法
這篇文章主要介紹了JS面向?qū)ο螅?）之Object類，靜態(tài)屬性，閉包，私有屬性， call和apply的使用，繼承的三種實現(xiàn)方法的相關資料,需要的朋友可以參考下2016-02-02
這篇文章主要給大家介紹了關于JavaScript中條件語句的優(yōu)化技巧，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
本文給大家介紹bootstrap按鈕相關知識，包括按鈕大小、按鈕狀態(tài)、按鈕標簽相關樣式定義，對bootstrap按鈕相關知識感興趣的朋友一起學習吧2016-01-01
JS模塊與命名空間的介紹，需要的朋友可以參考一下2013-03-03
本代碼從file域獲取本地圖片url并將本地圖片顯示到瀏覽器上，具體實現(xiàn)如下，感興趣的朋友可以參考下，希望對大家有所幫助2013-08-08
AutoSave/自動存儲功能實現(xiàn)...2007-03-03
這篇文章主要介紹了javascript 解決瀏覽器不支持的問題的相關資料,需要的朋友可以參考下2016-09-09
firefox瀏覽器下javascript 拖動層效果與原理分析代碼
這篇文章主要給大家介紹了關于在firefox瀏覽器下如何利用javascript實現(xiàn)拖動層效果，以及其中的原理分析，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，下面來一起看看吧2007-12-12