当前位置：网站首页>Basic knowledge | JS Foundation

Basic knowledge | JS Foundation

2022-06-27 07:31:00 【Happy happy learning code】

Operator

Operator operator Also known as the operator , Used to implement assignment 、 Symbols that compare and perform functions such as arithmetic operations

js Common operators in are arithmetic operators 、 Increment and decrement operators 、 Comparison operator 、 Logical operators 、 Assignment operator

Arithmetic operator

The symbols used by arithmetic operators , Used to perform arithmetic operations on two variables or values

There should be spaces between operators console.log(1 + 1);

Floating point numbers （ It's a decimal ） When arithmetic operators are used to calculate , It is not as accurate as an integer

Operator	describe	example	purpose
+	Add	10+20=30
-	reduce	10-20=-10
*	ride	10*20=200
/	except	10/20=0.5
%	Take the remainder （ modulus ）	Returns the remainder of the trigger 9%2=1	Remainder is 0 An explanatory number can be divisible

Case list ： Arithmetic operator

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		//----- / division 
		console.log(2 / 2);//1
		//-----% Remainder 
		console.log(5 % 3);// Yu Wei 2
		
		//  Floating point problem 
		console.log(0.1 + 0.2);//0.30000000000000004
		console.log(0.07 * 100);//7.000000000000001
		</script>
	</body>
</html>

Expression and return value

Expressions are made up of numbers 、 Operator 、 A combination of variables, etc. obtained by a meaningful permutation method that can obtain numerical values
Expressions always end up with a result , Back to us , Call this result the return value

Case list ： Expression and return value

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		//2+2 Expression for ,4 For the return value 
		console.log(2 + 2);//4
		</script>
	</body>
</html>

It's increasing / Later increase Increasing / Decrement operator

If you need to add or subtract from a numeric variable over and over again 1, You can use incremental （++） And decline （--） Operator

Placed in front of variables ++/-- be called Pre increment / The subtraction operator , After the variable ++/-- be called Post increment / The subtraction operator

In front of 、 The post auto increment is used alone , The effect is the same , But using the position of the symbol before and after the expression will affect the result

Case study ： Increasing / Decrement operator

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		//  Self increase 1 Mode one 
		var num=1;
		num=num+1;
		console.log(num);//2
		
		// There is no difference in the incremental method used in variables 
		var age=2;
		age++;
		console.log(age);//3
		
		var num=2;
		++num;
		console.log(num);//3
		
		// The increment method will affect the result before and after the sign on the expression 
		var bed=10;
		console.log(bed++ +10);//20
		
		var tub=10;
		console.log(++tub +10);//21
		
		</script>
	</body>
</html>

Comparison operator

Comparison operators are also called relational operators , Is the operator used when comparing two data , After comparison , Will return a Boolean value （true/false） As a result of the comparison operation

Operator name	explain	Case list	result
<	Less than	3<5	true
>	Greater than	3>5	false
>=	Greater than or equal to	2>=2	true
<=	Less than or equal to	4<=3	false
==	Determine if the values are equal , The value type is automatically converted	37=='37'	true
!=	It's not equal to	37！=37	false
===	All equal to , Values and data types should be the same	37===37	true
!==	Not all equal to	37！==37	false

Case list ： Comparison operator

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		console.log(5 > 3);//true
		
		//>= <= One condition is satisfied 
		console.log(2 >= 2);//true
		
		//== Automatically convert value types （ Implicit conversion ）, The values are equal 
		console.log(37 =='37');//true
		console.log(37 == 37);//true
		
		//!=
		console.log(18 != 18);//false
		
		// === The value must be consistent with the data type 
		console.log(18 === 18);//true
		console.log(18 === "18");//false
		
		//!==
		console.log(18 !== 18);//false
		console.log(18 !== "18");//true
		</script>
	</body>
</html>

Logical operators

Logical operators are operators used for Boolean operations , The return value is also a Boolean value , It is often used to judge multiple conditions

Logic and && Both results are true, The result is true, As long as there is one false, The result is false
Logic or || The two results are false, The result is false, Just one for true, The result is true
Logic is not ! Value reversal

Logical operators	explain	Case study
&&	Logic and and	true && false
\|\|	Logic or or	true \| \| false
！	Logic is not not	! true

