The JS operator "||" and "&" summary (as use)

Recommended for you: Get network issues from WhatsUp Gold. Not end users.
First, a question:

As shown in Fig.:
Assumption on the growth speed display requirements are as follows:
The growth speed of 5 display 1 arrows,
The growth speed of 10 display 2 arrows,
The growth speed of 12 display 3 arrows,
The growth speed of 15 display 4 arrows,
Other displays show 0 different arrows.
How to achieve code?

A little if, else:
Js code Collection code



    var add_level = 0;  
      
    if(add_step == 5){  
        add_level = 1;  
    }  
    else if(add_step == 10){  
        add_level = 2;  
    }  
    else if(add_step == 12){  
        add_level = 3;  
    }  
    else if(add_step == 15){  
        add_level = 4;  
    }  
    else {  
        add_level = 0;  
    }  


Slightly better switch:
Js code Collection code



    var add_level = 0;  
      
    switch(add_step){  
        case 5 : add_level = 1;  
            break;  
        case 10 : add_level = 2;  
            break;  
        case 12 : add_level = 3;  
            break;  
        case 15 : add_level = 4;  
            break;  
        default : add_level = 0;  
            break;  
    }  



If the requirements change:
The growth rate of > 12 display 4 arrows,
The growth rate of > 10 display 3 arrows,
The growth rate of > 5 display 2 arrows,
The growth rate of > 0 display 1 arrows,
The growth rate of <=0 display 0 arrows.

Then the implementation with switch is also very trouble.

What do you think of one line of code to achieve.?
ok, Let us have a look JS powerful expressive force.:
Js code Collection code

var add_level = (add_step==5 && 1) || (add_step==10 && 2) || (add_step==12 && 3) || (add_step==15 && 4) || 0;
The more powerful, but also better:

Js code Collection code

var add_level={'5':1,'10':2,'12':3,'15':4}[add_step] || 0;
Second requirements:
Js code Collection code

var add_level = (add_step>12 && 4) || (add_step>10 && 3) || (add_step>5 && 2) || (add_step>0 && 1) || 0;

First of all we have to sort out a concept, please must remember: in the JS logic operations, 0, " ", null, false, undefined, NaN will be sentenced to false, the other is true (if not missing it, please confirm). We must keep in mind, otherwise the application || and & & there will be a problem.

Here by the way: people often ask me, see a lot of code if (!! attr), why not write directly to if(attr),
In fact, this is a more rigorous method:
Please test typeof 5 and typeof 5 difference!. !! Is the role of the one of the other types of variables into the bool type.

The following mainly discuss the logical operators & & and||.

Almost all & and language ||; & follow the principle of "short circuit", such as & & the first expression is false is not to deal with second expressions, and || opposite.
JS also follows the principle of. But it is interesting to compare their returnvalue.
Code: var attr = true && 4 && "aaa";
So the attr is not a simple true or false, but"aaa"
Have a look again||:
Code: VAR attr = attr || ""; this operation is often used to determine whether a variable is defined, if not defined gave him an initial value, this to parameter defines the function of a default value more useful when. Because JS is not PHP can be directly defined in func type parameters($attr=5). Remind you to remember the above principle: if the argument is 0, " ", false, undefined, null, NaN will be false to handle.

if(a >=5){
alert("Hello");
}
Can be written as:
a >= 5 && alert("Hello");

So just one line of code. But one thing to note is that: & and JS ||; & characteristics help us to streamline the code at the same time, also brings down the code readability. This requires us to balance.
A simplified JS code, can reduce network traffic substantially, especially the massive application of JS public library. Personally recommend practice is: if the application is relatively complex, appropriate to write some comments. This is expression, can simplify the code readability, but will reduce, to read code requirements will be higher, the best way is to write notes.

We can't use these techniques, but we must be able to read, because these techniques have been widely used, especially as JQuery JS box code, do not understand these you will be very difficult to understand other people's code.
Like var Yahoo = Yahoo || {}; this is a very widely used.

ok,Finally, let's look at a section of the code in jQuery.:

Js code Collection code



    var wrap =  
        // option or optgroup  
        !tags.indexOf("<opt") &&  
        [ 1, "<select multiple='multiple'>", "</select>" ] ||  
          
        !tags.indexOf("<leg") &&  
        [ 1, "<fieldset>", "</fieldset>" ] ||  
          
        tags.match(/^<(thead|tbody|tfoot|colg|cap)/) &&  
        [ 1, "<table>", "</table>" ] ||  
          
        !tags.indexOf("<tr") &&  
        [ 2, "<table><tbody>", "</tbody></table>" ] ||  
          
        // <thead> matched above  
        (!tags.indexOf("<td") || !tags.indexOf("<th")) &&  
        [ 3, "<table><tbody><tr>", "</tr></tbody></table>" ] ||  
          
        !tags.indexOf("<col") &&  
        [ 2, "<table><tbody></tbody><colgroup>", "</colgroup></table>" ] ||  
          
        // IE can't serialize <link> and <script> tags normally  
        !jQuery.support.htmlSerialize &&  
        [ 1, "div<div>", "</div>" ] ||  
          
        [ 0, "", "" ];  
          
        // Go to html and back, then peel off extra wrappers  
        div.innerHTML = wrap[1] + elem + wrap[2];  
          
        // Move to the right depth  
        while ( wrap[0]-- )  
            div = div.lastChild;  


This code is the author used to handle the $(HTML), some labels must be constrained, such as<option>Must be in the<select></select>Within the.
You may also find the author has a very good place is! Tags.indexOf (" <opt"), the author very skillful very simple to realize the function of the startWith, not a little extra code. There are many such subtle code in jQuery source code, you can go to learn.

Reprint
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by Nathan at November 28, 2013 - 2:28 PM