ECMAScript 运算符与表达式-组团学

一、算数运算符和算数运算表达式

表达式

由变量、常量和运算符组成的式子称为表达式

如何阅读表达式：
- 阅读表达式的功能
- 阅读表达式的值
算数运算符

+ - * / %

加减乘除取余
算数运算表达式

功能：进行符号对象的算数运算，不会修改变量的值

值：相关算数运算的结果

+	-	*	/	%
加	减	乘	除	取余

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>算数运算符和算数运算表达式</title>
</head>
<body>
	<script type="text/javascript">
		//1、Number + Number  直接数学运算
		var num1 = 10;
		var num2 = 20;
		console.log(num1 + num2);
		//1.任何数与NaN进行运算结果都是NaN;
		//2.Infinity+(-Infinity) = NaN;

		//2、Boolean/Undefined/Null + Number
		//先转换成Number类型，然后进行算术运算
		console.log(num1 + null);
		
		//3、String+(Number/Boolean/Undefined/Null)
		//+相当于是字符串的拼接符
		console.log("str" + num1);
	</script>
</body>
</html>

二、赋值运算符和赋值运算表达式

赋值运算符

=
赋值运算表达式

格式：变量 = 表达式

功能：计算等号右侧"表达式"的值，并赋值给等号左侧的"变量"

值：赋值结束后变量的值

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>赋值运算符和赋值运算表达式</title>
</head>
<body>
	<script type="text/javascript">
		 var num = 10;
		 var ret;

		 ret = num + 20;
		 console.log("ret = " + ret);
	</script>
</body>
</html>

三、自增自减运算符和自增自减运算表达式

自增运算符
++
自增运算表达式

格式：
- 变量++
- ++变量
功能：变量++，++变量都是自增运算表达式，功能都是将"变量"的值加１

值：
- 变量++称为加前取值，先取值再增加，表达式的值是"变量"增加之前的值
- ++变量称为加后取值，先增加后取值，表达式的值是"变量"增加之后的值

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>自增运算符</title>
</head>
<body>
	<script type="text/javascript">
		var a = 1;
		var b;
		b = a++;
		console.log(a);
		console.log(b);

		var c = 1;
		var d;
		d = ++c;
		console.log(c);
		console.log(d);
	</script>
</body>
</html>

自减运算符

--
自减运算表达式

格式：
- 变量--
- --变量
功能：变量–，--变量都是自减运算表达式，功能都是将"变量"的值减１

值：
- 变量--称为减前取值，先取值再减少，表达式的值是"变量"减少之前的值
- --变量称为减后取值，先减少后取值，表达式的值是"变量"减少之后的值

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>自减运算符</title>
</head>
<body>
	<script type="text/javascript">
		var a = 1;
		var b;
		b = a--;
		console.log(a);
		console.log(b);

		var c = 1;
		var d;
		d = --c;
		console.log(c);
		console.log(d);
	</script>
</body>
</html>

四、复合运算符

符号	说明
+=	a += 1 相当于 a = a + 1
-=	a -= 1 相当于 a = a - 1
*=	a = 1 相当于 a = a 1
/=	a /= 1 相当于 a = a / 1
%=	a %= 1 相当于 a = a % 1

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>复合运算符</title>
</head>
<body>
	<script type="text/javascript">
		var a = 1;
		a += 1;
		console.log(a);
	</script>
</body>
</html>

五、关系运算符和关系运算表达式

关系运算符

> < >= <= == === != !==

大于小于大于等于小于等于等于绝对等于不等于绝对不等于
关系运算表达式

格式：表达式1 关系运算符表达式2

功能：计算"表达式1"和"表达式2"的值

值：如果关系成立，整个关系运算表达式的值为真，关系不成立，整个关系运算表达式的值为假

`>`	`<`	`>=`	`<=`	`==`	`===`	`!=`	`!==`
大于	小于	大于等于	小于等于	等于	绝对等于	不等于	绝对不等于

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>关系运算符和关系运算表达式</title>
</head>
<body>
	<script type="text/javascript">
		console.log(1 > 0)

		var a = 1;
		var b = "1";
		console.log(a == b);
		console.log(a === b);

		var m = 1;
		var n = "1";
		console.log(m != n);
		console.log(m !== n);
	</script>
