關系運算符
-
為什么要學習關系運算符?
- 默認情況下，我們在程序中寫的每一句正確代碼都會被執行。但很多時候，我們想在某個條件成立的情況下才執行某一段代碼
- 這種情況的話可以使用條件語句來完成，但是學習條件語句之前，我們先來看一些更基礎的知識：如何判斷一個條件成不成立。
-
JavaScript中的真假性
- 在JavaScript中，條件成立稱為“真”，條件不成立稱為“假”，因此，判斷條件是否成立就是判斷條件的“真假”。
- 在JavaScript已經給我們定義好了一個Boolean類型的值, 取值是true和false, true代表真, false代表假
- 而接下來我們要學習的關系運算符它的返回值正好就是Boolean類型的值, 也就是說關系運算符的返回值要么是true,要么是false
-
關系運算符
- 在程序中經常需要比較兩個量的大小關系,以決定程序下一步的工作。比較兩個量的運算符稱為關系運算符。
| 序號 | 運算符 | 結合性 | |
|---|---|---|---|
| 1 | > | 大于 | 左結合 |
| 2 | < | 小于 | 左結合 |
| 3 | >= | 大于等于 | 左結合 |
| 4 | <= | 小于等于 | 左結合 |
| 5 | == | 判斷值是否相等 | 左結合 |
| 6 | != | 判斷值是否不相等 | 左結合 |
| 7 | === | 判斷值和類型是否相等 | 左結合 |
| 8 | !== | 判斷值和類型是否不相等 | 左結合 |
- 簡單示例
var a, b;
a = 10;
b = 10;
console.log(a > b); // false
console.log(a < b); // false
console.log(a >= b); // true
console.log(a <= b); // true
console.log(a == b); // true
console.log(a != b); // false
-
特殊示例
-
對于非數值進行比較時，會將其轉換為數字然后在比較
console.log(1 > true); //false console.log(1 >= false); //true console.log(1 > "0"); //true console.log(1 > null); //true 如果符號兩側的值都是字符串時，不會將其轉換為數字進行比較, 而會分別比較字符串中字符的Unicode編碼
-
// a的Unicode編碼是:0061 // b的Unicode編碼是:0062 console.log("a" < "b");//true // 比較多位時則是從前往后一位一位比較 // 第一位相同比較第二位, 直到比較到不一樣或者結束為止 // c的Unicode編碼是:0063 console.log("ab" < "ac");//true -
null、undefined 、NaN比較
console.log(null == 0); // false console.log(undefined == 0); // false // 永遠不要判斷兩個NaN是否相等 console.log(NaN == NaN); // false /* * 可以通過isNaN()函數來判斷一個值是否是NaN * 如果該值是NaN則返回true，否則返回false */ var num = NaN; console.log(isNaN(num)); // true // undefined 衍生自 null, 所以返回true console.log(null == undefined); // true; console.log(null === undefined); // false; // == 判斷值是否相等 // == 會進行數據類型轉換 console.log("123" == 123); // true // === 判斷值和類型時候同時相等 // === 不會進行數據類型轉換 console.log("123" === 123); // false
-
-Tips: 利用Unicode編碼可以在控制臺和網頁中輸出一些牛逼的符號
// 在控制臺中直接使用Unicode編碼即可 console.log("\u2764"); // ? // 在網頁中需要以&#開頭, 然后將十六進制2764轉換為十進制 <div>❤</div>
邏輯運算符
- 為什么要學習邏輯運算符?
有時候，我們需要在多個條件同時成立的時候才能執行某段代碼
比如：用戶只有同時輸入了QQ和密碼，才能執行登錄代碼，如果只輸入了QQ或者只輸入了密碼，就不能執行登錄代碼。這種情況下，我們就要借助于JavaScript提供的邏輯運算符。
-
JavaScript中提供了三種邏輯運算符:
&&(與運算) ||(或運算) !(非運算)
邏輯與
格式: 條件A && 條件B
-
運算結果:
- 只有當條件A和條件B都成立時，結果才為true；其余情況的結果都為false。因此，條件A或條件B只要有一個不成立，結果都為false
- 口訣:一假則假
-
邏輯與運算過程
總是先判斷條件A是否成立
如果條件A成立，接著再判斷條件B是否成立：如果條件B成立，“條件A && 條件B”的結果就為true，如果條件B不成立，結果就為false
-
如果條件A不成立，就不會再去判斷條件B是否成立：因為條件A已經不成立了，不管條件B如何結果肯定是false
//如果兩個值都是true則返回true var result = true && true; //只要有一個false，就返回false result = true && false; result = false && true; result = false && false;
-
邏輯與短路現象
//第一個值為true，會檢查第二個值 true && alert("這哥們來了！！"); //第一個值為false，不會檢查第二個值 false && alert("這哥們不會來了！！"); -
注意點:
對于非Boolean類型的數值, 邏輯與會將其悄悄咪咪轉換為Boolean類型來判斷
如果條件A不成立, 則返回條件A的數值本身
-
如果條件A成立, 不管條件B成不成立都返回條件B數值本身
var result = "123" && "abc"; console.log(result); // "abc" result = "123" && 0; console.log(result); // 0 result = null && 0; console.log(result); // null
邏輯或
格式: 條件A || 條件B
-
運算結果:
- 當條件A或條件B只要有一個成立時（也包括條件A和條件B都成立），結果就為true；只有當條件A和條件B都不成立時，結果才為false
- 口訣:一真為真
-
邏輯或運算過程
總是先判斷條件A是否成立
如果條件A成立，就不會再去判斷條件B是否成立：因為條件A已經成立了，不管條件B如何結果肯定是1，也就是true
-
如果條件A不成立，接著再判斷條件B是否成立：如果條件B成立，“條件A || 條件B”的結果就為true，如果條件B不成立，結果就為false
//兩個都是false，則返回false var result = false || false; //只有有一個true，就返回true result = true || false; result = false || true ; result = true || true ;
-
邏輯或短路現象
//第一個值為false，則會檢查第二個值 false || alert("123"); //第一個值為true，則不再檢查第二個值 true || alert("123"); -
注意點:
對于非Boolean類型的數值, 邏輯與會將其悄悄咪咪轉換為Boolean類型來判斷
如果條件A不成立, 則不管條件B成不成立都返回條件B數值本身
-
如果條件A成立, 則返回條件A的數值本身
var result = null || 0; console.log(result); // 0 result = "123" || "abc"; console.log(result); // "123" result = "123" || 0; console.log(result); // "123"
邏輯非
格式: ! 條件A
-
運算結果:
其實就是對條件A進行取反：若條件A成立，結果就為false；若條件A不成立，結果就為true。也就是說：真的變假，假的變真。
-
口訣:真變假,假變真
var bool1 = true; var res1 = !bool1; console.log(res1); // false var bool2 = false; var res2 = !bool2; console.log(res2); // true
-
注意點:
-
對一個值進行兩次取反，它不會變化
var bool = true; var res = !!bool; console.log(res); // true -
對非布爾值進行元素，則會將其轉換為布爾值，然后再取反
var num = 10; var res = !num; // 先將10轉換為true, 然后再取反 console.log(res); // false 所以, 要想將其它類型轉換為Number類型除了Boolean()函數, 還可以使用
!!數值;值得注意的是
!!數值;的形式,實現原理和Boolean()函數一樣
-
