JS笔记02

最新推荐文章于 2022-10-22 14:00:00 发布

最爱琴女E

最新推荐文章于 2022-10-22 14:00:00 发布

阅读量303

点赞数

分类专栏： HTML CSS JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qwq_666/article/details/118029948

版权

算术运算符

概念：算术运算使用的符号，用于执行两个变量或值的算术运算

运算符	描述	实例
+	加	10 + 20 = 30
-	减	10 - 20 = -10
*	乘	10 * 20 = 200
/	除	10 / 20 = 0.5
%	取余数（取模）	返回除去的余数9 % 2 = 1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			console.log(1 + 1);//2
			console.log(1 - 1);//0
			console.log(1 * 1);//1
			console.log(1 / 1);//1
			// % 取余
			console.log(4 % 2);//0
			console.log(5 % 3);//2
			console.log(3 % 5);//3
		</script>
	</head>
	<body>
	</body>
</html>

浮点数精度问题

浮点数值的最高精度是17位小数，但在进行算术计算时其精确度远远不如整数

var result = 0.1 + 0.2;			//结果不是0.3，而是：0.30000000000000004
console.log(0.7 * 100);			//结果不是7，而是：7.000000000000001

所以不要直接判断两个浮点数是否相等

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//浮点数 算术运算里面会有问题
			//我们不能直接拿着浮点数来进行相比较 是否相等
			var num = 0.1 + 0.2;
			console.log(num == 0.3);//false
		</script>
	</head>
	<body>
	</body>
</html>

递增和递减运算符

如需反复给数字变量添加或减去1，可以使用递增（++）和递减（–）运算符来完成

前置递增运算符

++num 前置递增，就是自加1，类似于num = num + 1，但是 ++num 写起来更简单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//1.想要一个变量自己加1 num = num + 1 比较麻烦
			var num = 1;
			num = num + 1;//++num
			console.log(num);//2
			//2.前置递增运算符 ++ 写在变量的前面
			var age = 10;
			++age;
			console.log(age);//11
			//3.先加1 后返回值
			var p = 10;
			console.log(++p + 10);//21
		</script>
	</head>
	<body>
	</body>
</html>

后置递增运算符

num++ 后置递增，就是自加1，类似于num = num + 1，但是 num++ 写起来更简单

使用口诀：先返回原值，后自加

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var num = 10;
			num++;// num = num + 1 ++num;
			//前置自增和2后置自增如果单独使用 效果是一样的
			var age = 10;
			console.log(age++ + 10);//20
			//这里age = 11
		</script>
	</head>
	<body>
	</body>
</html>

前置递增和后置递增小结

前置递增和后置递增运算符可以简化代码的编写，让变量的值+1比以前写法更简单
单独使用时，运行结果相同
与其他代码联用时，执行结果会不同
后置：先原值运算，后自加（先人后己）
前置：先自加，后运算（先己后人）
开发时，大多使用后置递增/减，并且代码独占一行，例如：num++ 或者 num–;

比较运算符

概念：比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true/false）作为比较运算的结果

运算符名称	说明	案例	结果
<	小于号	1 < 2	true
>	大于号	1 > 2	false
>=	大于等于号（大于或者等于）	2 >= 2	true
<=	小于等于号（小于或者等于）	3 <= 2	false
==	判等号	37 == 37	true
!=	不等号	37 != 37	false
=== !==	全等要求值和数据类型都一致	37 === ‘37’	false

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//1.程序里面的等于符号是 == 默认转换数据类型 会把字符串型的数据转换为数字型 只要求值相等就可以
			console.log(3 == 5)//false
			console.log('阿波' == '波波');//false
			console.log(78 == 78);//true
			console.log(78 == '78');//true
			console.log(78 != 78);//false
			//2.程序里面有全等 一模一样 要求 两侧的值 还有 数据类型完全一致才可以true
			console.log(18 === 18);//true
			console.log(18 === '18');//false
		</script>
	</head>
	<body>
	</body>
