版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/chengxu_kuangrexintu/article/details/85647246
运算符分类
- 算术运算符
- 关系运算符
- 逻辑运算符
- 条件运算符
- 赋值运算符
算术运算符
算术运算符用于执行变量与/或值之间的算术运算。
加减乘除就不用说了,后面的%(取余)、++(累加)、–(递减)需要单独举个例子。
%(取余)的例子
在输入框中输入一个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