Case study 1： Logical operators

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		// Logic and  &&  Both results are true, The result is true, As long as there is one false, The result is false
		console.log(3 > 5 && 3 > 2);//false
		console.log(3 < 5 && 3 > 2);//true
		
		// Logic or  ||  The two results are false, The result is false, Just one for true, The result is true
		console.log(3 > 5 || 3 > 2 );//true
		console.log(3 > 5 || 3 < 2);//false
		
		// Logic is not  !
		console.log(!true);//false
		</script>
	</body>
</html>

Case study 2： Logical operators

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		var num = 7;
		var str = " I love you! ~ China ~";
		//str.length by 7
		console.log(num > 5 && str.length >= num);//true
		console.log(num < 5 && str.length >= num);//false
		console.log(!(num<10));//false
		console.log(!(num<10 || str.length == num));//false
		</script>
	</body>
</html>

Logic break || / &&

Logic interrupt is also called short circuit operation , When a value or expression participates in a logical operation, it is a short-circuit operation

When there are multiple expressions / When the value of , When the value of the expression on the left can determine the result , The value of the expression on the right will no longer be evaluated

Logic and &&
expression 1 && expression 2
If the value of the first expression is true , Just return the expression 2, If the value of the first expression is false , Just return the expression 1

Logic or ||
expression 1 || expression 2
If the value of the first expression is true , Just return the expression 1, If the value of the first expression is false , Just return the expression 2

Case study 1： Logic break

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		// Short-circuit operation  
		
		// Logic and  &&  expression 1 It's true , Return expression 2,1 For false , return 1
		// There are only 0 It's fake , Everything else is true 
		//  If there is empty or negative, it is false , The rest is true 
		// Fake yes  0  An empty string '' null undefined NaN
		console.log(123 && 456);//456
		console.log(123 && 456 && 789);//789
		console.log(0 && 123);//0
		
		// Logic or  ||  expression 1 It's true , Return expression 1, expression 1 For false , Return expression 2
		console.log(123 || 456);//123
		console.log(123 || 456 || 678);//123
		console.log('' || 345 || 678);//345
		</script>
	</body>
</html>

Case study 2:num value

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		var num=0;
		console.log(123 || num++);//123
		console.log(num);//0
		</script>
	</body>
</html>

Assignment operator

Operators used to assign data to variables

Assignment operator	explain	Case study
=	Direct assignment	var name=" I'm cute "
+=、-=	Add or subtract a number , In assignment	var age=10; age+=5;
*=、/=、%=	After multiplication and division , In assignment	var age=2; age*=5;

Case study ： Assignment operator

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		//  Method 1 
		var num=0;
		num=num+5;
		console.log(num);
		
		// Method 2 
		var age=10;
		age+=5;
		console.log(age);
		</script>
	</body>
</html>

Operator priority

priority	Operator	The order
1	parentheses	（）
2	Unary operator	++ -- ！
3	Arithmetic operator	First * / % after + -
4	Relational operator	> >= < <=
5	Equality operator	== != === !==
6	Logical operators	First && after \|\|
7	Assignment operator	=
8	The comma operator	,

Case study ： Operator priority

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		//  Unary operator 
		//++num  !num
		
		// Binary operator , Binary expression 
		//2+3
		
		console.log(4 >= 6 || ' people ' != ' "Avatar" ' && !(12 * 2 == 144) && true);//true
		
		var num=10;
		console.log(5 == num / 2 && (2 + 2 * num).toString() ==='22');//true
		
		var a = 3 > 5 && 2 < 7 && 3 == 4;
		console.log(a);//false
		
		var b = 3 <=4 || 3 > 1 || 3 != 2;
		console.log(b);//true
		
		var c = 2 === "2";
		console.log(c);//false
		
		var d = !c || b && a;
		console.log(d);//true
		</script>
	</body>
</html>

Ternary expression

Ternary expressions can also make some simple conditional choices , A formula consisting of ternary operators is called a ternary expression

Conditional expression ? expression 1 ： expression 2
If the conditional expression turns out to be true , Return expression 1, If the conditional expression turns out to be false , Return expression 2

Case list ： Ternary expression

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		//  Expressions have results 
		var num=10;
		var result = num > 5 ? ' Yes ' : ' No, it isn't ';
		console.log(result);
		
		//  The user enters numbers , If the number is less than 10, Just in front of it 0, such as 01,09, If the number is greater than 10, There is no need to make up , such as 20
		var time=prompt(" Please enter 0-59 A number between ");
		var result2 = time < 10 ? '0'+ time : time;
		alert(result2);
		</script>
	</body>
</html>