</html>

小结

符号	作用	用法
=	赋值	把右边给左边
==	判断	判断两边值是否相等（注意此时有隐式转换）
===	全等	判断两边的值和数据类型是否完全相同

逻辑运算符

概念：逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。后面开发经常用于多个条件的判断

逻辑运算符	说明	案例
&&	“逻辑与”，简称 “与” and	true && false
\|\|	“逻辑或”，简称 “或” or	true \|\| false
!	“逻辑非”，简称 “非” not	! true

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//1.逻辑与 && and 两侧都为true 结果才是true 只要有一侧为false 结果就为false
			console.log(3 > 5 && 3 > 2);//false
			console.log(3 < 5 && 3 > 2);//true
			//2.逻辑或 || or 两侧都为false 结果才是假 false 只要有一侧为true 结果就是true
			console.log(3 > 5 || 3 > 2);//true
			console.log(3 > 5 || 3 < 2);//false
			//3.逻辑非 ! not
			console.log(!true);//false
		</script>
	</head>
	<body>
	</body>
</html>

小结

逻辑与&&：两边都是true才返回true，否则返回false

逻辑或||：两边都为false才返回false，否则都为true

逻辑非!：也叫取反符，用来取一个布尔值相反的值，如true的相反值是false

var isOk = !true;
console.log(isOk);//false

短路运算（逻辑中断）

当有多个表达式时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值

逻辑与

语法：表达式1 && 表达式2

如果第一个表达式的值为真，则返回表达式2

如果第一个表达式的值为假，则返回表达式1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//1.用我们的布尔值参与的逻辑运算 true && false == false
			//2.123 && 456是值 或者是 表达式 参与逻辑运算？
			//3.逻辑与短路运算 如果表达式1为真 则返回表达式2 如果表达式1为假的 返回表达式1
			console.log(123 && 456);//456
			console.log(0 && 456);//0
			console.log(0 && 1 + 2 && 456 * 56789);//0
			console.log('' && 1 + 2 && 456 * 56789)//''
			//如果有空的或者否定的为假 其余是真的 0、''、null、undefined、NaN
		</script>
	</head>
	<body>
	</body>
</html>

逻辑或

语法：表达式1 || 表达式2

如果表达式1为真，则返回表达式1

如果表达式1为假，则返回表达式2

console.log(123 || 456);//123
console.log(0 || 456);//456
console.log(123 || 456 || 789);//123

赋值运算符

赋值运算符	说明	案例
=	直接赋值	var usrName = ‘我是值’
+=、-=	加、减一个数后再赋值	var age = 10;age += 5; //15
*=、/=、%=	乘、除、取模后再赋值	var age = 2; age *= 5; //10

var age = 10;
age += 5;//相当于 age = age + 5
age -= 5;//相当于 age = age - 5
age *= 10;//相当于 age = age * 10

运算符优先级

优先级	运算符	顺序
1	小括号	()
2	一元运算符	++ – !
3	算术运算符	先 * / % 后 + -
4	关系运算符	> >= < <=
5	相等运算符	== != === !==
6	逻辑运算符	先 && 后 \|\|
7	赋值运算符	=
8	逗号运算符	,

流程控制

流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构

顺序流程控制

顺序结构是程序中最简单、最基本的流程控制，它没有特定的语法结构，程序会按照代码的先后顺序，依次执行

分支结构

由上到下执行代码的过程中，根据不同条件，执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果

JS提供了两种分支结构语句：if语句和 switch语句

if分支语句

语法结构：

//条件成立执行代码，否则什么也不做
if(条件表达式) {

最低0.47元/天解锁文章

最爱琴女E

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS笔记02

算术运算符概念：算术运算使用的符号，用于执行两个变量或值的算术运算运算符描述实例+加10 + 20 = 30-减10 - 20 = -10*乘10 * 20 = 200/除10 / 20 = 0.5%取余数（取模）返回除去的余数9 % 2 = 1<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>
复制链接

扫一扫

专栏目录