js and or operator || && wonderful use_javascript skills

First, let me ask a question:

As shown in the picture:
Suppose the growth speed display regulations are as follows:
A growth rate of 5 displays 1 arrow;
A growth rate of 10 displays 2 arrows Arrows;
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?

Almost if, else:
Js code

Copy code The code is 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;
}

Slightly better switch:
Js code

Copy code The code is 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:
The growth rate is >12 and 4 arrows are displayed;
The growth rate is >10 3 arrows are displayed;
A growth rate of >5 displays 2 arrows;
A growth rate of >0 displays 1 arrow;
A growth rate of <=0 displays 0 arrows.

Then it will be very troublesome to implement it with switch.

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

Copy code The code is 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 better:

Js code

Copy code The code is as follows:

var add_level={'5':1,'10':2,'12':3,'15':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 of all, let’s sort out a concept. Please remember: in js logical operations, 0, "", null, false, undefined, and NaN will all be judged as false, and everything else will be judged as true (it seems that there are no omissions) Well, please confirm it). This must be remembered, otherwise problems will occur when using || and &&.
By the way: People often ask me why I don’t just write if(attr) 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("Hello");
}
can be written as:
a >= 5 && alert("Hello ");
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:

Js code

Copy code The code is as follows:

var wrap =
// option or optgroup
!tags.indexOf(" [ 1, "", "" ] ||

!tags.indexOf(" [ 1, "

", "

" ] ||

tags.match(/^<(thead|tbody|tfoot|colg|cap)/) &&
[ 1, "", "" ] ||

!tags.indexOf(" [ 2, "", "" ] ||

// matched above
(!tags.indexOf(" [ 3, "", "" ] ||

!tags.indexOf(" [ 2, "", " " ] ||

// IE can't serialize and