Process control

The basic concept

JavaScript provides three types of process structures: sequence, selection, and loop.

  1. Sequential structure: The default process structure that executes each statement written from top to bottom (not left to right)
  2. Selection structure: Judging a given condition and then deciding which piece of code to execute
  3. Loop structure: The repeated execution of a piece of code under certain conditions

Choose structure

if, switch

if

  1. The first form

    if(/* Conditional expression */) {/* The condition is set to execute the statement */;
   }
Copy the code

    Features: When a conditional expression is true, all the code in {} is executed, and only once

  2. Second form

    if(/* Conditional expression */) {/* The condition is set to execute the statement */;
}else{
    /* Condition does not hold the statement executed */;
}
Copy the code

    If the condition is met, the code after {} is executed. If the condition is not met, the code after {} is executed. Only one of the two {} will be executed, and only one will be executed

  3. The third form

    if(/* Conditional expression A*/) {/* Condition A satisfies the execution of the statement */;
   }else if(/* Conditional expression B*/) {/* Condition B satisfies the execution of the statement */; }... .else{
    /* All previous conditions do not satisfy the execution of the statement */;
   }   
Copy the code

    Features: From top to bottom in turn determine each conditional expression, which a conditional expression to satisfy, behind which a conditional expression is executed {} in the code If the previous all conditional expressions are not met, will be executed {} the code in the else behind And only one of the numerous braces will be implemented, and will only perform a

Note:

  1. If the data is not of Boolean type, it will be converted to Boolean type before judging
  2. For ==/=== =, it is recommended to write the constant in front of it, so that an error can be reported when the equal sign is written as an assignment sign to avoid possible bugs
  3. If or else Braces after if or else can be omitted, but only the statement immediately following the omission is controlled (so don’t omit it!).
  4. Semicolon (;) in JavaScript Is also a statement (empty statement)
  5. The if selection structure can be used nested
  6. When the if structure is selected to omit the braces, else if or else will automatically match the nearest if that is not used.

Best practices:

In enterprise development, if only one line of code needs to be executed after a condition is met, use the ternary operator. If more than one line of code needs to be executed after a condition is met, use the selection structure

switch

Format: (Case is like else if, default is like else)

switch(/* Expression */) {case /* Expression A*/:
        / * * / A;
        break; /* break */
    case /* Expression B*/:
        / * * / B;
        break; . .default:
        /* All previous cases do not match the code executed */;
        break;
}
Copy the code

Features:

  • It will judge from top to bottom whether each case is equal to the result of the expression in (). If they are equal, the code after the corresponding case will be executed; if all the previous cases do not match, the code after default will be executed
  • Only one case and default will be executed and executed only once

Note:

  1. Case makes three equal judgments rather than two equal judgments
  2. The () of switch() can be constants, variables, or expressions
  3. Case can be followed by a constant, a variable, or an expression
  4. In the switch statement, if either case or default is matched, all other cases and defaults are invalidated.
  5. Default doesn’t have to be at the end of the switch so default, wherever you put it, will wait until all the cases don’t match, okay
  6. Like the else in if/else, default can be omitted

If is the switch

  • If you want to judge the interval, you are advised to use if
  • For several fixed values, switch is recommended
  • Rule: Use if when you can

Loop structure

while, do-while, for

while

Format:

while(conditional expression){/* The condition satisfies the statement */ to be executed;
}
Copy the code

Features:

  • The code in {} is executed only if the conditional expression is true
  • The code in braces may be executed more than once

The execution flow of a while

  1. It first determines whether the conditional expression is true, and if so, executes the code in the following {}
  2. After executing the code in {}, the conditional expression is again determined to be true
  3. If the conditional expression is still true, the code in {} is executed again
  4. Repeat 1 to 3 until the conditional expression is not true

Write the rules of the loop structure

  1. Write the code for the loop structure first
  2. Copy code that needs to be executed repeatedly into {}
  3. Specify the end condition of the loop in ()

