1-operator

1.1 classification of operators

Operator, also known as operator, is a symbol used to realize the functions of assignment, comparison and arithmetic operation.

JavaScript Operators commonly used in are:

• Arithmetic operator
• Increment and decrement operators
• Comparison operator
• Logical operator
• Assignment Operators

1.2 arithmetic operators

• Overview of arithmetic operators

  Concept: the symbol used in arithmetic operation, which is used to perform the arithmetic operation of two variables or values.

• Precision of floating point numbers

  The highest precision of floating-point values is 17 decimal places, but it is far less accurate than integers in arithmetic calculations.

  var result = 0.1 + 0.2;    // The result is not 0.3, but 0.300000000000000 4
  console.log(0.07 * 100);   // The result is not 7, but 7.000000000000001
  

  So: do not directly judge whether two floating-point numbers are equal!

• Expressions and return values

  Expression: it is a combination of numbers, operators, variables, etc. with meaningful arrangement methods that can obtain numerical values

  Simple understanding: it is a formula composed of numbers, operators, variables, etc

  The final result of the expression will be returned to the developer, which is called the return value

1.3 increment and decrement operators

• Overview of increment and decrement operators

  If you need to add or subtract 1 from a numeric variable repeatedly, you can use the increment (+) and decrement (–) operators.

  In JavaScript, increment (+) and decrement (–) can be placed either before or after variables. When placed in front of a variable, we can call it a pre increment (decrement) operator, and when placed behind a variable, we can call it a post increment (decrement) operator.

  Note: increment and decrement operators must be used with variables.

• Increment operator

  • Pre increment operator

    ++The increment before num is self adding 1, which is similar to num = num + 1, but + + num is easier to write.

    Use the formula: add first and then return the value

  var  num = 10;
  alert(++num + 10);   // 21
  

  • Post increment operator

    Num + + Post increment is self adding 1, which is similar to num = num + 1, but num + + is easier to write.

    Use the formula: first return the original value, and then add it by yourself

  var  num = 10;
  alert(10 + num++);  // 20
  

1.4 comparison operators

• Overview of comparison operators

  Concept: comparison operator (relational operator) is the operator used when comparing two data. After the comparison operation, a Boolean value (true / false) will be returned as the result of the comparison operation.

• Equal sign comparison

  console.log(18 == '18');//true, the default conversion type
  console.log(18 === '18'); //false, it's as like as two peas.
  

1.5 logical operators

• Overview of logical operators

  Concept: a logical operator is an operator used for Boolean operations, and its return value is also a Boolean value. In the later development, it is often used to judge multiple conditions

• Logic and&&

  True is returned only when both sides are true, otherwise false is returned

• Logical or||

  Returns true as long as one side is true

• Logical non!

  Logical non (!) is also called negation, which is used to take a value opposite to Boolean value. For example, the opposite value of true is false

  var isOk = !true;
  console.log(isOk);  // false
  

• Short circuit operation (logic interrupt)

  Principle of short circuit operation: when there are multiple expressions (values) and the expression value on the left can determine the result, the value of the expression on the right will not continue to be calculated;

  • Logic and

    Syntax: expression 1 & & expression 2

      - If the value of the first expression is true, expression 2 is returned
      
      - If the value of the first expression is false, the expression 1 is returned
    

    console.log( 123 && 456 );        // 456
    console.log( 0 && 456 );          // 0
    console.log( 123 && 456&& 789 );  // 789
    

  • Logical or

    Syntax: expression 1 | expression 2

     - If the value of the first expression is true, the expression 1 is returned
     
     - If the value of the first expression is false, expression 2 is returned
    

    console.log( 123 || 456 );         //  123
    console.log( 0 ||  456 );          //  456
    console.log( 123 || 456 || 789 );  //  123
    

1.6 assignment operator

Concept: an operator used to assign data to a variable.

var age = 10;
age += 5;  // Equivalent to age = age + 5;
age -= 5;  // Equivalent to age = age - 5;
age *= 10; // Equivalent to age = age * 10;

1.7 operator priority

• The logical non priority in unary operators is very high
• Logical and have higher priority than logical or

2 - process control (structure)

2.1 process control concept

In the process of a program execution, 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 execution of code according to a certain structural order**

There are three main structures of process control:**Sequential structure**,**Branching structure**and**Cyclic structure**，Represents the order in which the three codes are executed.

2.2 sequence flow control

Sequential structure is the simplest and most basic process control in a program. It has no specific syntax structure. The program will execute in sequence according to the sequence of codes. Most codes in the program are executed in this way.

2.3 branch process control

• Branching structure

  In the process of executing code from top to bottom, different path codes are executed according to different conditions (the process of executing one or more codes), so as to get different results

  JS language provides two branch structure statements: if statement and switch statement

• if statement

  • Grammatical structure

  // If the condition is true, execute the code, otherwise do nothing
  if (Conditional expression) {
      // Code statement executed when the condition is satisfied
  }
  

  Statement can be understood as a behavior. Loop statement and branch statement are typical statements. A program consists of many statements. Generally, it will be divided into statements one by one.

  • Execution process

• if else statement (double branch statement)

  • Grammatical structure

    // If the condition is true, execute the code in if, otherwise execute the code in else
    if (Conditional expression) {
        // [if] the condition is true, the code to be executed
    } else {
        // [otherwise] executed code
    }
    
    

  • Execution process

• if else if statement (multi branch statement)

  • Grammatical structure

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

  • Execution logic

Ternary expression

• Grammatical structure

  Expression 1 ? Expression 2 : Expression 3;
  

• Implementation ideas

  • If expression 1 is true, the value of expression 2 is returned; if expression 1 is false, the value of expression 3 is returned
  • Simple understanding: it is similar to the abbreviation of if else

switch branch process control

• Grammatical structure

  The switch statement is also a multi branch statement, which 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:
          // Code to execute when expression equals value1
          break;
      case value2:
          // Code to execute when expression equals value2
          break;
      default:
          // Code to execute when the expression is not equal to any value
  }
  

  • Switch: switch conversion, case: small example option

  • The keyword switch can be followed by an expression or value in parentheses, usually a variable

  • Keyword case, followed by an expression or value of an option, followed by a colon

  • The value of the switch expression is compared with the value of the case in the structure

  • If there is matching congruence (= = =), the code block associated with the case will be executed and stopped when a break is encountered, and the code execution of the whole switch statement will end

  • If the values of all case s do not match the values of the expression, execute the code in default

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

• Difference between switch statement and if else statement

  • In general, their two statements can be replaced with each other
  • The switch... Case statement usually handles the case where the value is determined by comparison, while the if... else... Statement is more flexible and is often used to judge the range (greater than or equal to a certain range)
  • The switch statement directly executes the conditional statement of the program after conditional judgment, which is more efficient. if... else statements have several conditions, you have to judge how many times.
  • When there are few branches, the execution efficiency of if... else statement is higher than that of switch statement.
  • When there are many branches, the execution efficiency of switch statement is higher and the structure is clearer.

2.4. Cycle

1.1 for loop

Grammatical structure

for(initialize variable; Conditional expression; Operation expression ){
    //Circulatory body
}

name	effect
initialize variable	It is usually used to initialize a counter. The expression can declare a new variable using the var keyword, which 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.

Execution process:

1. Initialize variables. The initialization operation will be executed only once in the whole for loop. Execute the conditional expression. If true, execute the loop body statement. Otherwise, exit the loop and the loop ends.
2. Execute the operation expression, and the first round ends.
3. At the beginning of the second round, execute the conditional expression directly (no longer initializing variables). If it is true, execute the loop body statement, otherwise exit the loop.
4. Continue to execute the operation expression, and the second round ends.
5. The following is consistent with the second round until the conditional expression is false, ending the whole for loop.

？ Breakpoint debugging:

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

Breakpoint debugging process:
1,Press in the browser F12--> sources -->Find the file to debug-->Set a breakpoint on a line of the program
2,Watch: Monitoring, through watch It can monitor the change of variable value, which is very common.
3,Press F11，The program is executed step by step. Let the program execute line by line. At this time, observe watch The change in the value of the variable in.

