Detailed explanation of the characteristics and usage examples of three types of conditional expressions in Javascript

The characteristics and uses of the three conditional expressions are summarized and briefly described as follows:

1. if...else Structure

// Set r to 0 or 1 
var r= Math.floor(2*Math.random()) 
// Set a, b and c to "small" if r==0 an else set them to "big" 
// using three different techniques 
// Method 1: If else 
var a; if (r==0){a = "small"} else {a = "big"}; 
// Method 2: Conditional operator 
var b = r==0 ? "small" : "big"; 
 
// Method 3: And/or operators 
var c = r==0 && "small" || "big"; 
// Check the values of our variables 
alert(r+" "+a+" "+b+" "+c);

2. if...else if...else Structure

// Set r to 0,1,2 or 3 
var r= Math.floor(4*Math.random())  
// Set a, b and c to "nada","small","big" and "huge" 
// depending on the value or r using three different techniques 
// Method 1: If.. else if... else 
var a; 
if (r==0){a="nada"} 
else if (r==1){a="small"} 
else if (r==2){a="big"} 
else {a="huge"}; 
// Method 2: Conditional operators 
var b = 
r==0 ? "nada" 
: r==1 ? "small" 
: r==2 ? "big" 
: "huge";  
// Method 3: And/or operators 
var c = 
r==0 && "nada" 
|| r==1 && "small" 
|| r==2 && "big" 
|| "huge";  
// Check the values of our variables 
alert(r+" "+a+" "+b+" "+c);

3. Execute function

// Set r to 0,1,2 or 3 
var r= Math.floor(4*Math.random()) 

// The global variable x and our four functions 
var x=""; 
nada=function(){x+="Nada! "}; 
small=function(){x+="Small! "}; 
big=function(){x+="Big! "}; 
huge=function(){x+="Huge! "}; 
// Call a specific function depending on the value of r 
// using three different techniques  
// Method 1: If.. else if... else 
if (r==0){nada()} 
else if (r==1){small()} 
else if (r==2){big()} 
else {huge()};  
// Method 2: Conditional operators 
r==0 ? nada() 
: r==1 ? small() 
: r==2 ? big() 
: huge(); 
// Method 3: And/or operators 
r==0 && (nada() || true) //nada()函数不一定返回true，为了保证后续的逻辑或||判断不被执行，需要返回true值，下同
|| r==1 && (small() || true) 
|| r==2 && (big() || true) 
|| huge();  
// Check the values of our variables 
alert(r+" "+x);

4. Execution code

// Set r to 0,1,2 or 3 
var r= Math.floor(4*Math.random())  
// The global variable x 
var x=""; 
// Executing different code depending on the value of r 
// using three different techniques  
// Method 1: If.. else if... else 
if (r==0){x+="Nada! "} 
else if (r==1){x+="Small! "} 
else if (r==2){x+="Big! "} 
else {x+="Huge! "}; 
// Method 2: Conditional operators 
r==0 ? function(){x+="Nada! "}() 
: r==1 ? function(){x+="Small! "}() 
: r==2 ? function(){x+="Big! "}() 
: function(){x+="Huge! "}(); 
// Method 3: And/or operators 
r==0 && (function(){x+="Nada! "}() || true) 
//有人在评论中指出这里的匿名函数是不必需的，在只有一条可执行代码时是这样的，但是如果有多条代码需要执行，匿名函数还是不错的
|| r==1 && (function(){x+="Small! "}() || true) 
|| r==2 && (function(){x+="Big! "}() || true) 
|| function(){x+="Huge! "}();  
// Check the values of our variables 
alert(r+" "+x);

In judgments where there are only two conditions, use if...else or ?: They are all quite straightforward, while the operations of && and || are a little more complicated. But in fact, as long as you understand the following two basic principles, all problems will be easily solved:

First, when using logical AND && and logical OR || operators, the direction They are all from left to right. The && operation stops when it reaches the first condition whose value is false (or a value that can be converted to false, such as null/undefined/0/""/NaN, etc.), and the operation reaches the first condition Stops when a condition whose value is true (or a value convertible to true); the value returned by the entire condition is the value of the last condition detected, not necessarily just true/false.

Secondly, the logical AND && operator has a higher priority than the logical OR operator.

The above is the detailed content of Detailed explanation of the characteristics and usage examples of three types of conditional expressions in Javascript. For more information, please follow other related articles on the PHP Chinese website!