JS super detailed introduction summary

Posted by jpmoriarty on Sun, 20 Feb 2022 16:51:48 +0100

(1) Conversion of data types

1, Introduction to data type conversion
In the program, there are often inconsistent data types, and data type conversion is required if the expected results are not obtained
1. Transfer from other types to number
1.1 string type to number

console.log(Number('123'));  //Convert string 123 to 123

1.2 integer: parseInt (data)

console.log( parseInt('11120.2qq'));  //Take the number before the decimal point

1.3 decimal conversion: parsefloat (data)

console.log( parseFloat('11120.2qq')); //Take one digit after the decimal point

1.4 non string type to number

console.log(Number(true));  //true is converted to a value of 1, that is, the output is 1
console.log(Number(false)); //false is converted to a value of 0, that is, the output is 0
console.log(Number(undefined));//When undefined is converted to any numeric type, it will be output as NaN
console.log(Number(null)); //null is converted to numeric 0, that is, the output is 0

2. Special value conversion of type number

1.NaN :  number A special value in the type
not a number : It's not a number. If your operation can't get a number, you'll get it at this time NaN
Scenario: NaN Indicates an incorrect operation. The cause is usually code failure bug
2.NaN Features: can not participate in any operation. The result is always NaN

3.string type conversion

1. String(data)
console.log(String(123));
console.log(String(true));
console.log(String(undefined));
console.log(String(null));
2. Variable name.toString()
/* a. If it is undefined and null, an error will be reported in this way
b. This method can support binary conversion. For example, convert decimal to hexadecimal */
let num=255
console.log(num.toString(16));

4.Boolean type conversion

<script>
/*
1.false:  Seven kinds of data will get false
0 -0 NaN  ''  undefined  null  false
2.true:  All data except false
*/
console.log( Boolean(0) ) //false
console.log( Boolean(-0) )//false
console.log( Boolean(NaN) )//false
console.log( Boolean('') )//false
console.log( Boolean(undefined) )//false
console.log( Boolean(null) )//false
console.log( Boolean(false) )//false
</script>

5. Implicit conversion

Implicit conversion: when both sides of the operator 'Inconsistent data type' When, the compiler will convert to consistent post operation
(1)Converting numbers: arithmetic operators + - * / %
(2)Conversion strings: Connectors+  (+As long as one side of the sign is a string, at this time+Is the connector)
(3)Convert Boolean: Logical non !
//(1) Convert numbers: arithmetic operators + - * /%
console.log('10'-1);  //Convert string 10 to numeric value 10
console.log(1+ true); //Boolean to digital
console.log( + '10');  //Mathematics is just right

// (2) Conversion string: connector + (+ is the connector when one side of the + sign is a string)
console.log('1'+ true); //String 1 connection string true

//(3) Boolean conversion: logical non!
console.log( !1);  //The number 1 is converted to Boolean 1, and logical non-1 is false
console.log( !null); //null is converted to Boolean 0, and logical non-0 is true

6. Difference between undefined and null
1.undefined: undefined. When a variable is declared but not assigned. The default value is undefined
2.null: defined. The defined value is null.

// undefined and null have something in common: the value is equal, and the boolean type is false
console.log(undefined == null);  //If the boolean type is false, it is true
console.log(Boolean(undefined)); //undefined to boolean type is false, that is, false
console.log(Boolean(null)); //null to boolean type is false, that is, false
// The difference between undefined and null: the data type is different, and the value of conversion to number type is different
console.log(undefined=== null); //Undefined is undefined and null is null. If the data type is different, it is false
console.log(Number(undefined));//NaN undefined is converted to any Number numerical type, and the output result is NaN
console.log(Number(null)); //Null is a null value, and the conversion value is 0

(2) Statement expression

Simple summary: expressions with operators and statements without operators

//1. Expression: an expression composed of operators must have an operation result (operation)
//2. Statement: let js compiler execute a command and do something (execute)
//Branch statement loop statement
1. if single branch structure
//1. Sequential structure (default): the code is executed from top to bottom
//   console.log('1-i went to school today ')
//   console.log('2-i took the exam today ')
//   console.log('3-i'm home ')
//   console.log('5-i went back to my room to sleep ')

//2. Branch structure: code is executed according to conditions
/* grammar
if(Condition (true/false){
Code to be executed if conditions are met
}
Note: what code can be written for the conditions in parentheses?
(1)Comparison expression: the result of comparison expression must be Boolean
(2)Write Boolean values directly
(3)Write other values: the compiler will automatically convert to boolean type to determine whether it is true */

Elif-2 double branch