• The for loop repeats the same code

  For example, output 10 sentences "daughter-in-law, I'm wrong"

  //  Basic writing
  for(var i = 1; i <= 10; i++){
      console.log('Daughter in law, I was wrong~');
  }
  // User input times
  var num = prompt('Please enter the number of times:')；
  for ( var i = 1 ; i <= num; i++) {
      console.log('Daughter in law, I was wrong~');
  } 
  

• The for loop repeats different code

  For example, output 1 to 100 years old:

  //  Basic writing
  for (var i = 1; i <= 100; i++) {
        console.log('This man this year' + i + 'Years old');
  }
  

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

  // Other statements can be added to for 
  for (var i = 1; i <= 100; i++) {
   if (i == 1) {
      console.log('This man is one year old. He was born');
   } else if (i == 100) {
      console.log('This man is 100 years old. He's dead');
    } else {
         console.log('This man this year' + i + 'Years old');
    }
  }
  

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

1.2 double for loop

• Dual for loop overview

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

• Double for loop syntax

  for (Initial of external circulation; Conditions of external circulation; Operation expression of outer loop) {
      for (Initial of internal circulation; Conditions of internal circulation; Inner loop operation expression) {  
         Code to execute;
     }
  }
  

  • The inner loop can be regarded as the loop body statement of the outer loop
  • The execution order of the inner loop should also follow the execution order of the for loop
  • The outer loop is executed once, and the inner loop is 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 += '☆'
      }
      // Add a line break every time you have 5 stars
      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

• for loop summary

  • The for loop can repeat some of the same code
  • The for loop can repeat a little different code because we have counters
  • The for loop can repeat certain operations, such as arithmetic operators and addition operations
  • As the demand increases, the dual for loop can do more and better results
  • Double for loop, the outer loop is executed once, and the inner for loop is executed completely
  • The for loop is a loop whose condition is directly related to the number

1.3 while loop

The syntax structure of the while statement is as follows:

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

Implementation idea:

• 1. Execute the conditional expression first. If the result is true, execute the loop body code; If false, exit the loop and execute the following code
• 2 execute loop body code
• 3 after the execution of the loop body code, the program will continue to judge the execution condition expression. If the condition is still true, the loop body will continue to be executed until the loop condition is false

be careful:

• When using a while loop, you must pay attention to that it must have exit conditions, otherwise it will become an endless loop

1.4 do while cycle

The syntax structure of the do... while statement is as follows:

do {    // Loop body code - repeatedly execute loop body code} while (conditional expression) when the conditional expression is true;

Implementation ideas

• 1 execute the loop body code once first

• 2. Execute the conditional expression again. If the result is true, continue to execute the loop body code. If it is false, exit the loop and continue to execute the following code

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

1.5 continue,break

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

For example, if you eat five steamed stuffed buns and the third one has insects, throw away the third one and continue to eat the fourth and fifth steamed stuffed buns. The code implementation is as follows:

for (var i = 1; i <= 5; i++) {     
    if (i == 3) {         
        console.log('This steamed stuffed bun has worms. Throw it away');         
        continue; // Jump out of this cycle, jump out of the third cycle       
    }      
    console.log('I'm eating the third' + i + 'Where's a steamed stuffed bun'); 
}

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

For example, if you eat five steamed stuffed buns, you will find half a bug in the third one, and you won't eat the rest. The code implementation is as follows:

for (var i = 1; i <= 5; i++) {   
  if (i == 3) {       
      break; // Directly exit the whole for loop and jump to the statement below the whole for   
  }   
  console.log('I'm eating the third' + i + 'Where's a steamed stuffed bun'); 
}

2 - code specification

2.1 identifier naming specification

• The naming of variables and functions must be meaningful
• Variable names are generally nouns
• The names of functions are usually verbs

2.2 operator specification

Leave a space on the left and right sides of the operator

// Leave a space on the left and right sides of the operator
for (var i = 1; i <= 5; i++) {   
    if (i == 3) {       
        break; // Directly exit the whole for loop and jump to the statement below the whole for loop   
    }   
    console.log('I'm eating the third' + i + 'Where's a steamed stuffed bun');
}

2.3 single line note specification

Notice a space in front of a single line comment

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 the third' + i + 'Where's a steamed stuffed bun');
}

2.4 other specifications

Space between keywords and operators