Javascript tutorial: methods for optimizing if shorthand statements

  • 2020-03-30 02:59:46
  • OfStack

UglifyJS is a tool to compress and beautify javascript, and in its documentation I've seen several ways to optimize if statements. Although I haven't used it for some tentative testing yet, you can see here that it does make js look good. Some might think that the if statement is that simple, and how far can it be optimized? But look at the following ways and you may change your mind.

Use common ternary operators

If (foo) bar (); The else baz (); = = > Foo? Bar () : baz ();
If (! Foo) bar (); The else baz (); = = > Foo? Baz () : the bar ();
If (foo) return the bar (); The else return baz (); = = > Return foo? Bar () : baz ();

You are probably familiar with the use of the ternary operator above to optimize if statements, and you probably use it a lot.


<script>
var i=9
var ii=(i>8)?100:9;
alert(ii);
</script>

Output results:

100

Use and(&&) and or(||) operators

If (foo) bar (); = = > Foo && bar ();
If (! Foo) bar (); = = > Foo | | bar ();

To be honest, I haven't written code like this, which I saw when I was studying brother bird's Linux kitchen, but I didn't expect to implement it in js.

3. Omit curly braces {}

If (foo) return the bar (); The else something (); = = > {if (foo) return the bar (); Something ()}

This is familiar to you and me, but I recommend doing it while your code is optimized, or letting UglifyJS do it for you. After all, the code is not very readable without a brace.

At this point, I came up with a way for the father of jQuery to get attributes for HTML elements in JavaScript mastery.

The function getAttr (el, attrName) {
Var attr = {'for':'htmlFor', 'class':'className'}[attrName] || attrName;
};

If we don't, we'll probably need two if statements to do the processing, and the above code is not only clean and efficient, but also readable.

If you think about it, sometimes we can all find effective ways to solve our problems, but the key is whether we put our heart into finding a better way.

If (x==null

If (x==null) or if(typeof (x) == 'undefined') can be abbreviated as if(! X), not verified.

If (x) means that x is not null

Determines whether an object exists


if(document.form1.softurl9){
//Determine whether softurl9 exists to prevent js errors
}


if(document.getElementById("softurl9")){
//Determine whether softurl9 exists to prevent js errors
}


Supplement:

Javascript || && if


<script type="text/javascript"> 

     If you want to write  
    if (!false) 
    { 
        alert('false'); 
    } 

     So let's think about writing : 
    false || alert('false'); 

    false || alert('false'); true || alert('true'); //output false; 
     with "||" Under the condition of , First condition true, Return directly without detecting the second true. First condition false , will perform the second condition detection  

    false && alert('false'); true && alert('true'); //output true 
     with "&&" Under the condition of , First condition true The second condition is also tested. First condition false , return directly false To exit.  

     In a nutshell ,  replace  if  Simple and practical , ? :  replace  if else The practical.   Write short, concise code  

    usage: 
    $("#regform input[type!=hidden]").each( 
        function(index) { 
            $(this).parent().has("div.valid-under").length || $('<div class="valid-under"></div>').appendTo($(this).parent()); 
        } 
    );   
</script>


Related articles: