前端筆記54——運算子
阿新 • • 發佈：2019-01-05
運算子分類
- 算術運算子
- 關係運算符
- 邏輯運算子
- 條件運算子
- 賦值運算子
算術運算子
算術運算子用於執行變數與/或值之間的算術運算。
加減乘除就不用說了，後面的%(取餘)、++(累加)、–(遞減)需要單獨舉個例子。
%(取餘)的例子
在輸入框中輸入一個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