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

Use shell script to install python3.8 environment in CentOS7 (recommended)

One-click execution To install Python 3.8 in a vi...

Guide to Efficient Use of MySQL Indexes

Preface I believe most people have used MySQL and...

React implements import and export of Excel files

Table of contents Presentation Layer Business Lay...

Detailed explanation of IFNULL() and COALESCE() functions to replace null in MySQL

The isnull() function cannot be used as a substit...

How to start a Java program in docker

Create a simple Spring boot web project Use the i...

How to install MySQL and enable remote connection on cloud server Ubuntu_Server_16.04.1

1. Install MySQL: Use the following three command...

A brief discussion on using Cartesian product principle to query multiple tables in MySQL

MySQL multi-table query (Cartesian product princi...

Basic Implementation of AOP Programming in JavaScript

Introduction to AOP The main function of AOP (Asp...

Move MySQL database to another disk under Windows

Preface Today I installed MySQL and found that th...

The DOCTYPE mode selection mechanism of well-known browsers

Document Scope This article covers mode switching...

Super simple qps statistics method (recommended)

Statistics of QPS values ​​in the last N seconds ...

Comprehensive analysis of prototypes, prototype objects, and prototype chains in js

Table of contents Understanding Prototypes Unders...

Detailed example of HTML element blocking Flash

Copy code The code is as follows: wmode parameter...

Detailed explanation of the difference between var, let and const in JavaScript

Table of contents As a global variable Variable H...

How to insert batch data into MySQL database under Node.js

In the project (nodejs), multiple data need to be...