ECMAScript 运算符与表达式
阅读 (360)一、算数运算符和算数运算表达式
-
表达式
由变量、常量和运算符组成的式子称为表达式
如何阅读表达式:
- 阅读表达式的功能
- 阅读表达式的值
-
算数运算符
+ - * / % 加 减 乘 除 取余 -
算数运算表达式
功能:进行符号对象的算数运算,不会修改变量的值
值:相关算数运算的结果
<!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>
三、自增自减运算符和自增自减运算表达式
-
自增运算符
-
++
-
自增运算表达式
格式:
变量++
++变量
功能:变量++,++变量都是自增运算表达式,功能都是将"变量"的值加1
值:
变量++
称为加前取值,先取值再增加,表达式的值是"变量"增加之前的值++变量
称为加后取值,先增加后取值,表达式的值是"变量"增加之后的值
<!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>
-
自减运算符
--
-
自减运算表达式
格式:
变量--
--变量
功能:变量–,--变量都是自减运算表达式,功能都是将"变量"的值减1
值:
变量--
称为减前取值,先取值再减少,表达式的值是"变量"减少之前的值--变量
称为减后取值,先减少后取值,表达式的值是"变量"减少之后的值
<!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>
-
八、运算符的优先级
优先级从高到底
- () 优先级最高
- 一元运算符 ++ – !
- 算数运算符 先* / % 后 + -
- 关系运算符 > >= < <=
- 相等运算符 == !=
===
!== - 逻辑运算符 先 && 后 ||
- 赋值运算符