Javascript Short Conditional Statement of Recommendation

I often see many abbreviated conditional expressions in the bull's code everywhere. I read some articles about them and think 3 ways 2 say if (http://www.thomasfrank.se/3_ways_2_say_if.html) Not bad.In this article, the author addresses traditional if...else..., ?:, & & The features and uses of the three conditional expressions are summarized 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. Executing functions

// 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() Function does not 1 Fixed Return true In order to guarantee subsequent logic or || Judgement is not executed and needs to be returned true Value, same as below 
|| r==1 && (small() || true) 
|| r==2 && (big() || true) 
|| huge(); 
 
// Check the values of our variables 
alert(r+" "+x);

4. Execute 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) 
// Some people have commented that anonymous functions are not necessary here, but only 1 This is true for executable code, but if you have more than one code to execute, anonymous functions are good 
|| 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 this web article, the author's concern is whether the code is short or not, so in general to achieve the same functions, the author prefers to use ?:Operator, but feel & & It is cumbersome to type a few more letters with ||.It is more convenient to use the traditional if...else when performing functions.In its comments, it has been suggested that making the Client side code more concise and less useful than improving some minor operating efficiency, which is also true for some program.So choosing a more concise form to process conditional statements may be more important than the efficiency of the statements themselves, and the efficiency will vary depending on UA.

In a judgment where only two conditions exist, use if...else or ?:They are fairly straight forward, and & & And || work in a slightly more complex way.However, as long as you understand the following two basic principles, all problems will be solved:

1. When using logic and & & When operating with logical or || operators, the direction is left-to-right. & & The operation stops when the first value is false (or a value that can be converted to false, such as null/undefined/0/"/NaN, etc.) and stops when the first value is true (or a value that can be converted to true).The value returned by the entire condition is the value of the last detected condition, not necessarily true/false only.

2. Logical and & & Operators have a higher priority than logical or operator.

According to the first principle, r==0 and "small" are calculated in left-to-right order. If r==0 is true, then "small" is detected, and "small" is a non-empty string, so c is taken as "small";If r==0 is false, the logical or || second condition "big" detection will start directly. Similarly, c should be big.According to the second principle, parentheses are not necessary in the operation of the variable c in the above code.

Because of the use of ?:and & & The || operator can simplify code on certain programs and is important in library source code like jQuery.Generally speaking, there are two main applications of this type of operator, one is assignment or return value, and the other is execution code (temporary classification).

Assignment usage is ubiquitous in jQuery or other libraries. A classic application is the ability to implement default values for interfaces, and it's easy to write code like this:

var myObj = function(options) {
  var color = options.color || this.defaults.defaults;
  var backgroundColor = options.backgroundColor
      || this.defaults.backgroundColor;
};
myObj.prototype.defaults = {
  color : "#393939",
  backgroundColor : "#222"
}
var myIns = new myObj({
  color : "#80FF80"
});
console.log("color:"+myIns.color+", backgroundColor: "+myIns.backgroundColor);

Not used ?:still & & And |, since if...else is not inherently code block capable (wrapped in {}), they can only execute a single line of code, such as:

(xmlHttpRequest.readyState==4 && xmlHttpRequest.status ==200) ? alert("Success!"): alert("Failure!");

So if you have more than one code to execute, you should use anonymous functions.For example:

(xmlHttpRequest.readyState==4 && xmlHttpRequest.status ==200) ? function(){alert("Success!"); var a=100; alert(a);}: alert("Failure!");

There are too many abbreviations in the jQuery 1.7.1 source code, such as line 2643:

// Hook for boolean attributes
boolHook = {
  get: function( elem, name ) {
    // Align boolean attributes with corresponding properties
    // Fall back to attribute presence where some booleans are not supported
    var attrNode,
      property = jQuery.prop( elem, name );
    return property === true || 
typeof property !== "boolean" && ( attrNode = elem.getAttributeNode(name) ) && attrNode.nodeValue !== false ?
      name.toLowerCase() :
      undefined;
  },
  set:function(){
 * ...
  }
}

It seems that we have to continue learning to summarize.