Performance of JavaScript conditional statements

The Condition Statement is the same as the loop, conditional statements also change the condition statements for running streaming JavaScript into two types: if-elseswitchif-else. However, if-else statements and switch statements can replace each other in many cases. (foo) {...} else {...} switch (foo) {casetrue :... default:

Condition Statement

Like loops, conditional statements change the running stream.
JavaScript conditional statements are divided into two types:

• If-else

• Switch

If-else is the most common
However, if-else statements and switch statements can be replaced with each other in many cases.
For example, the following code is equivalent.

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

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

If-else
However, conditional switches seem 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 condition statements we use has better performance?
If the number of conditions is very large, the switch statement runs faster and more obviously.
To be accurate, the if-else performance load increases when conditions increase.
(Switch statements in most languages are optimized using branch table indexes)
In JavaScript, switch statements do not forcibly convert data types,
That is to say, use the equal-Sum Operator for comparison.
In this way, there will be no loss of type conversion.

Therefore, if-else is used when the number of conditions is small, and switch is used when the number of conditions is large.
It is reasonable from the perspective of performance
(If-else is applicable to determining two discrete values or several different value ranges. switch is applicable to determining multiple discrete values)

When we use the if-else statement, we should sort the statement in the order of probability from larger to smaller.
This is easy to understand, but it is easy to be ignored.
Another optimization is to organize if-else into a series of nested if-else statements.
This is similar to our mathematical division, 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{        //...    }}

Improves efficiency

Search tables

In some special cases, the method of "Searching for tables" has extremely high performance.

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;    }}

Reconstructs the preceding function as follows:

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

This method is concise, readable, and has better performance.
When there are more and more conditions, searching for tables will produce almost no additional performance overhead.
However, it is more suitable for logical ing between a single key and a single value.

Three-object Operator

There is also a three-object operator that is similar to a condition statement.
? :
It is equivalent to if-else.
The three-object operator is more suitable for scenarios that focus on returned values.
What do you mean? Let's look at the following code:

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

Rewrite to be better

var foo = flag ? 1 : 2;

Note:flag ? 1 : 2Return Value
Assign a value directly to the foo variable.
This type of operator is very suitable for use.

The above are the performance problems of conditional statements in JavaScript.
Although we rarely use a large number of conditions
In addition, the modern browser js engine is particularly powerful (such as V8 engine [] ~ (￣ )~ *)
But there is no harm...

The above content is about the performance of JavaScript conditional statements. For more information, see PHP Chinese website (www.php1.cn )!