I often see many abbreviated conditional expression statements in the codes of great people everywhere. After reading some articles introducing this aspect, I think 3 ways 2 says if this article (http://www.thomasfrank.se/3_ways_2_say_if.html) is not bad. In this article, the author summarized the characteristics and uses of the traditional expressions of if...else..., ?:, &&/||, and summarized them 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 the 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... 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 necessarily return true. In order to ensure that subsequent logic or || judgments are not executed, a true value needs to be returned, the same below || r==1 && (small() || true) || r==2 && (big() || true) || huge(); // Check the values of our variables alert(r+" "+x);4. Execute the 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) // Someone pointed out in the comment that the anonymous functions here are unnecessary, and this is the case when there is only one executable code, but if there is multiple code to be executed, the anonymous functions are still 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 online article, the author's focus is on the shortness of the code, so in general, the author prefers to use the ?: operator, and feels that the && and || methods need to type a few more letters, which makes it seem more cumbersome. When executing functions, it is more convenient to use traditional if...else. In its comments, some people suggested that making the Client side code simpler and shorter is more effective than improving some inconspicuous running efficiency, which is also correct in some programs. Therefore, it may be more important to choose a more concise form to process conditional statements from a formal perspective than the operating efficiency of these statements themselves, not to mention that the operating efficiency will vary from UA to UA.
In the judgment that there are only two conditions, using if...else or ?: are both quite straightforward, while the operation methods of && and || are a little complicated. But in fact, as long as you understand the following two basic principles, all problems will be solved:
First, when using the logic and && and logical or || operators, the direction is from left to right. The && stops when the first value is false (or value that can be converted to false, such as null/undefined/0/""/NaN, etc.), and stops when the first value is true (or value that can be converted to true); the value returned by the entire condition is the value of the last detected condition, not necessarily just true/false.
Second, logic has higher priority than the && operator than the logical or operator.
According to the first principle, r==0 and "small" are calculated in order from left to right. If r==0 is true, "small" will be detected. "small" is a non-empty string, so c will be taken as "small"; if r==0 is false, the second condition "big" detection of logic or || is directly started. By the same token, c should be taken as "big". According to the second principle, there is no need to add brackets during the operation of variable c in the above code.
Since using the ?: and &&, || operators can play a role in simplifying the code in a certain program, it is very important in library source code such as jQuery. In summary, this type of operator has two main applications: one is to assign or return values, and the other is to execute code (for now, classify it).
The usages for assignment are everywhere in jQuery or other libraries. A classic application is to implement the function of default values for interfaces. We can easily write such code, such as:
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);Whether it works?: or && and ||, since they do not have the innate code block function of if...else (wrapped with {} number), they can only execute single-line code, such as:
(xmlHttpRequest.readyState==4 && xmlHttpRequest.status ==200) ? alert("Success!"): alert("Failure!");So if there are multiple codes that need to be executed, anonymous functions should be used. like:
(xmlHttpRequest.readyState==4 && xmlHttpRequest.status ==200) ? function(){alert("Success!"); var a=100; alert(a);}: alert("Failure!");There are too many abbreviations in jQuery 1.7.1 source code, such as line 2643:
// Hook for boolean attributesboolHook = { 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 and summarize.
The above Javascript abbreviation conditional sentence (recommended) is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.