This is the fourth day of my participation in the November Gwen Challenge. See details: The last Gwen Challenge 2021.
preface
In the field of the front-end developer, && operator and | | operators is utilization rate and the frequent degree is higher.
&& operator and | | operator function is particularly strong, want to be a good front end engineer, && operator and | | operators are essential.
But a lot of front-end engineer (beginner’s white) including small make up itself 】 【 for && operator and | | operators utilization rate is extremely low.
We didn’t use it when we were developing projects at school because we were stuck with traditional concepts. We for && operator and | | operators understand is as follows.
&& operator
- The result of the && operator is true when both the left and right sides of the operator are true.
- The result of the && operator is false when both the left and right sides of the operator are false.
- The && operator is false when either the left or right result is false.
Conclusion: both true and false
| | operators
- The results on the left and the right of the | | operator result is true at the same time, the result is true.
- The results on the left and the right of the | | operator results when there is a false, the result is true.
- The results on the left and the right of the | | operator result is false at the same time, the result is false.
Conclusion: the same false is false, otherwise true
But is this really the case? Let’s do a little demo of the && operator
<! DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
let result=1&&2;
console.log(result);
</script>
</body>
</html>
Copy the codeThe result you want to return is true! The beginning is like you, but in practice, learning is not so, please allow small make up a small AD here, you can peer at tencent classroom or bilibili search crossing a education, conscience is recommended, to be honest in the teacher speak very good, peers are interested can go to try to digress, we return to the chase, It actually returns 2.
| | operators of small demo
<! DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var result=1||0
console.log(result);
</script>
</body>
</html>
Copy the codeResults:
Aren’t you surprised! , my god! To my surprise, both returns were not true or false, so I’m not going to keep you in suspense. Get straight to the point.
Objective in this chapter
- Learn how to use && operator and | | operators
- Through the case of && operator and | | operators to understand
Case study (Rendering data by loading JSON)
<! DOCTYPEhtml>
<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>Serial number</th>
<th>The name of the</th>
<th>The price</th>
<th>state</th>
</tr>
</table>
<script src=".. / js/jquery - 3.3.1. Min. Js. "" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//0 represents to be paid, 1 represents paid, 2 represents received, and 3 represents others
var orderArray=[
{
id:10001.name:'millet 9'.price:1999.status:0}, {id:10002.name:'huaweiPro'.price:2999.status:1}, {id:10003.name:'millet 8'.price:999.status:2}, {id:10004.name:'glory 8 x'.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("To be paid")}else if(orderArray[i].status==1){
td4.html("Paid")}else if(orderArray[i].status==2){
td4.html("Received");
}else if(orderArray[i].status==3){
td4.html("Other")
}
tr.append(td1);
tr.append(td2);
tr.append(td3);
tr.append(td4);
$("#myTab").append(tr);
}
</script>
</body>
</html>
Copy the codeThe renderings are as follows:
This is we didn’t use && operator and | | operators as a result, we use && operator and | | operators to simplify the if… else.. if… The else statement.
<! DOCTYPEhtml>
<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>Serial number</th>
<th>The name of the</th>
<th>The price</th>
<th>state</th>
</tr>
</table>
<script src=".. / js/jquery - 3.3.1. Min. Js. "" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//0 represents to be paid, 1 represents paid, 2 represents received, and 3 represents others
var orderArray=[
{
id:10001.name:'millet 9'.price:1999.status:0}, {id:10002.name:'huaweiPro'.price:2999.status:1}, {id:10003.name:'millet 8'.price:999.status:2}, {id:10004.name:'glory 8 x'.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 && "To be paid" ||orderArray[i].status== 1 && "Paid" ||orderArray[i].status== 2 && "Received" ||orderArray[i].status== 3 && "Other"
td4.html(status);
// if(orderArray[i].status==0){
// td4.html(" to be paid ")
// }else if(orderArray[i].status==1){
// td4.html(" paid ")
// }else if(orderArray[i].status==2){
// td4.html(" received ");
// }else{
// td4.html(" other ")
/ /}
tr.append(td1);
tr.append(td2);
tr.append(td3);
tr.append(td4);
$("#myTab").append(tr);
}
</script>
</body>
</html>
Copy the codeHere we solve if.. with one line of code. else.. if.. Else code operation, USES the && operator and | | operator instead of make the code more concise and easy, of course, && operator and | | operators use is not only such, anyhow && operator and | | operators is particularly powerful, we must learn to use.
At the end
&& operator
- It looks at the result of the first expression converted to a Boolean, if true, it looks at the result of the second expression converted to a Boolean, and if there are only two expressions, it looks at the result of the second expression and returns the value of that expression.
- When the value of the first expression is false, the value of the first expression is returned without looking back
- If the first operand is an object, return the second operand
- If both operands are objects, return the second operand
- If the second operand is an object, the object is returned only if the first operand evaluates to true
- If an operand is null, null is returned
- NaN is returned if the first operand is NaN
- Returns undefined if the first operand is undefined
| | operators
- It looks at the result of the first expression converted to a Boolean, and if false, it looks at the result of the second expression converted to a Boolean, and if there are only two expressions, it looks at the result of the second expression and returns the value of that expression
- When the value of the first expression is false, the value of the second expression is returned without looking back
- Returns the first first operand if the first operand is an object
- The second operand is returned if the first operand evaluates to false
- If both operands are objects, return the first operand
- If both operands are null, null is returned
- If both operands are NaN, NaN is returned
- If both operands are undefined, undefined is returned
Values deemed false: false, “”, NaN, null, undefined