Basic JavaScript -- super detailed (process control)

cjh_ code 2021-11-25 15:22:42

JavaScript Basics -- Hyperdetail ( Operator )_m0_48651355 The blog of -CSDN Blog

Catalog

3.1 Process control

3.1.1 Process control concept

3.1.2 Sequence flow control

3.1.3 Branch process control

3.2 Branching structure  

3.2.1 if sentence  

3.2.2 if else sentence ( Two branch statements )

3.2.3 if else if sentence ( Multi branch statement )

3.2.2  Ternary expression

3.2.3 switch Branch process control

3.2.4 switch Statement and if else if The difference between sentences

3.3 Loop structure

3.2.1 for loop

3.2.2 double for loop

 3.4 while loop

 3.5 do-while loop

 3.6 continue And break

3.6.1 continue

3.6.2 break

 3.7 Code specification

3.7.1 Identifier naming specification

3.7.2 Operator specification

3.7.3 Single line comments

3.7.4 Other specifications


3.1 Process control

3.1.1 Process control concept

         During the execution of a program , The execution order of each code has a direct impact on the result of the program . Many times we need to control the execution order of the code to realize the functions we want to complete .

Simple understanding : Process control is to control the code to execute in a certain structural order

         There are three main structures of process control , Namely Sequential structure Branching structure and Loop structure , Represents the order in which the three codes are executed .

3.1.2 Sequence flow control

         The sequential structure is the simplest in the program 、 The most basic process control , It has no specific grammatical structure , The sequence of the program is as follows , Execute sequentially , Most of the code in the program is executed in this way .

 3.1.3 Branch process control

         Branching structure : In the process of executing code from top to bottom , According to different conditions , Execute different path codes ( Execute the process of selecting one more code ), So we can get different results

 JS Language provides two branch structure statements :if sentence switch sentence The following explains

3.2 Branching structure  

3.2.1 if sentence  

        Grammatical structure

// If the condition holds, execute the code , Otherwise, do nothing
if ( Conditional expression ) {
    // The code statement executed when the condition is true
}

         A statement can be understood as an action , Loop statements and branch statements are typical statements . A program consists of many statements , In general , Will be split into statements one by one .

Execute the process :

 3.2.2 if else sentence ( Two branch statements )

         Grammatical structure

// Conditions established perform if Code inside , Otherwise execution else Code inside
if ( Conditional expression ) {
// [ If ] Conditional execution code
} else {
// [ otherwise ] Executed code
}

        

  Execute the process :

 3.2.3 if else if sentence ( Multi branch statement )

         Grammatical structure

// Suitable for checking multiple conditions .
if ( Conditional expression 1) {
sentence 1;
} else if ( Conditional expression 2) {
sentence 2;
} else if ( Conditional expression 3) {
sentence 3;
....
} else {
// None of the above conditions holds. Execute the code here
}

  Execute the process :

 3.2.2  Ternary expression

        Grammatical structure

// expression 1 ? expression 2 : expression 3;
var a = 5;
var b = 3;
a>b?a:b // The result is 5

Execute the process :

  • If the expression 1 by true , Then return the expression 2 Value , If the expression 1 by false, Then return the expression 3 Value
  • Simple understanding : Is similar to the if else ( Double branch ) Abbreviation

 3.2.3 switch Branch process control

         Grammatical structure

        switch Statement is also a multi branch statement , It is used to execute different code based on different conditions . When you want to set a series of options for a specific value for a variable , You can use switch.

switch( expression ){
case value1:
// expression be equal to value1 Code to execute when
break;
case value2:
// expression be equal to value2 Code to execute when
break;
default:
// expression Not equal to any one value Code to execute when
}
  • switch : Switch conversion , case : Small example options

  • keyword switch The following parentheses can be expressions or values , It's usually a variable

  • keyword case , An expression or value followed by an option , Followed by a colon

  • switch The value of the expression will be the same as case Compare the values of

  • If there is matching congruence (===) , Then it is related to the case The associated block of code is executed , And meet break Stop when , Whole switch End of statement code execution

  • If all case Does not match the value of the expression , execute default Code in

Be careful : perform case The sentence inside is , without break, Then proceed to the next case The words in it .

 3.2.4 switch Statement and if else if The difference between sentences

  • In general , They can be replaced by each other

  • switch...case Statements usually deal with case In order to compare the determined values , and if…else… More flexible sentences , It is often used to judge the range ( Greater than 、 Equal to a certain range )

  • switch A conditional statement that executes directly into a program after conditional judgment , More efficient . and if…else There are several conditions for a statement , You have to judge how many times .

  • When there are fewer branches ,if… else Statement execution efficiency ratio switch Sentence height .

  • When there are more branches ,switch The execution efficiency of the statement is relatively high , And the structure is clearer .

3.3 Loop structure

3.2.1 for loop

        Grammatical structure

for( Initialize variable ; Conditional expression ; Operation expression ){
// The loop body
}
name effect
Initialize variable Used to initialize a counter , The expression can use var Keyword to declare a new variable , This variable helps us record the number of times .
Conditional expression Used to determine whether each loop can be executed . If it turns out to be true Just keep cycling , Otherwise exit the loop .
Operation expression Used to determine whether each loop can be executed . If it turns out to be true Just keep cycling , Otherwise exit the loop .