</body>
</html>

六、三目运算符和三目运算表达式

三目运算符

?:
三目运算表达式

格式：表达式 ? 表达式1 : 表达式2

功能：如果"表达式"的值为真，则计算"表达式1"的值，否则计算"表达式2"的值

值：如果"表达式"的值为真，则整个三目运算表达式的值为"表达式1"的值，否则为"表达式2"的值

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>三目运算符和三目运算表达式</title>
</head>
<body>
	<script type="text/javascript">
		var a = 1 ? 2 : 3;
		console.log(a);
	</script>
</body>
</html>

七、逻辑运算符

逻辑与运算符

运算符：&&

逻辑与运算表达式格式：表达式1 && 表达式2

逻辑与运算表达式值：
- 如果表达式1的值为真，表达式2的值为真，则整个逻辑与运算表达式的值为真
- 如果表达式1的值为真，表达式2的值为假，则整个逻辑与运算表达式的值为假
- 如果表达式1的值为假，表达式2的值为真，则整个逻辑与运算表达式的值为假
- 如果表达式1的值为假，表达式2的值为假，则整个逻辑与运算表达式的值为假
总结：有一个为假就为假
```
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>逻辑与运算符</title>
</head>
<body>
	<script type="text/javascript">
		console.log(1 && 1)
		console.log(1 && 0)
	</script>
</body>
</html>
```
逻辑或运算符

运算符：||

逻辑或运算表达式格式：表达式1 || 表达式2

逻辑或运算表达式值：
- 如果表达式1的值为真，表达式2的值为真，则整个逻辑或运算表达式的值为真
- 如果表达式1的值为真，表达式2的值为假，则整个逻辑或运算表达式的值为真
- 如果表达式1的值为假，表达式2的值为真，则整个逻辑或运算表达式的值为真
- 如果表达式1的值为假，表达式2的值为假，则整个逻辑或运算表达式的值为假
总结：有一个为真就为真
```
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>逻辑或运算符</title>
</head>
<body>
	<script type="text/javascript">
		console.log(1 || 1)
		console.log(0 || 1)
		console.log(1 || 0)
		console.log(0 || 0)
	</script>
</body>
</html>
```
逻辑非运算符

运算符：!

逻辑非运算表达式格式：!表达式

逻辑非运算表达式值：
- 如果表达式的值为真，则逻辑非运算表达式的值为假
- 如果表达式的值为假，则逻辑非运算表达式的值为真
总结：颠倒黑白
```
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>逻辑非运算符</title>
</head>
<body>
	<script type="text/javascript">
		console.log(!0)
		console.log(!1)
	</script>
</body>
</html>
```

惰性求值（短路原则）

注意：逻辑与和逻辑或都存在惰性求值

逻辑与

格式：表达式1&&表达式2&&表达式3&&……&&表达式n

说明：从左至右依次计算表达式的值，当遇到某一个表达式的值为假，那么已经确认整个表达式的值为假，后面的表达式就不会再被计算了

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>逻辑与惰性求值</title>
</head>
<body>
	<script type="text/javascript">
		var a = 1;
		var b = 1;
		var c = 1;
		console.log(a++ && --b && c++)
		console.log(a);
		console.log(b);
		console.log(c);
	</script>
</body>
</html>

逻辑或

格式：表达式1||表达式2||表达式3||……||表达式n

说明：从左至右一次计算表达式的值，当遇到某一个表达式的值为真，那么已经确认整个表达式的值为真，后面的表达式就不会再被计算了

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>逻辑或惰性求值</title>
</head>
<body>
	<script type="text/javascript">
		var a = 1;
		var b = 1;
		var c = 1;
		console.log(a++ || --b || c++)
		console.log(a);
		console.log(b);
		console.log(c);
	</script>
</body>
</html>

八、运算符的优先级

优先级从高到底

() 优先级最高
一元运算符 ++ – !
算数运算符先* / % 后 + -
关系运算符 > >= < <=
相等运算符 == != === !==
逻辑运算符先 && 后 ||
赋值运算符