Examples of using && and || operators in javascript

Preface
&& Operator
|| Operator

A small demo of the || operator

Chapter Objectives

Case practice (rendering data by loading json)

Conclusion

Summarize

Preface

In the field of front-end development, the && operator and the || operator are used most frequently.

The functions of the && operator and the || operator are particularly powerful. If you want to become an excellent front-end engineer, the && operator and the || operator are indispensable.

However, many front-end engineers (newbies [including the editor himself]) use the && operator and the || operator very little.

We never used it when developing some projects at school before because we were bound by traditional concepts. This is our understanding of the && operator and the || operator.

&& Operator

The && operator returns true when both the result on the left and the result on the right are true.
The && operator returns false if both the result on the left and the result on the right are false.
The && operator returns false if either the result on the left or the result on the right is false.

Summary: True if the same, false otherwise

|| Operator

The result is true if both the result on the left and the result on the right of the || operator are true.
The result of the || operator is true when either the result on the left or the result on the right is false.
The result of the || operator is false when both the result on the left and the result on the right are false.

Summary: If the same is false, it is false; otherwise, it is true

But is this really the case? Let's take a look at a small demo of the && operator.

<!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>

Is the result you want returned true? At the beginning, I was the same as you, but after practicing it, I found that it was not the case. Please allow me to make a small advertisement here. You can search for Duyi Education on Tencent Classroom or bilibili. I highly recommend it. To be honest, the teachers there give excellent lectures. Those who are interested can try it. Now let’s get back to the topic. The result returned is actually 2.

A small demo of the || operator

<!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>

result:

Are you surprised? , oh my god! To my surprise, the return value of both times is not true or false. Okay, I won’t keep you in suspense. Let’s get straight to the point.

Chapter Objectives

Learn to use the && operator and the || operator
Strengthen your understanding of the && operator and the || operator through examples

Case practice (rendering data by loading json)

<!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>Number</th>
               <th>Name</th>
               <th>Price</th>
               <th>Status</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 pending payment, 1 represents paid, 2 represents received, 3 represents others var orderArray=[
           {
               id:10001,
               name:'Xiaomi 9',
               price:1999,
               status:0,
           },
           {
               id:10002,
               name:'huaweiPro',
               price:2999,
               status:1,
           },
           {
               id:10003,
               name:'Xiaomi 8',
               price:999,
               status:2,
           },
           {
               id:10004,
               name:'Honor 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("Waiting for payment")
               }else if(orderArray[i].status==1){
                   td4.html("Paid")
               }else if(orderArray[i].status==2){
                   td4.html("Goods received");
               }else if(orderArray[i].status==3){
                   td4.html("Others")
               }
               tr.append(td1);
               tr.append(td2);
               tr.append(td3);
               tr.append(td4);
               $("#myTab").append(tr);
           }
       </script>
   </body>
</html>

The effect diagram is as follows:

This is the result of not using the && operator and the || operator. Next, we use the && operator and the || operator to simplify the if...else..if...else statement.

<!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>Number</th>
               <th>Name</th>
               <th>Price</th>
               <th>Status</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 pending payment, 1 represents paid, 2 represents received, 3 represents others var orderArray=[
           {
               id:10001,
               name:'Xiaomi 9',
               price:1999,
               status:0,
           },
           {
               id:10002,
               name:'huaweiPro',
               price:2999,
               status:1,
           },
           {
               id:10003,
               name:'Xiaomi 8',
               price:999,
               status:2,
           },
           {
               id:10004,
               name:'Honor 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 && "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("Waiting for payment")
// }else if(orderArray[i].status==1){
// td4.html("Paid")
// }else if(orderArray[i].status==2){
// td4.html("Goods received");
// }else{
// td4.html("Others")
// }
               tr.append(td1);
               tr.append(td2);
               tr.append(td3);
               tr.append(td4);
               $("#myTab").append(tr);
           }
       </script>
   </body>
</html>

Here we use one sentence of code to solve the if..else..if..else code operation, and use the && operator and || operator to make the code more concise and convenient. Of course, the use of the && operator and || operator is not just this. In short, the functions of the && operator and || operator are particularly powerful, and we must learn to use them.

Conclusion

&& Operator

It first looks at the result of the first expression converted to a Boolean value. If that is true, it then looks at the result of the second expression converted to a Boolean value. Then, if there are only two expressions, it returns the value of that expression by looking at the result of the second expression.
When the value of the first expression is false, the value of the first expression is returned directly without looking back.
If the first operand is an object, then the second operand is returned.
If both operands are objects, returns the second operand.
If the second operand is an object, it is returned only if the first operand evaluates to true.
If one operand is null, returns null.
If the first operand is NaN, then NaN is returned.
If the first operand is undefined, then it returns undefined.

|| Operator

First it looks at the result of the first expression converted to a Boolean value. If it is false, it looks at the result of the second expression converted to a Boolean value. Then, if there are only two expressions, it only looks at the result of the second expression to return the value of that expression.
When the value of the first expression is false, the value of the second expression is returned directly without looking back.
If the first operand is an object, then the first operand is returned.
If the first operand evaluates to false, the second operand is returned.
If both operands are objects, the first operand is returned.
If both operands are null, returns null.
If both operands are NaN, then NaN is returned.
If both operands are undefined, then undefined is returned.

Values considered false: false, "", NaN, null, undefined

Summarize

This is the end of this article about the use of && operator and || operator in javascript. For more relevant content about && operator and || operator in JS, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in: