前端-JavaScript2-5——JavaScript之運算符進階
運算符(Operators,也翻譯為操作符),是發起運算的最簡單形式。
運算符的分類見仁見智,我們的課程對運算符進行如下分類:
數學運算符(Arithmetic operators)
比較運算符(Comparison operators)
邏輯運算符(Logical operators)
賦值運算符(Assignment operators)
按位運算符(Bitwise operators)
條件 (三元) 運算符(Conditional operator)
3.1 數學運算符
+ - * / % ()
■ 這裏面要知道%的意思,我們昨天已經算過很多了,不贅述。
■ 要知道計算順序,先乘除求余,然後加減,我們昨天已經算過很多了,不贅述。
■ 隱式轉換,所有帶有字符串的運算都會盡可能的轉為數字進行計算,加號比較特殊。
數學運算符的正統,是number和number的數學運算,結果是number。出於面試的考慮,有一些奇奇怪怪的數學運算:
數學運算中,只有純字符串、布爾值、null能夠幫你進行隱式轉換:
1 //隱式轉換:就是沒有寫parseInt()、parseFloat()自己幫你轉格式 2 3 console.log(3 * "8"); //24 4 console.log("3" * "8"); //24 5 console.log("48" 6 console.log("24" % 55); //24 |
1 console.log(3 * null); //0 隱式轉換的時候null將被轉為0 2 console.log(3 * false); //0 隱式轉換的時候false將被轉為0 3 console.log(3 * true); //3 隱式轉換的時候true將被轉為1 |
不純的字符串和undefined是不能幫你進行隱式轉換的,結果都是NaN
1 console.log(3 * "8天"); //NaN 數學運算中,不純的字符串沒法隱式轉換 2 console.log(3 * undefined |
加法比較特殊,因為+同時是加法和連字符的符號,所以加法在面對字符串的時候沒有隱式轉換
1 //加法沒有隱式轉換 2 console.log(3 + "8"); //38 3 console.log(3 + undefined); //NaN 4 console.log(3 + null); //3 5 console.log(3 + false); //3 6 console.log(3 + true); //4 |
總結:
無論哪種運算,只要出現了undefined參與運算,結果都是NaN。
然後"4"、false、true、null都能進行隱式轉換。
加號比較特殊,面對"4"沒有隱式轉換的
特殊數值的計算,就是NaN、Infinity參與的運算,我們看《高3》來學習。
我們就舉幾個例子:
1 Infinity + 1000 //Infinity 2 Infinity - 1000 //Infinity 3 Infinity / 1000 //Infinity 4 Infinity - Infinity //NaN 5 Infinity /Infinity //NaN 6 Infinity * Infinity //Infinity 7 0 / 0 //NaN 8 6 / 0 //Infinity 9 NaN / 8 //NaN |
//隱式轉換:就是沒有寫parseInt()、parseFloat()自己幫你轉格式 // console.log(3 * "8"); //24 // console.log("3" * "8"); //24 // console.log("48" / "2"); //24 // console.log("24" % 55); //24 // console.log(3 * null); //0 隱式轉換的時候null將被轉為0 // console.log(3 * false); //0 隱式轉換的時候false將被轉為0 // console.log(3 * true); //3 隱式轉換的時候true將被轉為1 // console.log(3 * "8天"); //NaN 數學運算中,不純的字符串沒法隱式轉換 // console.log(3 * undefined); //NaN 數學運算中,undefined不能進行隱式轉換 // //加法沒有隱式轉換 console.log(3 + "8"); //38 console.log(3 + undefined); //NaN console.log(3 + null); //3 console.log(3 + false); //3 console.log(3 + true); //4
3.2 關系運算符
> 大於
< 小於
>= 大於等於
<= 小於等於
== 等於
!= 不等於
=== 全等於
!== 不全等
關系運算符的正統,number和number進行數學運算,得到的答案boolean。
1 console.log(8 > 5); 2 console.log(7 < 4); |
關系運算的結果,是boolean類型的。
true和false叫做布爾值。boolean類型,boolean類型只有兩個值,就是true和false。表示真、假。
== 我們叫做“相等判斷”,它會幫你進行一個隱式轉換,盡可能的得到true的答案:
1 console.log(5 == "5"); //true |
===我們叫做“全等判斷”,不僅僅比較數值是否相等,還比較類型是否相等
!= 是==的反面,如果==運算是true,那麽!=就是false
!==是===的反面,如果===運算是true,那麽!==就是false
1 console.log(5 != "5"); //false , 腦子要反著想一下,5=="5"結果是t,所以就是f 2 console.log(5 !== "5"); //true , 腦子要反著想一下,5==="5"結果是f,所以就是t |
正統的運算講完了,number和number進行關系運算,結果是boolean。
現在我們講一丟丟不正統的關系運算,為了面試,劃一下重點,更多的自己通過《高三》P50、P51、P52:
① string 和 string 也能夠進行關系運算,比較的就是字符編碼順序。
字符編碼順序,就是數字、大寫字母、小寫字母
1 "a" < "b" //true 2 "A" < "B" //true 3 "A" < "a" // true ,大寫字母在字符集裏面是在小寫字母前面 4 "1" < "A" //true ,數字在字母前端 5 "blank" < "blue" //true 因為一位一位比,直到比出大小 6 "25678" < "3" //true 因為是string和string比,比的是字符編碼順序 |
② 與數字進行關系運算時,純數字字符串被轉為數字,null轉換為0,true轉換轉為1, false轉換為0
null不能進行和0的相等判定
1 null < 0.00001 //true 2 null > -0.0001 //true 3 null == 0 //false 具體原因,我們後面講解Object的時候介紹 4 false == 0 //true 5 true == 1 //true |
③ NaN不等於自己,不全等於自己
1 NaN == NaN //false 2 NaN === NaN //false 3 NaN != NaN //true 4 NaN !== NaN //true |
④ string 和 number比,string會被隱式轉換為number
1 "25" < 3 //false |
需要註意的是,我們已經了解了一些不正統的運算,所以不要出洋相,不能連續使用關系運算符!!
比如我們想驗證3大於2,2大於1:
表達式:
1 3 > 2 > 1 |
的值是多少?
解:原式=(3>2) >1 = true > 1 = false (因為true會被當做1來與1進行比較)
也就是說,不能連續使用關系運算符!!因為一旦連續使用了,實際上還是從左至右計算,所以就有上一步的boolean參與了下一步的運算。
劇透一下,如果想要使用連續關系運算,1<2 && 2<3
// console.log(8 > 5); //true // console.log(7 < 4); //false // console.log(9 >= 8); //true // console.log(9 >= 9); //true // console.log(5 <= 9); //true // console.log(5 <= 5); //true // console.log(5 <= 4); //false //==表示相等,會幫你進行隱式轉換 // console.log(5 == 8); //false // console.log(5 == 5); //true // console.log(5 == "5"); //true // console.log("5" == 5); //true //===表示全等,不僅僅比較數值是否相等,還比較類型是否相等 // console.log(5 === 5); //true // console.log(5 === "5"); //false // console.log("5" === 5); //false // != 和 !== console.log(5 != 6); //true console.log(5 != "5"); //false , 腦子要反著想一下,5=="5"結果是t,所以就是f console.log(5 !== "5"); //true , 腦子要反著想一下,5==="5"結果是f,所以就是t
3.3 邏輯運算符
邏輯運算符就三個:
&& 邏輯與運算
|| 邏輯或運算
! 邏輯非運算
正統來說,參與邏輯運算的是boolean和boolean,得到的結果也是boolean
值按照真值表來定
&& 邏輯與,“且”
a && b |
||
a |
b |
結果 |
真 |
真 |
真 |
真 |
假 |
假 |
假 |
真 |
假 |
假 |
假 |
假 |
“都真才真”,“有假就假”。
命題1:“地球是圓的” 真的
命題2:“宋仲基很帥” 真的
命題1 且 命題2 真的
命題1:“1+1=3” 假的
命題2:“地球是方的” 假的
命題1 且 命題2 假的
1 //邏輯運算符 2 console.log(true && true); //t 3 console.log(true && false); //f 4 console.log(false && true); //f 5 console.log(false && false); //f |
|| 邏輯或,“或者”的意思
a || b |
||
a |
b |
結果 |
真 |
真 |
真 |
真 |
假 |
真 |
假 |
真 |
真 |
假 |
假 |
假 |
“有真就真”,“都假才假”
命題1: 1 + 1 = 2
命題2:“邵老師很帥”
命題1 或者 命題2 總結果是真
1 console.log(true || true); //t 2 console.log(true || false); //t 3 console.log(false || true); //t 4 console.log(false || false); //f |
!就是“邏輯非”,相反的
1 console.log(!true); //f 2 console.log(!false); //t 3 console.log(!!!!!!!!!false); //t |
運算順序是非、與、或
1 true || false && !true || false; |
解:原式 = true || false && false || false
= true || false || false
= true || false
= true
邏輯運算符最最有意思的事情,就是所謂的“短路語法”。
就是你發現沒有,
如果計算一個且運算的時候,比如a && b,a如果就是一個false,那麽就不會管b是什麽,直接輸出false就行了,等於說直接輸出a。
如果計算一個且運算的時候,比如 a && b ,a如果就是一個true,那麽也不用管b是什麽,直接把b當做結果輸出就行了。
也就是說,本質上計算機進行a&&b運算的時候,不是在進行邏輯分析,這小子就想著要麽扔a,要麽扔b。如果a是負性的,那麽直接扔出a;如果a是正性的,直接扔出b。
—— 短路語法。 要麽a被短路,要麽b被短路。
負性的:false,null, 0, NaN, 空字符串(""),undefined
正性的:除了上面的,全是正性的。
1 false && 8 //false 因為計算機發現,且運算a已經是false了,直接輸出false 2 null && 8 //null 因為計算機發現,且運算a已經是false性的了,直接扔出來null 3 true && 13 //13 因為計算機發現,且運算a是true,所以總結果就是看b,直接扔出b 4 12 && 13 //13 因為計算機發現,12當做true,所以總結果看b,直接扔出b 5 13 && 12 //12 因為計算機發現,13當做true,所以總結果看b,直接扔出b 6 undefined && 哈哈 //undefined 不報錯,因為a已經是負性的了,所以直接扔出a,哈哈不管 7 哈哈 && undefined //報錯 8 true && NaN //NaN 扔後面 |
|| 邏輯或的短路也是類似的,a||b
計算機發現a是真,那麽扔a;如果a是假,那麽扔b
1 0 || 18 //18 前面假,扔後面 2 18 || 0 //18 前面真,扔前面 3 undefined || NaN //NaN 前面假,扔後面 4 NaN || undefined //undefined 前面假,扔後面 |
1 88 || 99 && 66 || 55 |
解:原式 = 88 || 66 || 55
= 88 || 55
= 88
1 undefined && ("3" != 3) || NaN && null |
解: 原式 = undefined && false || NaN && null
= undefined || NaN && null
= undefined || NaN
= NaN
總結一下短路語法:
a&&b, 計算機要麽執行a要麽執行b。a真執行b,a假執行a;
a||b, 計算機要麽執行a要麽執行b。a真執行a,a假執行b。
千萬不要背,從真值表中自己推倒。
console.log(true && true); //t console.log(true && false); //f console.log(false && true); //f console.log(false && false); //f console.log(true || true); //t console.log(true || false); //t console.log(false || true); //t console.log(false || false); //f console.log(!true); //f console.log(!false); //t console.log(!!!!!!!!!false); //t 運算順序是非、與、或 var a = true || false && !true || false; console.log(a);
3.4 賦值運算符
= 賦值
+= 簡便寫法
-= 簡便寫法
*= 簡便寫法
/= 簡便寫法
%= 簡便寫法
++
--
賦值運算的參與者,一定是變量。
1 var a = 1; 2 a += 2; //這行語句等價於a = a + 2; 3 console.log(a); //3 |
1 var b = 6; 2 b /= 3; //等價於b = b / 3 3 console.log(b); //2 |
1 var c = 100; 2 c %= 10; //等價於c = c % 10; 3 console.log(c); //0 |
1 var a = "我"; 2 a += "愛"; 3 a += "你"; 4 console.log(a); |
++運算符:
1 var e = 10; 2 e++; //等價於e=e+1 3 console.log(e); //11 |
++可以與輸出語句寫在一起,++寫在變量前和寫在變量後不是一個意思
a++ : 先用a的原值,然後a加1;
++a :先給a加1,然後用a的新值
1 var f = 10; 2 console.log(f++); //10 ,先引用原值,然後加1 |
等價於:
1 //等價於 2 var f= 10; 3 console.log(f); //先輸出f 4 f++; //然後f加1 |
1 var g = 10; 2 console.log(++g); //11 , 這次是先加1,然後輸出 |
++有花式玩兒法,僅面試有用:
1 var a = 8; 2 console.log(4 + a++); //12 , 先使用原來的a的值,就是4+8,輸出12.然後a加1 3 console.log(a); //9 |
1 var i = 9; 2 console.log(++i % 5); //0 , 先把i加1,然後使用i,10%5=0 3 console.log(i); //10 |
運算符的計算順序:
++ -- !貼身的 →→→ 數學 →→→ 比較 →→→ 邏輯 →→→賦值
1 var a = 3 < 6 && 7 < 14; //true |
原式 = true && true
= true
1 var a = 1 + 2 < 3 + 3 && 3 + 4 < 2 * 7; |
原式 = 3 < 6 && 7 < 14
= 上一題
= true
1 var a = false + true && 13; |
原式 = 0 + 1 && 13
= 1 && 13
= 13
1 var a = 15; 1 false + a++ + true > 8 && 13 || 6 |
原式 = false + 15 + true > 8 && 13 || 6
= 16 > 8 && 13 || 6
= true && 13 || 6
= 13 || 6
= 13
用戶輸入一個數字,告訴用戶是否已經成年
//第1步,用戶輸入一個年齡 var age = parseInt(prompt("請輸入你的年齡")); //第2步輸出 // (age >= 18) && alert("你已經成年了!!"); // (age < 18) && alert("你沒有成年啊!!!"); // 也可以這麽寫,程序是對的: (age < 18) || alert("你已經成年了"); (age >= 18) || alert("你沒有成年啊!!");
賦值運算符
// var a = 1; // a += 2; //這行語句等價於a = a + 2; // console.log(a); //3 // var b = 6; // b /= 3; //等價於b = b / 3 // console.log(b); //2 // var c = 100; // c %= 10; //等價於c = c % 10; // console.log(c); //0 // var d = "我"; // d += "愛"; // d += "你"; // console.log(d); // var e = 10; // e++; //等價於e=e+1 // console.log(e); //11 // var f = 10; // console.log(f++); //10 // //等價於 // var f= 10; // console.log(f); // f++; // var g = 10; // console.log(++g); //11 // //等價於 // var g = 10; // g++; // console.log(g); // var h = 8; // console.log(4 + h++); // console.log(h); // var i = 9; // console.log(++i % 5); //0 , 先把i加1,然後使用i,10%5=0 // console.log(i); //10
綜合運算符
// var a = 3 < 6 && 7 < 14; //true // console.log(a); // var a = 1 + 2 < 3 + 3 && 3 + 4 < 2 * 7; //true // console.log(a); var a = false + true && 13; console.log(a);
前端-JavaScript2-5——JavaScript之運算符進階