[Web front-end basics | JS basics] Logic statements

Process control

Process control concept

During the execution of a program, the execution sequence of each code has a direct impact on the result of the program. Many times we need to control the execution sequence of the code to achieve the function we want to complete.

Simple understanding: process control is to control the code to be executed in a certain structural order

There are three main structures for process control, which are sequence structure , branch structure, and loop structure , which represent the order in which the three codes are executed.

One: sequential process control

Sequence structure is the simplest and most basic flow control in a program. It has no specific grammatical structure. The program will be executed in sequence according to the sequence of the code. Most of the codes in the program are executed in this way.

Two: branch flow control

Branch structure In
the process of executing the code from top to bottom, according to different conditions, different path codes are executed (the process of executing the code by selecting one) to obtain different results.
JS language provides two kinds of branch structure statements: if statement, switch statement

1: if statement

1.1: if statement (single branch statement)

// 条件成立执行代码，否则什么也不做
if (条件表达式) {
    
    
    // 条件成立执行的代码语句
}

A statement can be understood as a behavior, and loop statements and branch statements are typical statements. A program is composed of many statements, under normal circumstances, it will be divided into one statement.

1.2: if else statement (double branch statement)

// 条件成立  执行 if 里面代码，否则执行else 里面的代码
if (条件表达式) {
    
    
    // [如果] 条件成立执行的代码
} else {
    
    
    // [否则] 执行的代码
}

2: if else if statement (multi-branch statement)

// 适合于检查多重条件。
if (条件表达式1) {
    
    
    语句1；
} else if (条件表达式2)  {
    
    
    语句2；
} else if (条件表达式3)  {
    
    
   语句3；
 ....
} else {
    
    
    // 上述条件都不成立执行此处代码
}

3: Ternary expression

  表达式1 ? 表达式2 : 表达式3;

If expression 1 is true, return the value of expression 2, if expression 1 is false, return the value of expression 3
Simple understanding: It is similar to the shorthand of if else (double branch)

4: Switch branch process control

The switch statement is also a multi-branch statement, which is used to execute different codes based on different conditions. When you want to set a series of options with specific values for variables, you can use switch.

  switch( 表达式 ){
    
     
      case value1:
          // 表达式 等于 value1 时要执行的代码
          break;
      case value2:
          // 表达式 等于 value2 时要执行的代码
          break;
      default:
          // 表达式 不等于任何一个 value 时要执行的代码
  }

switch: switch conversion, case: small example option
The keyword switch can be an expression or a value in parentheses, usually a variable
The keyword case, followed by the expression or value of an option, followed by a colon
The value of the switch expression will be compared with the value of the case in the structure
If there is a matching congruence (===), the code block associated with the case will be executed, and it will stop when it encounters a break, and the execution of the entire switch statement code ends
If the value of all case does not match the value of the expression, the code in default is executed

Note: When executing the statement in the case, if there is no break, continue to execute the statement in the next case.

【叽叽歪歪】The difference between switch statement and if else if statement

Under normal circumstances, the two statements can be replaced with each other
The switch...case statement usually handles the case where the case is a relatively certain value, while the if...else... statement is more flexible and is often used for range judgment (greater than or equal to a certain range)
The switch statement executes the conditional statement of the program directly after the conditional judgment, which is more efficient. And if...else statement has several conditions, you have to judge how many times.
When there are fewer branches, the execution efficiency of if...else statements is higher than that of switch statements.
When there are more branches, the execution efficiency of the switch statement is higher and the structure is clearer.

Three: loop structure

1: for loop

The for loop is mainly used to loop some code several times, usually related to counting. Its grammatical structure is as follows:

for(初始化变量; 条件表达式; 操作表达式 ){
    
    
    //循环体
}

name	effect
Initialize variables	It is usually used to initialize a counter. The expression can use the var keyword to declare a new variable. This variable helps us record the number of times.
Conditional expression	Used to determine whether each cycle can be executed. If the result is true, continue the loop, otherwise exit the loop.
Operation expression	Used to determine whether each cycle can be executed. If the result is true, continue the loop, otherwise exit the loop.

Implementation process:

