JavaScript operators and statements

Operator

1. Assignment operator

Assignment operator: operator that assigns values to variables

The assignment operators are:
+ =
-=
*=
/=
%=

num + = 3 is equivalent to num = num + 3

2. Unary operators

Operators that can perform calculations using only one number

Self-increment:
Symbol: + +
Function: Let the value of the variable + 1
Decrement:
symbol:-
Function: Let the value of the variable -1
Usage scenario: often used for counting

Usage of increment operator

Prefix auto-increment

let num = 1
 + + num //Let the value of num +1 become 2

Executed once each time, equivalent to num + = 1 Equivalent to num = num + 1

Add it first and then use it (memory formula: + + before adding it first)

let i = 1
console.log( + + i + 2) //The result is 4
//i is 2, i first +1 becomes 2 and then +2

post-increment

let num = 1
num + + //Let the value of num +1 become 2

Executed once each time, equivalent to num + = 1 Equivalent to num = num + 1

Use it first and then add it yourself (memory formula: + + add after)

let i = 1
console.log( + 2) //The result is 3
//i is 2, i first +1 and then +2, then i becomes 2

Note: There is no difference between pre-increment and post-increment when used alone.

3. Comparison operators

Compare the size of two data to see if they are equal

The comparison operators are
>: Whether the left side is greater than the right side
<: Whether the left side is smaller than the right side
>=: Whether the left side is greater than or equal to the right side
<=: Whether the left side is less than or equal to the right side
==: Whether the left and right values are equal
===: Whether the types and values of the left and right sides are equal (to determine whether they are equal during development, it is highly recommended to use ===)
!==: Whether the left and right sides are not congruent
The comparison result is of boolean type, that is, only true or false will be obtained
String comparison is the ASCII code corresponding to the compared character.
Compare from left to right
If the first one is the same, compare the second one, and so on.
NaN is not equal to any value, including itself
When it comes to “NaN”, it is all false
Try not to compare decimals because decimals have precision issues
Implicit conversions occur when comparing different types
Finally, the data is implicitly converted to number type and then compared.
So in development, for accurate comparison we prefer === or !==

4. Logical operators

Usage scenarios: Used to solve multiple conditional judgments

Logical Operators:

5. Operator precedence

Logical non-precedence in unary operators is very high
Logical AND has higher priority than logical OR

Statement

1. Expressions and statements

expression:
An expression is code that can be evaluated and the JavaScript engine will calculate a result.
Statement:
A statement is a piece of code that can be executed.
Difference
- Expression: Because an expression can be evaluated, it can be written on the right side of an assignment statement.
  Expression num = 3 + 4
- Statement: Statements do not necessarily have values, so statements such as alert() for and break cannot be used for assignment.
  Statement alert() pops up a dialog box console.log() console prints output

2. Branch statement

1. if statement

Single branch statement

if (condition) {<!-- -->
  Statement to be executed if conditions are met
}

When the condition in the brackets is true, enter the curly brackets to execute the code
If the result in parentheses is not of Boolean type, implicit conversion will occur to Boolean type.
The return value of numbers other than 0 is true. The return value of strings other than empty string ” is true.
If the braces have only one statement, the braces can be omitted, but this is not recommended~

Double branch statement

if (condition) {<!-- -->
  Statement to be executed if conditions are met
} else{<!-- -->
  Statement to be executed if the condition is not met
}

Multiple branch statements
Usage scenario: Suitable for when there are multiple results

if (condition) {<!-- -->
  Statement 1
} else if (condition 2){<!-- -->
  Statement 2
} else if (condition 3){<!-- -->
  Statement 3
} else {<!-- -->
  Statement n
}

Determine condition 1 first. If condition 1 is met, code 1 will be executed. Others will not be executed.
If it is not met, then judge condition 2 downwards. If condition 2 is met, code 2 will be executed. Others will not be executed.
If you are still not satisfied, continue to make further judgments, and so on.
If none of the above conditions are met, execute the code n in else
Note: N conditions can be written

2. Ternary statement

Syntax: Condition? Code that meets the conditions for execution: code that does not meet the conditions for execution
Generally used to get the value

3. switch statement

Find the case value that is equal to the data in parentheses and execute the corresponding code inside
If there is no congruent ===, the code in default will be executed.
grammar:

switch (data) {<!-- -->
  case value 1:
       Code 1
       break
  case value 2:
       Code 2
       break
  default:
       code n
       break
}

The switch case statement is generally used for equality judgment and is not suitable for interval judgment.

Switch cases generally need to be used with the break keyword. Without break, case penetration will occur.

3. Loop statements

Breakpoint testing

Function: It can help you better understand the code operation when studying, and you can find bugs faster when working.
Open the debugging interface in the browser
1. Press F12/right click and check to open developer tools
2. Click on the sources column
3. Double-click to select the code file
4. Select the line that needs a breakpoint
5. refresh page
6. Click this button to execute the next line of code
Breakpoint: A mark added to a certain line of code is called a breakpoint. When the program executes the marked line of code, it will pause.

while loop

while loop syntax:

while (loop condition){<!-- -->
  Code to be executed repeatedly (loop body)
}

It is very similar to the if statement. The condition in the parentheses must be true to enter the loop body and execute the code.
The code in the while braces will not jump out after execution, but will continue to return to the parentheses to determine whether the condition is met. If it is satisfied, the code in the braces will be executed, and then return to the parentheses to determine the condition until the condition in the parentheses is not met. , that is, jump out

Three elements of while loop
1. Define variable starting value
2. Set the termination condition (without the termination condition, the loop will continue to execute, causing an infinite loop)
3. Define variable variation (use auto-increment or auto-decrement)

let i = 1 //1. Variable starting value
while (i<=3){<!-- --> //2. Termination condition
  document.write(`I will loop three times`)<br>
  i + + //Variable change amount
}

loop exit

End of loop:
- break: exit the loop
- continue: End this loop and continue the next loop
the difference:
- continue exits this loop. It is generally used to exclude or skip an option. You can use continue.
- break exits the entire loop. It is generally used when the result has been obtained and subsequent loops are no longer needed.

for loop

1. Basic use of for loop

grammar

for (variable starting value; termination condition; variable change){<!-- -->
    //Loop body
}

exit loop
continue exits this loop. It is generally used to exclude or skip an option. You can use continue.
break exits the entire for loop. It is generally used when the result has been obtained and can be used when subsequent loops are not needed.
Infinite loop
while(true) to construct an “infinite” loop, you need to use break to exit the loop.
for(; can also be used to construct an “infinite” loop, and you also need to use break to exit the loop.

2. Nested loops
grammar:

for (external declaration of variables that record the number of loops; loop conditions; changing values) {<!-- -->
  for (internally declares a variable that records the number of loops; loop conditions; changing values) {<!-- -->
    loop body
  }
}