Execute the process :

  • Initialize variable , The initialization operation is in the whole for The loop will only execute once .
  • Execute conditional expression , If true, The loop body statement is executed , Otherwise exit the loop , The loop ends .

  1. Execute the operation expression , At this point, the first round is over .
  2. The second round begins , Go straight to the conditional expression ( Variables are no longer initialized ), If true , Then execute the loop body statement , Otherwise exit the loop .
  3. Continue with the operation expression , The second round is over .
  4. The follow-up is consistent with the second round , Until the conditional expression is false , End the whole thing for loop .

  Expand ( Breakpoint debugging ):

         Concept : Breakpoint debugging refers to setting a breakpoint on a certain line of the program , During debugging , The program will stop at this line , Then you can debug step by step , During debugging, you can see the current value of each variable , Are wrong , Debugging to the wrong line of code shows the error , stop . Breakpoint debugging can help to observe the running process of the program


The process :

  1. Press in browser F12--> sources --> Find the file you need to debug --> Set breakpoints on one line of the program
  2. Watch: monitor , adopt watch You can monitor the value of variables , Very often .
  3. Press the F11, Step by step , Let the program execute line by line , This is the time , Observe watch The change in the value of a variable in .

          give an example :

// The basic way of writing
for (var i = 1; i <= 100; i++) {
console.log(' This man this year ' + i + ' Year old ');
}
// Because of the definition of i The variable starts with 1, Every cycle i It's self increasing (i=i+1). When i Value added to 101 when , It does not satisfy less than or equal to 100, So out of the loop , Print is 1-100

3.2.2 double for loop

         Concept : Loop nesting refers to defining the syntax structure of a loop statement in a loop statement , For example, in for In loop statement , You can nest another for loop , In this way for Loop statements are called Double for loop .

        Grammatical structure

for ( The beginning of the outer loop ; The condition of the outer loop ; The operation expression of the outer loop ) {
for ( The beginning of the inner loop ; The condition of the inner loop ; The operation expression of inner loop ) {
Code to execute ;
}
}
  • The inner loop can be seen as the loop body statement of the outer loop
  • The order of inner loop execution should also follow for The execution order of the loop
  • The outer loop is executed once , The inner loop is executed all the times

give an example ( Print five lines and five columns of stars ):

var star = '';
for (var j = 1; j <= 3; j++) {
for (var i = 1; i <= 3; i++) {
star += '*'
}
// Every time it's full 5 A star Just Add a new line
star += '\n'
}
console.log(star);

Core logic :

  1. The inner loop is responsible for printing five stars on a line
  2. The outer loop is responsible for printing five lines

 3.4 while loop

        Grammatical structure

while ( Conditional expression ) {
// Loop body code
}

Execute the process :

  1. First execute the conditional expression , If the result is true, The loop body code is executed ; If false, Then exit the loop , Execute the following code
  2. Execute the loop body code
  3. After the loop body code is executed , The program will continue to judge the execution condition expression , If the condition is still true, The loop body will continue to execute , Until the cycle condition is false when , The whole cycle will end

Be careful : Use while Be sure to pay attention to , It has to have exit conditions , Otherwise, it will become an endless circle

 3.5 do-while loop

        Grammatical structure

do {
// Loop body code - The conditional expression is true Repeat the loop body code when
} while( Conditional expression );

  Execute the process :

  1. First execute the loop body code once
  2. Then execute the conditional expression , If the result is true, Then continue to execute the loop body code , If false, Then exit the loop , Continue to execute the following code

Be careful : First execute the loop body , To determine ,do…while The loop statement executes the loop body code at least once

 3.6 continue And break

3.6.1 continue

        Concept :continue Keyword is used to jump out of the loop immediately , So let's go to the next loop ( In this cycle continue After that, the code will be executed once less ).

        give an example :

// eat 5 An apple , The first 3 A worm , Throw away the second 3 individual , Continue to eat the apples in the back
for (var i = 1; i <= 5; i++) {
if (i == 3) {
console.log(' This apple has worms , Throw away ');
continue; // Jump out of this cycle , It's No 3 Secondary cycle
}
console.log(' I'm eating No ' + i + ' An apple ');
}

 3.6.2 break

         Concept :break Keyword is used to jump out of the loop immediately ( The loop ends ).

         give an example :

// eat 5 An apple , The first 3 A worm , Throw away all the apples , No more .
for (var i = 1; i <= 5; i++) {
if (i == 3) {
console.log(' This apple has worms , Throw away ');
break; // Exit the whole for loop , Jump to the whole thing for The following statement
}
console.log(' I'm eating No ' + i + ' An apple ');
}


 3.7 Code specification

3.7.1 Identifier naming specification

  • Variable 、 The naming of functions must be meaningful
  • The name of a variable is usually a noun
  • The name of a function is usually a verb

3.7.2 Operator specification

// Leave a space on each side of the operator
for (var i = 1; i <= 5; i++) {
if (i == 3) {
break; // Exit the whole for loop , Jump to the whole thing for Loop the following statement
}
console.log(' I'm eating No ' + i + ' An apple ');
}

3.7.3 Single line comments

for (var i = 1; i <= 5; i++) {
if (i == 3) {
break; // Notice a space in front of a single line comment
}
console.log(' I'm eating No ' + i + ' An apple ');
}

3.7.4 Other specifications

         key word 、 Space between operators


JavaScript Basics -- Hyperdetail ( Arrays and functions )_m0_48651355 The blog of -CSDN Blog  

Please bring the original link to reprint ,thank
Similar articles

2021-11-25

2021-11-25

2021-11-25

2021-11-25

2021-11-25

2021-11-25

2021-11-25