07-JavaScript基礎-關系運算符和邏輯運算符

關系運算符

  • 為什么要學習關系運算符?

    • 默認情況下,我們在程序中寫的每一句正確代碼都會被執行。但很多時候,我們想在某個條件成立的情況下才執行某一段代碼
    • 這種情況的話可以使用條件語句來完成,但是學習條件語句之前,我們先來看一些更基礎的知識:如何判斷一個條件成不成立。
  • 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編碼

    • 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>&#10084</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()函數一樣

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容