Note:

  1. A loop in which a conditional expression is always true is called an infinite loop
  2. The {} in the loop structure is called the loop body
  3. As with if, non-boolean values are cast to Boolean before judgment
  4. Like if, while can omit braces if there is only one statement
  5. Like if, you cannot write a semicolon (;) after a ().
  6. The simplest way to write an infinite loop: while(1);
  7. While parentheses can’t be null, they can be null

do-while

Format:

do{
    /* Code that needs to be executed repeatedly */;
}while(/* Conditional expression */);
Copy the code

Features:

  • The body of the loop is executed once regardless of whether the conditional expression is true or not

    while (false) {console.log("www.it666.com");
}
Copy the code
    do{
    console.log("www.it666.com");
}while (false);
Copy the code

While still do – the while

  1. For the most part, while loops and do-while loops are interchangeable
  2. If the code in the body of the loop needs to be executed first anyway, use a do-while loop, okay
  3. The while loop is recommended for all other situations

for

Format:

for(/* Initialize the expression */; /* Conditional expression */; /* After the loop increment expression */) {/* Code that needs to be executed repeatedly */;
}
Copy the code

Features:

  • As with a while loop, the body of the loop is executed only if the conditional expression is true

  • There is one less line to initialize the expression than in while

    // 1. Initialize the expression
let num = 1;
// 2
while (num <= 10) {console.log("Fire the bullets" + num);
    // 3. Increment expression after loop
    num++;
}
Copy the code
    // let num = 1;
for(let num = 1 /*1. Initialize the expression */; num <= 10 /*2. Conditional expression */; num++ /*3. Increment expression */ after loop) {console.log("Fire the bullets" + num);
}
Copy the code

Execution flow of the for loop

  1. The initialization expression is executed first and only once
  2. Determines whether the conditional expression is true, and if so, executes the body of the loop
  3. After executing the body of the loop, the post-loop increment expression is executed
  4. Repeat 2 to 3 until the conditional expression is not true

For with the continue

In the for loop, break breaks out of the loop, continue is code that skips the continue keyword,

In practice, continue is used more frequently in for scenarios

Note:

  1. In the for loop, the initializer, the conditional, and the increment after the loop can all be left out, which is equivalent to while(1);
  2. The other notes are the same as for the while loop

While still a for

  • In the case of a while loop, variables that control the end of the loop can also be used after the end of the loop

    let num = 1;
while (num <= 10) {console.log("Fire the bullets" + num);
    num++;
}
console.log(num);
Copy the code

  • If it is a for loop, it can be used by the outside world or not after the loop ends

    for(num = 1; num <= 10; num++){
    console.log("Fire the bullets" + num);
}
console.log(num); / / an error
Copy the code
    let num = 1;
for(; num <= 10; num++){
    console.log("Fire the bullets" + num);
}
console.log(num); / / 11
Copy the code

Break and continue

break

  1. What is the break keyword?
    • The break keyword can be used in switch statements and loop structures
    • The break keyword in a switch statement immediately ends the current == switch statement
    • The function of the break keyword in the loop structure is also to immediately end the current == loop structure
  2. Pay attention to the point
    • You cannot write any statements after the break keyword because they will never be executed
    • If the loop is nested, the break terminates the current loop (only one layer of nesting is affected!).

continue

  1. What is the continue keyword?
    • The continue keyword can only be used for loop structures
    • The continue keyword in a loop structure skips this loop and goes to the next one
  2. Note the continue keyword
    • As with break, you cannot write any more code after the continue keyword because it cannot be executed
    • Like break, if continue appears in a loop nested structure, only the current loop is skipped

Break and continue

  • Break is to end the current loop
  • Continue terminates the current loop

The rules of loop nesting

Inside the loop loop controls the number of rows and inside the loop controls the number of columns (with line breaks of course)

/* Requirement: output the following graph ***** **** ***** ** / in the interface

for(let i = 0; i < 5; i++){
    console.log(i);
    for(let j = i; j < 5; j++){
        document.write("*");
    }
    document.write("<br>");
}
Copy the code
 /* Requirement: output the following graph *** *** **** ***** */ in the interface
for(let i = 0; i < 5; i++){
    console.log(i);
    for(let j = 0; j <= i; j++){
        document.write("*");
    }
    document.write("<br>");
}
Copy the code