Performance issues with JavaScript conditional statements

Conditional statements

Like loops, conditional statements will also change the running flow
There are two types of conditional statements in JavaScript

• if-else

• switch

##if-else is our most commonly used one

But if- The else statement and the switch statement can be replaced with each other in many cases.
For example, the following code is equivalent

if(foo){    ...}else{    ...}

switch(foo){
    case true:        ...
    default:        ...}

When there are few conditions, people are more likely to use if-else

But when there are many conditions, use switch. It is easier to understand

if(foo === 1){    
...}else if(foo === 2){    
...}else if(foo === 3){    
...}else if(foo === 4){    
...}else{    
...}

switch(foo){
    case 1:        ...
    case 2:        ...
    case 3:        ...
    case 4:        ...
    default:        ...}

But which of the two conditional statements we use has better performance

If the number of conditions is very large, the switch statement runs faster and more obviously
To be precise : When the conditions increase, the if-else performance burden increases to a greater extent
(Most language switch statements use branch table branch table index to optimize)
And in JavaScript, the switch statement does not force type conversion. ,
That is, use the congruence operator for comparison
This way there will be no loss of type conversion

So we use if-else when the number of conditions is small, and switch when the number of conditions is large

It is reasonable from a performance perspective
(if-else is suitable for judging two discrete values ​​or several different value ranges, switch is suitable for judging multiple discrete values)

---

We are using if -else statements should be arranged in order from large to small probabilities

This is easy to understand, but it is easily overlooked by us
Another optimization point is to try to organize if-else into a series of nested if- else statement
This is similar to our mathematical dichotomy, which can reduce the scope and execution time
Like this

if(foo >= 1 && foo < 3){
    //...}else if(foo >= 3 && foo < 5){
    //...}else if(foo >= 5 && foo < 7){
    //...}else{
    //...}

Change to this

if(foo >= 1 && foo < 5){    if(foo < 3){
        //...
    }else{
        //...
    }
}else{    if(foo < 7){
        //...
    }else{
        //...
    }
}

Can improve efficiency

Lookup table

In some special cases, the "lookup table" method has super high performance. When there are many conditions,

function fn(a){
    switch(a){        
    case 0:            
    return 0;        
    case 1:            
    return 1;        
    case 2:            
    return 2;        
    case 3:            
    return 3;        
    case 4:            
    return 4;        
    case 5:            
    return 5;        
    case 6:            
    return 6;        
    case 7:            
    return 7;
    }
}

reconstruct the above function into In this way

function fn(a){
    var retArr = [0,1,2,3,4,5,6,7];    return retArr[a];
}

This is not only concise and readable, but also has better performance

When the number of conditions increases, the lookup table will produce almost no additional performance overhead
But it is more Suitable for situations where there is a logical mapping between a single key and a single value

Ternary operator

There is also a ternary operator

that is very similar to a conditional statement? :
It is equivalent to if-else
The ternary operator is more suitable for situations where the return value is concerned
What does it mean, look at the code below

var foo;;if(flag){
    foo = 1;
}else{
    foo = 2;
}

It is better to rewrite it like this

var foo = flag ? 1 : 2;

Focus on the

flag? 1 : 2The return valueis directly assigned to the foo variable
This situation is very suitable for using the ternary operator

---

The above is the performance problem of conditional statements in JavaScript

Although we rarely use a large number of conditions
And the modern browser js engine is particularly powerful (such as the V8 engine []~(￣▽￣) ~*)
But it doesn’t hurt to understand...

The above is the content of the performance issues of JavaScript conditional statements. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!