Initialize variables, the initialization operation will only be performed once in the entire for loop.
Execute the conditional expression, if it is true, execute the loop body statement, otherwise exit the loop and the loop ends.
The operation expression is executed, and the first round is over.
At the beginning of the second round, directly execute the conditional expression (no longer initialize the variable), if it is true, execute the loop body statement, otherwise exit the loop.
Continue to execute the operation expression, and the second round ends.
The follow-up is consistent with the second round until the conditional expression is false, and the entire for loop is ended.

2: Breakpoint debugging:

Breakpoint debugging refers to setting a breakpoint on a certain line of the program. When debugging, the program will stop when it reaches this line, and then you can debug step by step. During the debugging process, you can see the current value of each variable and make an error. If the error code line is debugged, the error will be displayed and stop. Breakpoint debugging can help observe the running process of the program

The for loop repeats the same code

The for loop can repeat the same code, for example, we want to output 10 sentences "study hard, make progress every day"

//  基本写法
for(var i = 1; i <= 10; i++){
      
      
    console.log('好好学习，天天向上');
}
// 用户输入次数
var num = prompt('请输入次数:')；
for ( var i = 1 ; i <= num; i++) {
      
      
    console.log('好好学习，天天向上');
}

for loop repeats different code

For loops can also repeat different codes, mainly because of the use of counters, which will change during each loop.

For example, to output 1 to 100 years old:

//  基本写法
for (var i = 1; i <= 100; i++) {
      
      
      console.log('这个人今年' + i + '岁了');
}

For example, find the output of 1 to 100 years old, and prompt birth, death

// for 里面是可以添加其他语句的 
for (var i = 1; i <= 100; i++) {
      
      
 if (i == 1) {
      
      
    console.log('这个人今年1岁了， 它出生了');
 } else if (i == 100) {
      
      
    console.log('这个人今年100岁了，它死了');
  } else {
      
      
       console.log('这个人今年' + i + '岁了');
  }
}

Because of the existence of a counter, the for loop can also perform certain operations repeatedly, such as doing some arithmetic operations.

3: Double for loop

Overview of double for loops

Loop nesting refers to the grammatical structure of defining a loop statement in a loop statement. For example, in a for loop statement, a for loop can be nested. Such a for loop statement is called a double for loop.

Double for loop syntax

for (外循环的初始; 外循环的条件; 外循环的操作表达式) {
      
      
    for (内循环的初始; 内循环的条件; 内循环的操作表达式) {
      
        
       需执行的代码;
   }
}

The inner loop can be regarded as the statement of the outer loop
The order of execution of the inner loop should also follow the order of execution of the for loop
The outer loop is executed once, the inner loop must be executed all times

Print five rows and five columns of stars

var star = '';
for (var j = 1; j <= 3; j++) {
      
      
    for (var i = 1; i <= 3; i++) {
      
      
      star += '☆'
    }
    // 每次满 5个星星 就 加一次换行
    star += '\n'
}
console.log(star);

Core logic:

1. The inner loop is responsible for printing five stars in one line

2. The outer loop is responsible for printing five lines

4: while loop

while 语句可以在条件表达式为真的前提下，循环执行指定的一段代码，直到表达式不为真时结束循环。
while语句的语法结构如下：

while (条件表达式) {
    
    
    // 循环体代码 
}

Execute loop body code
After the loop body code is executed, the program will continue to judge the execution condition expression, if the condition is still true, it will continue to execute the loop body, until the loop condition is false, the entire loop process will not end

Note :
When using a while loop, we must pay attention to it, it must have an exit condition, otherwise it will become an endless loop
The difference between while loop and for loop is that while loop can do more complicated conditional judgments, such as judging user name and password

5: do-while loop

The do... while statement is actually a variant of the while statement. The loop will execute the code block once, and then judge the conditional expression. If the condition is true, the loop body will be executed repeatedly, otherwise the loop will exit.

do {
    
    
    // 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式);

Execute the loop body code once
Then execute the conditional expression, if the result is true, continue to execute the loop body code, if it is false, then exit the loop and continue to execute the following code

Note: execute the loop body first, then judge, the do...while loop statement will execute the loop body code at least once

6：continue、break

The continue keyword is used to immediately jump out of this loop and continue to the next loop (the code after continue in this loop body will be executed one less time).

The break keyword is used to immediately jump out of the entire loop (end of loop).