JS and OR operator | | &&

In the JavaScript tutorial, for && not only can be used for Boolean types, it does not just return boolean results.
L returns false directly if the first operand is a Boolean type and the value is false.
L If the first operand is a Boolean and the value is true and the other operand is of type object, then the object is returned.
L If two operands are of type object, then the second object is returned.
L If any one operand is null, then return NULL.
L If any operand is Nan, then return nan.
L If any one operand is undefinded, then return undefined.

Alert (false && Alice); False
Alert (True && Alice); Alice

Alert (Alice && Smith); Smith
Alert (Smith && Alice); Alice

Alert (null && Alice); Null
Alert (NaN && Alice); NaN
Alert (undefined && Alice); Undefined
Alert (Alice && undefined); Undefined

for | | , the same is true not only for Boolean types, but also for boolean-type results.
In fact, null, undefined, and NaN will all be treated as false. And the object is treated as true.

L Returns true directly if the first operand is a Boolean and the value is true.
L If the first operand is a Boolean and the value is false, and the second operand is object, the object is returned.
L If two operands are of type object, then the first object is returned.
L If all two operands are NULL, then NULL is returned.
L Returns nan if all two operands are Nan.
L If all two operands are undefined, then return undefined.
Alert (False | | alice); Alice

Alert (true | | | alice); True

Alert (Alice | | smith); Alice

Alert (Smith | | alice); Smith

Alert (Null | | | alice); Alice

Alert (Alice | | null); Alice

Alert (Null | | | null); Null

Alert (NaN | | alice); Alice

Alert (Alice | | NaN); Alice

Alert (NaN | | NaN); NaN

Alert (undefined | | alice); Alice

Alert (Alice | | undefined); Alice

Alert (undefined | | undefined); Undefined

You don't have to be so complicated. Recommend this part of the note
A && B: Converts a, B to a Boolean type, and then performs logic and, True returns B, False returns a
A | | B: Convert a, B to Boolean, and then logic or, True returns a, FALSE returns B
Conversion rules:
Object is True
Non 0 number is true
Non-empty string is true
Other is False

Suppose the growth rate is shown as follows:
Growth rate of 5 shows 1 arrows;
Growth rate of 10 shows 2 arrows;
Growth rate of 12 shows 3 arrows;
Growth rate of 15 shows 4 arrows;
All other displays show 0 arrows.
How do I implement it in code?

Almost if,else:
JS Code
Copy code code as follows:
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;
}

A slightly better switch:
JS Code
Copy code code as follows:
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 requirement is changed to:
Growth rate for >12 display 4 arrows;
Growth rate for >10 display 3 arrows;
Growth rate for >5 display 2 arrows;
Growth rate for >0 display 1 arrows;
Growth rate shows 0 arrows for <=0.

Then it would be troublesome to implement it with a switch.

So have you ever thought about using one line of code to achieve it?
OK, let's take a look at JS strong expressiveness bar:
JS Code
Copy code code as follows:
var add_level = (add_step==5 && 1) | | (add_step==10 && 2) | | (add_step==12 && 3) | | (add_step==15 && 4) | | 0;

More powerful, and more gifted:

JS Code
Copy code code as follows:
var add_level={' 5 ': 1, ' Ten ': 2, ' ': 3, ': 4}[add_step] | | 0;

Second requirement:
JS Code
Copy code code as follows:
var add_level = (add_step>12 && 4) | | (add_step>10 && 3) | | (add_step>5 && 2) | | (add_step>0 && 1) | | 0;

First we comb a concept, please remember: in the JS logical operation, 0, "", null, False, undefined, Nan will be sentenced to false, the others are true (as if there is no omission, please confirm). This must be remembered, otherwise apply | | And && there will be problems.
Here by the way: I am often asked to see a lot of code if (!! attr), why not directly write if (attr);
In fact, this is a more rigorous formulation:
Please test typeof 5 and typeof!! 5 the difference.!! The role is to convert a variable of another type into a bool type.
The following main discussion of the following logical operators && and | |.
In almost all languages | | And && all follow the "short-circuit" principle, such as the first expression in && is not to deal with the second expression, and | 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 run attr is not simple true or false, but "AAA"
Take another look at | | ：
Code: var attr = attr | | ""; This operation is often used to determine whether a variable is defined, and if it is not defined, give him an initial value, which is useful when defining a default value for a function's parameters. Because JS is not like a PHP tutorial you can define func ($attr =5) directly on the type parameter. Again, remember the principle: if the argument needs to be 0, "", null, False, undefined, Nan, it will also be treated as false.

if (a >=5) {
Alert ("Hello");
}
Can be written as:
A >= 5 && alert ("Hello");
This is done with just one line of code. But the point to note is: JS in | | And && features help us streamline code while also bringing down code readability. It's up to us to weigh it.
On the one hand, the streamlining of JS code, can substantially reduce network traffic, especially the large number of applications of the JS Public Library. The personal comparison recommendation is: if it is a relatively complex application, please write some comments appropriately. This is the same as the expression, the ability to streamline the code, but the readability will be reduced, the people who read the code will be higher, the best way is to write a note.

We can not use these techniques, but we must be able to understand, because these techniques have been widely used, especially like jquery and other JS box code, do not understand these you are difficult to understand other people's code.
Like the var yahoo = Yahoo | | {}; This is very widely used.
OK, finally let's take a look at the code in jquery:

JS Code
Copy code code as follows:
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;

var Alice = {
Name: "Alice",
Tostring:function () {
return this.name;
}
}

var Smith = {
Name: "Smith",
Tostring:function () {
return this.name;
}
}