当前位置：网站首页>基础知识 | js基础

基础知识 | js基础

2022-06-27 07:10:00 【快乐的高兴的学习代码中】

运算符

运算符

运算符operator也被称为操作符，用于实现赋值、比较和执行算术运算等功能的符号

js中常见的运算符有算术运算符、递增和递减运算符、比较运算符、逻辑运算符、赋值运算符 

 算术运算符

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

运算符之间要留有空格  console.log(1 + 1);

浮点数（就是小数）在进行算术符进行计算时，它的精确度不如整数

运算符描述实例用途
+加10+20=30
-减10-20=-10
*乘10*20=200
/除10/20=0.5
%取余数（取模）返回触发的余数9%2=1余数为0说明数能被整除

 案列：算术运算符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		//----- /除法
		console.log(2 / 2);//1
		//-----%取余
		console.log(5 % 3);//余为2
		
		// 浮点数问题
		console.log(0.1 + 0.2);//0.30000000000000004
		console.log(0.07 * 100);//7.000000000000001
		</script>
	</body>
</html>

表达式与返回值 

 表达式是由数字、运算符、变量等能求得数值的有意义排列方法所得的组合

 表达式最终都会有一个结果，返回给我们，称这个结果为返回值

 案列：表达式与返回值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		//2+2为表达式，4为返回值
		console.log(2 + 2);//4
		</script>
	</body>
</html>

 前增/后增 递增/递减运算符 

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

 放在变量前的++/--称为 前置递增/减运算符，放在变量后的++/--称为 后置递增/减运算符

 前置、后置自增单独使用，效果是一样的，但是在表达式上使用符号的前后位置会对结果有影响

案例：递增/递减运算符 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		// 自增加1方式一
		var num=1;
		num=num+1;
		console.log(num);//2
		
		//递增方式用在变量上没有差别
		var age=2;
		age++;
		console.log(age);//3
		
		var num=2;
		++num;
		console.log(num);//3
		
		//递增方式在表达式上符号的前后会对结果有影响
		var bed=10;
		console.log(bed++ +10);//20
		
		var tub=10;
		console.log(++tub +10);//21
		
		</script>
	</body>
</html>

比较运算符

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

运算符名称说明案列结果
<小于3<5true
>大于3>5false
>=大于或等于2>=2true
<=小于或等于4<=3false
==判断值是否相等，会自动转换值类型37=='37'true
!=不等于37！=37false
===全等于，值和数据类型都要一样37===37true
!==不全等于37！==37false

 案列：比较运算符

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		console.log(5 > 3);//true
		
		//>= <=满足一个条件即可
		console.log(2 >= 2);//true
		
		//==自动转换值类型（隐式转换）,值相等就可以
		console.log(37 =='37');//true
		console.log(37 == 37);//true
		
		//!=
		console.log(18 != 18);//false
		
		// ===必须值和数据类型一致
		console.log(18 === 18);//true
		console.log(18 === "18");//false
		
		//!==
		console.log(18 !== 18);//false
		console.log(18 !== "18");//true
		</script>
	</body>
</html>

逻辑运算符

逻辑运算符是用于进行布尔值运算的运算符，返回值也是布尔值，经常用于多个条件的判断

 逻辑与 &&     两个结果都为true,结果才是true,只要有一个false，结果就是false

 逻辑或 ||         两个结果为false，结果才是false,只要有一个为true,结果就是true

 逻辑非 !      值取反

逻辑运算符说明案例
&&逻辑与   andtrue && false
||逻辑或   ortrue | | false
！逻辑非   not! true

 案例1：逻辑运算符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		//逻辑与 && 两个结果都为true,结果才是true,只要有一个false，结果就是false
		console.log(3 > 5 && 3 > 2);//false
		console.log(3 < 5 && 3 > 2);//true
		
		//逻辑或 || 两个结果为false，结果才是false,只要有一个为true,结果就是true
		console.log(3 > 5 || 3 > 2 );//true
		console.log(3 > 5 || 3 < 2);//false
		
		//逻辑非 !
		console.log(!true);//false
		</script>
	</body>
</html>

 案例2：逻辑运算符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		var num = 7;
		var str = "我爱你~中国~";
		//str.length为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>

 逻辑中断 ||  /  &&

逻辑中断也叫短路运算，当值或者表达式参与逻辑运算时就是短路运算

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

逻辑与 &&     

表达式1 && 表达式2

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

 逻辑或  ||     

表达式1 || 表达式2

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

 案例1：逻辑中断

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		//短路运算 
		
		//逻辑与 && 表达式1为真，返回表达式2,1为假，返回1
		//数字里只有0是假的，其他都是真的
		// 如果有空的或者否定的为假，其余为真
		//假的有 0 空字符串'' null undefined NaN
		console.log(123 && 456);//456
		console.log(123 && 456 && 789);//789
		console.log(0 && 123);//0
		
		//逻辑或 || 表达式1为真，返回表达式1，表达式1为假，返回表达式2
		console.log(123 || 456);//123
		console.log(123 || 456 || 678);//123
		console.log('' || 345 || 678);//345
		</script>
	</body>
</html>

 案例2:num值

 

 

<!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>

赋值运算符

用来把数据赋值给变量的运算符

赋值运算符说明案例
=直接赋值var name="我是小可爱"
+=、-=加减一个数后，在赋值

var age=10;

age+=5;

*=、/=、%=乘除取模后，在赋值

var age=2;

age*=5;

 

 

 案例：赋值运算符

 

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

运算符优先级

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

 案例：运算符优先级

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		// 一元运算符
		//++num  !num
		
		//二元运算符，二元表达式
		//2+3
		
		console.log(4 >= 6 || '人' != '阿凡达' && !(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>

三元表达式

三元表达式也能做一些简单的条件选择，有三元运算符组成的式子称为三元表达式

条件表达式 ? 表达式1 ： 表达式2

如果条件表达式结果为真，返回表达式1，如果条件表达式结果为假，返回表达式2

案列：三元表达式

 

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		// 表达式是有结果的
		var num=10;
		var result = num > 5 ? '是的' : '不是的';
		console.log(result);
		
		// 用户输入数字，如果数字小于10，就在前面补0，比如01,09,如果数字大于10，就不需要补，比如20
		var time=prompt("请你输入0-59之间的一个数字");
		var result2 = time < 10 ? '0'+ time : time;
		alert(result2);
		</script>
	</body>
</html>

推荐看

JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程(500多集)持续_哔哩哔哩_bilibili

原网站

版权声明
本文为[快乐的高兴的学习代码中]所创，转载请带上原文链接，感谢
https://blog.csdn.net/A123ppleQueen/article/details/125397846

边栏推荐

猜你喜欢

随机推荐