Examples of using && and || operators in javascript

Examples of using && and || operators in javascript

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:
  • js and or operator || && magic use
  • Introduction to the use of Javascript bitwise AND operator (&)
  • Introduction to the use of Javascript bitwise AND assignment operator (&=)
  • Use the special features of operators "||" and "&&" in JScript to simplify code
  • Three different levels of operator &&

<<:  CSS solution for centering elements with variable width and height

>>:  How to configure Http, Https, WS, and WSS in Nginx

Recommend

MySQL 8.0.13 installation and configuration method graphic tutorial under Windows 64 bit

This article shares the installation and configur...

How to clear the validation prompt in element form validation

Table of contents Problem scenario: Solution: 1. ...

Common considerations for building a Hadoop 3.2.0 cluster

One port changes In version 3.2.0, the namenode p...

A detailed introduction to deploying RabbitMQ environment with docker

Prerequisites: Docker is already installed 1. Fin...

Practical example of nested routes in vue.js Router

Table of contents Preface Setting up with Vue CLI...

MySQL 8.0 installation tutorial under Linux

This article introduces how to install MySQL 8.0 ...

Analysis of log files in the tomcat logs directory (summary)

Each time tomcat is started, the following log fi...

A detailed introduction to seata docker high availability deployment

Version 1.4.2 Official Documentation dockerhub st...

HTML Tutorial: DOCTYPE Abbreviation

When writing HTML code, the first line should be ...

MYSQL5.6.33 database master/slave (Master/Slave) synchronization installation and configuration details (Master-Linux Slave-windows7)

1. Installation environment Here is also a record...

Solution to the impact of empty paths on page performance

A few days ago, I saw a post shared by Yu Bo on G...

How to recover files accidentally deleted by rm in Linux environment

Table of contents Preface Is there any hope after...

Introduction and usage examples of ref and $refs in Vue

Preface In JavaScript, you need to use document.q...

Implementation example of Vue+Element+Springboot image upload

Recently, I happened to be in touch with the vue+...

W3C Tutorial (11): W3C DOM Activities

The Document Object Model (DOM) is a platform, a ...