前端笔记54——运算符

运算符分类

算术运算符
关系运算符
逻辑运算符
条件运算符
赋值运算符

算术运算符

算术运算符用于执行变量与/或值之间的算术运算。
在这里插入图片描述

加减乘除就不用说了，后面的%(取余)、++(累加)、–(递减)需要单独举个例子。

%(取余)的例子

在输入框中输入一个3位数，点击按钮后，在id为result的div中输出这个数的个位。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="text"  id="ipt"/>
		<button id="btn">点击输出个位数</button>
		<div id="box"></div>
		<script type="text/javascript">
			// 997 --> 7
			var oIpt = document.getElementById("ipt")
			var oBtn = document.getElementById("btn")
			var oBox = document.getElementById("box")
			// 给按钮绑定点击事件
			oBtn.onclick = function(){
				// 运算符 数据类型  %
				// 规律： 9999 % 1000 得到的就是一个三位数 999
				//       999 % 100 得到的就是一个两位数   99
				//       99 % 10 得到的就是一个一位数  9
				var num1 = oIpt.value
				var num2 = num1 % 100 % 10
				// 把这个值赋给div
				oBox.innerHTML = num2
			}
		</script>
	</body>
</html>

自加自减的例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var a = 1;
			// 在原来1的基础上面+1
			a++
			alert(a)
			// 在原来5的基础上面-1
			var b = 5
			b--
			alert(b)
			 顺序问题 ++a 和 a++
			var a = 1
			// b = 1
			var b = a 
			// a =1 b=2 这一步的时候把b赋值给a 所以a=1
			a = b++   
			//b=1 a=2 这一步的时候先把a=1赋值给b 覆盖上面
			b = a++
			// a=2 b=2 这一步先让b自加等于2 然后赋值给a
			a = ++b
			// 输出结果 2 2
			console.log(a,b)
		</script>
	</body>
</html>

总结：++ 在变量后面参与赋值，先赋值在自加， --也一样，不管++放在前面还是后面，运行完后的结果都会加或者减1。

关系运算符

关系运算符又称为比较运算符。符号有：<,>,<=,>=,!=,== ,===。

== 和 ===的区别

相同点：都是用来做判断的。
不同点：== 是不带有类型进行比较， ===是带有类型进行比较。

逻辑运算符

逻辑运算符主要有：

&& 并且的意思，必须两边同时满足结果为true；
|| 或者的意思，两边只有满足一个就行结果就会true；
！取反的意思，原来是true变成false 原来是false变成true

总结：&&是有假为假，||是有真为真。

逻辑运算符短路问题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			// && 有假为假  ||有真有真
			// 先判断 左边的表达式 发现true，此时还不能决定整个表达式的结果
			// 所以会接着执行右边的表达式，左右两个表达式都执行了
			// true && true
			// 先判断左边的表达式 发现false，此时就知道了整个表达式的结果
			// 没必要去执行后面了，把这种现象称为短路
//			false && true
			function fn1(){
				console.log("fn1执行了")
				return false
			}
			function fn2(){
				console.log("fn1执行了")
				return true
			}
//			var res = fn1()
//			console.log(res)
//			var res = fn1() && fn2()
//			console.log(res)
			fn1() || fn2()
		</script>
	</body>
</html>

逻辑运算符短路问题的应用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			// 短路应用
			// && 希望别人传一个函数给fn
//			var fn = function(){
//				alert(1)
//			}
//			var fn = undefined
//          如果是一个function 转换成 true
//			undefined 转换成false
//			fn && fn()
			
			// ||逻辑或   输入字符串  打印长度
			var str1 = prompt("请输入字符串：")
//			alert(str1.length)
// 			如果用户输入了值 str1赋值给str2，str1转换的时候是true
// 			如果用户没有输入 str1为null-->false
			var str2 = str1 || "abcdef.com"
			alert(str2.length)
		</script>
	</body>
</html>

条件运算符

条件运算符又称做三目运算符。
表达式?value1:value2;

举例说明

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			// 三目运算符
			var num = prompt("请输入分数")
			num >= 60 ? alert("及格"):alert("不及格")
			// 如果？前面的表达式结果true 执行：前面的语句。
			// 如果？前面的表达式结果false 执行：后面的语句
		</script>
	</body>
</html>

赋值运算符

	a += 10 => a = a+10
	a *= 10 => a = a*10