<script>
/* if-else Double branch
Syntax:
if(Condition (true/false){
Code to be executed when the condition is true
}else{
Code to be executed when the condition is not tenable
}
Note: double branch statements are two mutually exclusive conditions (one of the two conditions must be met, and neither will they be met at the same time)
if Curly brace code and else curly brace code will execute one at a time, and will not execute at the same time */
//   console.log('1-i went to school today ')
//   console.log('2-i took the exam today ')
//   console.log('3-i'm home ')
//   console.log('5-i went back to my room to sleep ')
//Needs: (1) my father called me only after I failed the exam. (2) my father bought me an Audi after I passed the exam
let score=44
console.log('1-I went to school today')
console.log('2-I passed the exam today')
console.log('3-I'm home')
if(score >=60){
console.log('4-After passing the exam, my father bought me an Audi')
}
else{
console.log('4-Dad hit me when I failed the exam')
}
console.log('5-I went back to my room to sleep')
</script>

3. If - else multi branch

/*        if Branch statement
Single condition: if single branch
Two conditions: if else double branch
Multiple conditions: if - else if - else multiple branches

grammar
if(Condition 1){
Code to be executed when condition 1 is true
}else if(Condition 2){
Code to be executed when condition 2 is true
}else if(Condition 3){
Code to be executed when condition 2 is true
}
.....
else{
If all the previous conditions are not met, execute else code
}
Attention
(1)All curly brace codes of multiple branches can only execute one at most. Only when the previous conditions are not met will they enter the subsequent condition judgment
(2)Multiple branches must start with if, followed by else if, and the end else can be omitted*/
//Demand (1) above 90, buy Bugatti (2) 80-90, Lamborghini (3) 60-80, Tesla (4) fail, beat me
let score=44
console.log('1-I went to school today')
console.log('2-I passed the exam today')
console.log('3-I'm home')
if(score >=90){
console.log('4-After passing the exam, my father bought me Bugatti')
}
else if(score >=80){
console.log('4-After passing the exam, my father bought me a Lamborghini')
}
else if(score>=60){
console.log('4-After passing the exam, my father bought me Tesla')
}
else{
console.log('4-If you fail, hit me')
}
console.log('5-I went back to my room to sleep')
</script>

4. Ternary expression

/*  1.Operators are divided into unary, binary and ternary operators according to the number of operands
Unary operator: can only operate on one number
++ -- !
Binary operator: can operate on two numbers
Arithmetic, comparison
Ternary operator: can operate on three numbers
?:
2.Ternary expression: expression? Code 1: Code 2
Execution rule: if the expression is true, execute code 1; otherwise, execute code 2
3.The function of ternary expression is similar to that of if else statement
3.1 If your code has only one line, you can use ternary
3.2 Ternary expression has operation result   */

5. Switch case branch structure
Syntax:
Switch (matching value){
case value 1:
Value 1 = = = matching value, code to be executed
break
case value 2:
Value 2 = = = matching value, code to be executed
break
...
default :
The matching value does not match the values of all case s above (congruent). The code to be executed break s}
Attention
(1) The matching value and case value must be 'congruent'
(2) The break keyword cannot be omitted. The function of the break keyword is to end the switch statement
If omitted, the traditional phenomenon occurs: the code executes unconditionally from the previous case to the next case

switch (subject){
case  1 :
alert ('Congratulations on choosing the front end')
break
case 2 :
break
case 3 :
break
default :
alert( 'I'm sorry there's nothing you like')
break

6. Switch case penetration usage

//Demand: let the user enter the month and tell the user what season it is
/* Spring: 3 4 5
Xia: 6 7 8
Autumn: 9 10 11
Winter: 12 1 2  */
let month= +prompt('Please enter the month')
switch(month) {
case 3:
case 4:
case 5:
break
case 6:
case 7:
case 8:
break
case 9:
case 10:
case 11:
break
case 12:
case 1:
case 2:
break
default :
alert('Sorry, the machine doesn't recognize it')
}

(3) Process cycle control - cycle structure

1.while loop

<script>
//Print 3 times, monitor AI Kunge
//Disadvantages of copy and paste: (1) redundant code (2) inconvenient maintenance
// console.log( '' )
// console.log('monitor AI Kunge ')
// console.log('monitor AI Kunge ')
Loop structure: repeated code execution
while Circular grammar
while( condition true/false ){
Loop body: code that needs to be executed repeatedly
}
Execution rules
let num=1
while(num<=30){
console.log('It's a lovely day');
num ++
}
console.log('The weather is terrible today')
</script>

2.for loop
for loop: 1 Declare loop variable 2 Cycle condition 3 Loop variables are written in parentheses, which makes the code more concise and easy to read
Syntax:
For (statement 1; statement 2; statement 3){
Loop body: code that needs to be executed repeatedly
}
Loop step 1 in the for loop, statement 1 will only loop once, that is, i=1 will only loop once
After the execution of statement 1 in loop step 2, the loop body, namely console, will be executed Log (piggy page)
Loop step 3 after the execution of the loop body, execute statement 3 to execute, and then execute statement 2 to judge until statement 2 is false and jumps out of the loop body
Execution rules

for(let i=1;i<=3;i++){
console.log('Peppa Pig');
}
console.log('Piggy run away.');

3.break and continue
Continue: end the current loop body and immediately enter the next loop body * * continue can only be used for loop statements
break: end the whole loop body
**break can end the loop statement + switch case

//Simulate eating 10 dumplings
for( i=1;1<=10;i++){
if(i==5){
console.log('This steamed stuffed bun has gone bad');
//  continue if i=5, end this cycle and immediately enter the body of the next cycle
break  //If i=5, end the whole cycle
}
console.log(`This is the first time to eat \${i}A steamed stuffed bun`);
}

Topics: Javascript Front-end