SoFunction
Updated on 2025-03-01

Summary of tips for using Javascript condition judgment

JavaScript condition judgment and advanced usage summary

Commonly used for conditional judgment

1. If/else statement

Statements are used to perform different actions based on different conditions

Code

if ('Conditional Statement 1') {
    // If conditional statement 1 is true, execute the code block} else if ('Conditional Statement 2') {
    // If conditional statement 1 is false and conditional statement 2 is true, execute the code block} else {
    // If conditional statement 1 is false and conditional statement 2 is false, execute the code block}

When only one sentence of code is executed after the if statement, curly braces can be omitted. In other words, if the if statement does not have curly braces, the if statement only considers the next statement

Two- and three-part expressions

Formal abbreviation ====》 Conditions? True result: false result
Equivalent to it ====》 if(condition){true result}else{false result}
The ternary expression statement is more concise, but multiple conditions will show redundancy.

 var  isShow = true;
 isShow ? (isShow ):(isShow )
 //  true

The ternary expression cannot be used during use.

3. Or (||) and (&&) statements

This usage is advanced and elegant

1. ||(logical or)

Short-circuit expression: The first one is true, then the value of the first one is false, then the value of the second one is false.
Default translation: 0 , "" , nul , false , undefined , NaN will be judged as false

 (2||1);  //2
 ('a'||1);//'a'
 (''||1); //1

2. && (Logistic and)

Short-circuit expression: The first one is: true, then the statement after && is executed. If the first one is false, then the value before "&&" is executed.

 (2 && 1);  //1
 ('a' && 1);//1
 ('' && 1); // ''

4. Switch/case statement

Statement There can only be one expression (expression)

The statement case can only be a constant, not an expression, which means that the judgment conditions of the switch statement can only be compared with one constant.

The purpose of using break is to jump out of switch

// add_step compares the constant value set by casevar change_level = 0; 
switch(change_step){ 
case 5 : change_level = 1; 
    break; 
case 10 : change_level = 2; 
    break; 
case 12 : change_level = 3; 
    break; 
case 15 : change_level = 4; 
    break; 
default : change_level = 0; 
    break;
}

Elegant Upgrade A

This method is to use the value of the object attribute

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

Elegant Upgrade B

This method can also be judged by the numerical range

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

5. null and undefined

We already know that null does not have any attribute value and cannot obtain its existence value. So the return is an error instead of undefined.

Consider the following code

if ( == ...) {
...
}

If node or null is returned, an error will be returned. So, the code for the solution is

if ((node) && (next = ) && ... ) {
...
}

Then, when there are many conditions, the code will form the following situation

if (
(node) &&
() &&
( == ...)
... ) {
...
}

As the judgment conditions continue to increase, the code will become very "ugly".
There is a small "trick" that can simplify the conditional judgment expression. We can add an empty object ({}) or zero (0) as a substitute

if ( next = (node || 0).nextSibling) ) {
...
}

Then, the above code can be written like this

if (((node || 0).nextSibling || 0).className == ...) {
...
}

Personally, the above code will be very streamlined from a certain point of view. However, in the actual daily coding process, especially when multiple people cooperate, these codes may cause certain troubles to other developers.

As Pony said, if some frameworks are already being used, specific issues need to be analyzed. For example, the above conditional judgment code can be used by using YUI encoding.

(el, className)

It seems more streamlined and easier to understand than the above code.

Summarize

Execution efficiency:

  • The switch case will generate a jump table to indicate the address of the actual case branch. The multi-branch condition will be applied.
  • Switch case disadvantages can only handle variables of characters or numeric types [the above upgrade plan is available]
  • But if...else needs to traverse the condition branch until the hit condition (can be used to judge the condition a small number of conditions)