Detailed explanation of usage techniques of javascript operators || and &&

js The AND-OR operator || && is wonderfully useful and can be used to streamline code and reduce the readability of the program.

Requirement 1.

Assume that the growth speed display regulations are as follows:
When the growth speed is 5, 1 arrow is displayed;
When the growth speed is 10, 2 arrows are displayed;
A growth rate of 12 displays 3 arrows;
A growth rate of 15 displays 4 arrows;
Others display 0 arrows.
How to implement it with code?

Requirement 2.

Assume that the growth speed display regulations are as follows:

##The growth speed is >12 and 4 are displayed Arrows;

When the growth rate is >10, 3 arrows are displayed;

When the growth rate is >5, 2 arrows are displayed;

The growth rate is >0 and 1 arrow is displayed;

The growth rate is
Then it is very troublesome to implement it with switch.

So have you ever thought about implementing it in one line of code?
ok, let’s take a look at the powerful expressiveness of js:

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

More powerful and better:

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

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

First of all, let’s sort it out Let’s talk about a concept, please remember: in js logical operations, 0, "", null, false, undefined, and NaN will all be judged as false, and others will be judged as true (it seems that I have not missed it, please confirm) . This must be remembered, otherwise problems will occur when using || and &&.

By the way: People often ask me why I don’t write if(attr) directly when I see a lot of code if(!!attr);
In fact, this is a more rigorous way of writing:
Please Test the difference between typeof 5 and typeof !!5. The function of !! is to convert a variable of other types into bool type.
The following mainly discusses the logical operators && and ||.
In almost all languages, || and && follow the "short circuit" principle. For example, if the first expression in && is false, the second expression will not be processed, while || is just the opposite.
js also follows the above principles. But what's more interesting is the value they return.
Code: var attr = true && 4 && "aaa";
Then the result of the operation attr is not simply true or false, but "aaa"
Let's take a look ||:
Code: var attr = attr || ""; This operation is often used to determine whether a variable has been defined. If not, give it an initial value. This is more useful when defining a default value for a function parameter. Because unlike php, js can directly define func($attr=5) on the type parameters. Again, I remind you to remember the above principle: if the actual parameter needs to be 0, "", null, false, undefined, or NaN, it will also be treated as false.

if(a >=5){ 
alert("你好"); 
}

can be written as:

a >= 5 && alert("你好");

This only requires one line of code. But one thing to note is that while the features of || and && in js help us streamline the code, it also reduces the readability of the code. This requires us to weigh it ourselves.
On the one hand, streamlining js code can substantially reduce network traffic, especially for js public libraries that are widely used. What I personally recommend is: if it is a relatively complex application, please write some comments appropriately. This is the same as the expression, which can simplify the code, but the readability will be reduced, and the requirements for people who read the code will be higher. The best way is to write comments.

We don’t need to use these techniques, but we must be able to understand them, because these techniques have been widely used, especially the code in js boxes such as JQuery. If you don’t understand these, it will be difficult to understand other people’s code. .
Like var Yahoo = Yahoo || {}; this is very widely used.
ok, finally let us look at a piece of code in jQuery:

var wrap = 
    // option or optgroup 
    !tags.indexOf("<opt") && 
    [ 1, "<select multiple=&#39;multiple&#39;>", "</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&#39;t serialize <link> and <script> tags normally 
    !jQuery.support.htmlSerialize && 
    [ 1, "p<p>", "</p>" ] || 
    [ 0, "", "" ]; 
    // Go to html and back, then peel off extra wrappers 
    p.innerHTML = wrap[1] + elem + wrap[2]; 
    // Move to the right depth 
    while ( wrap[0]-- ) 
        p = p.lastChild;

This code is used by the author to process $(html), some tags must be constrained, such as < ;option> must be within .

Maybe you also discovered that another very clever thing about the author is !tags.indexOf("

The above is the detailed content of Detailed explanation of usage techniques of javascript operators || and &&. For more information, please follow other related articles on the PHP Chinese website!