【五】JavaScript之运算符
【1】算术运算符
| 运算符 |
描述 |
| + |
加法 |
| - |
减法 |
| * |
乘法 |
| / |
除法 |
| % |
取模/求余数 |
| ** |
幂运算 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input{
width: 40px;
}
</style>
</head>
<body>
<input type="text" name="num1" value="0">
<select name="oprator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
<option value="%">%</option>
<option value="**">**</option>
</select>
<input type="text" name="num2" value="0">
=
<input type="text" name="result" value="0">
<button id="calc">计算</button>
<script>
// 先获取id=calc的元素
// document.querySelector("css选择符")
var calc = document.querySelector('#calc');
var num1 = document.querySelector('input[name="num1"]');
var num2 = document.querySelector('input[name="num2"]');
var oprator = document.querySelector('select[name="oprator"]');
var result = document.querySelector('input[name="result"]');
// 绑定点击效果
calc.onclick = function(){
console.log("开始计算", `${num1.value}${oprator.value}${num2.value}=`);
if(oprator.value === "+"){
// 加法运算
result.value = parseFloat(num1.value) + parseFloat(num2.value);
}else if(oprator.value === "-"){
// 减法运算
result.value = num1.value - num2.value;
}else if(oprator.value === "*"){
// 乘法运算
result.value = num1.value * num2.value;
}else if(oprator.value === "/"){
// 除法运算
result.value = num1.value / num2.value;
}else if(oprator.value === "%"){
// 取模运算
result.value = num1.value % num2.value;
}else if(oprator.value === "**"){
// 幂运算
result.value = num1.value ** num2.value;
}
}
</script>
</body>
</html>
【2】赋值运算符
| 运算符 |
描述 |
例子： |
= |
把右边的数据赋值给左边的变量 |
a = 29; |
+= |
在变量原有数据的基础上，加上/拼接右边的值，赋值给左边的变量 |
a +=1; 相当于 a=a+1 |
-= |
在变量原有数值的基础上，减去右边的值，赋值给左边的变量 |
a -=1; 相当于 a=a-1 |
*= |
在变量原有数值的基础上，乘以右边的值，赋值给左边的变量 |
a *=2; 相当于 a=a*2 |
/= |
在变量原有数值的基础上，除以右边的值，赋值给左边的变量 |
a /= 3; 相当于 a=a/3; |
%= |
在变量原有数值的基础上，除以右边的值，取余数，赋值给左边的变量 |
a %= 3; 相当于 a=a%3; |
**= |
在变量原有数值的基础上，对右边的值进行幂运算，赋值给左边的变量 |
a **= 3; 相当于 a=a**3; |
++ |
在变量原有数值的基础上，+1，赋值给左边的变量 |
++使用的对象必须是变量，不能是字面量 |
-- |
在变量原有数值的基础上，-1，赋值给左边的变量 |
--使用的对象必须是变量，不能是字面量 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/*
= 把右边的数据赋值给左边的变量
*/
// var age = 17;
// console.log(age);
// age =18;
// console.log(age);
/*
+= 在变量原有数据的基础上，加上/拼接右边的值，赋值给左边的变量
*/
// var num1 = 10;
// num1 += 2;
// // num1 = num1 + 2; // 表达式遇到=号时，会先运行=号右边的代码
// console.log(num1)
/*
自增运算符
++ 在变量原有数值的基础上，+1，赋值给当前变量
*/
var num2 = 10;
console.log(++num2); // 11，++写在变量左边，前自增，先进行变量+1，然后运行当前一句代码
var num3 = 10;
console.log(num3++); // 10，++写在变量右边，后自增，先运行当前一句代码，运行完以后，才进行变量+1
console.log(num3); // 11
/*
自减运算符
-- 在变量原有数值的基础上，-1，赋值给当前变量
*/
var num4 = 10;
console.log(--num4); // 9，--写在变量左边，前自减，先进行变量-1，然后运行当前一句代码
var num5 = 10;
console.log(num5--); // 10，--写在变量右边，后自减，先运行当前一句代码，运行完以后，才进行变量-1
console.log(num5); // 9
// 以下代码会报错！！
// console.log(++3);
</script>
</body>
</html>
【3】比较运算符
| 运算符 |
描述 |
| == |
判断左右两边数据的值是否相等，类型不一样也没关系 |
=== |
判断左右两边数据的值是否相等并类型是否同时也一致，也叫全等 |
> |
判断左边的值是否大于右边的值 |
>= |
判断左边的值是否大于等于右边的值 |
< |
判断左边的值是否小于等于右边的值 |
<= |
判断左边的值是否小于等于右边的值 |
!= |
判断左右两边的值是否不相等 |
!== |
判断左右两边的值是否不相等或者类型不一样，不全等 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/**
* == 判断两边的变量的值是否相等，不判断数据类型
*/
var num1 = 1;
var num2 = 2;
var num3 = true;
var num4 = "1"
var num5 = 0;
var num6 = "0"
console.log(num1 == num2); // false
console.log(num3 == num1); // true
console.log(num4 == num1); // true
console.log(num5 == num6); // true
console.log(num5 == false); // true
// 很神奇，num6转换成布尔值，是true，而num6与true直接判断，结果不等
console.log(num6 == true); // false
console.log(Boolean(num6)); // true
console.log("" == false); // true
console.log("" == undefined); // false
console.log(false == undefined); // false
/**
* === 判断两边的值是否相等并且数据类型是否一样。
*/
console.log("10" == 10); // true
console.log("10" === 10); // false
/**
* !== 不全等，只要两边的值不同或者类型不一样则返回true
*/
console.log("10" != 10); // false
console.log("10" !== 10); // true
</script>
</body>
</html>
【4】逻辑运算符
| 运算符 |
描述 |
| && |
and，且，并且 左边为假，拿左边，左边为真，拿右边。 |
| || |
or，或，或者 左边为真拿左边，左边为假拿右边。 |
| ! |
not ，非，取反 非真既假，非假既真 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/**
* 真且真，返回真 [不管任何内容，都是返回后面的，短路现象]
* 真且假，返回假 [不管任何内容，都是返回后面的，短路现象]
* 假且真，返回假 [不管后面是任何内容，直接不执行，返回左边条件结果]
* 真或假，返回真 [不管后面是任何内容，直接不执行，返回左边条件结果]
* 假或真，返回真 [不管任何内容，都是返回后面的，短路现象]
* 假或假，返回假 [不管任何内容，都是返回后面的，短路现象]
* 非真即假，非假即真
*/
console.log( true && true ) // true
console.log( 1 == 1 && 2 == 2 ) // true
console.log( 1 && 2 ) // 2
console.log( true && false ) // false
console.log( true && 2 ) // 2
console.log( 1 && 0 ) // 0
console.log( true || false ) // true
console.log( 1 || 0 ) // 1
console.log( false || false ) // false
console.log( 0 || '结果' ) // '结果'
console.log( !true ) // false
console.log( !100 ) // false
console.log( !false ) // true
console.log( !'' ) // true
// 语句短路了，根据判断status的布尔值，判断是否要计算赋值
var age = 17
var status = ""; // 此处除了""可以当成false使用，其他的false，0，null,undefined都不能被当成false使用，隐式转换带来的不好影响
var ret1 = status || (age=3);
console.log(ret1, `age=${age}`);
</script>
</body>
</html>
【5】三元运算符
| 运算符 |
描述 |
| 条件?true:false |
根据条件的结果判断，条件结果为true，则返回冒号左边的结果，否则返回冒号右边的结果 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/**
* 条件?true:false
*/
var age = 21;
var ret = age >= 18?"成年人":"未成年人";
console.log(ret);
/**
// python中的三元表达式
age = 18
ret = "成年人" if age >= 18 else "未成年人"
print(ret)
*/
</script>
</body>
</html>
【6】运算符的优先级
浙公网安备 33010602011771号