詳解基礎類型在比較時隱式類型轉換

比較運算符與隱式類型轉換

前言

• 對於廣大學習js的同學來講，學習js的難點之一就是js強大的類型轉換，js不僅提供了方法使得基礎數據類型之間可以相互轉換，而且js還會在某些情況下自己轉換數據類型這種行為稱為自動類型轉換或者隱式類型轉換。
• 自動轉換的情況如下（以下只是幾種場景情景，不代表所有場景）：
  • isNaN(數據) 會先將數據轉換成數值類型 在執行isNaN方法
  • 數學運算
  • 比較運算
  • 邏輯運算
• 在這上面幾種情況中，比較運算的情況最為復雜，接下來就為大家講解比較運算符自動類型轉換的規則

基礎概念

• 比較運算符的種類
  • > < >= <= == != === !==
• 比較運算之后的結果
  • true
  • false
• 轉布爾類型的情況
  • 0 NaN 空字符串 undefined null 會轉換成 false
  • 其他任何類型轉換成true

比較運算的自動類型轉換

• > < >= <=大小比較
  • 以上比較會發生兩種情況
    1. 兩個比較的數據都是字符串 不會自動類型轉換 此時遵循字符串比較規則，每一位相比，如果有字母按照ascii表值相比

           // 會將每一位相比有一位是得出結果就得到最終結果
           // 1比2小所以結果為false
           console.log('11' > '2') // false
           // 如果有字母相比
           // a的acsii碼表值為97 b為98 所以結果是true
           console.log('a1'<'b1') // true
       

    2. 兩個比較的數據不全是字符串 此時會將數據先自動轉換成number，再比較
       • 自動轉number采用的是Number方法
         • string轉number
           • 純數字轉number相當於直接去掉引號轉類型 比如 '123' -> 123
           • 非純數字轉換的結果是NaN '123abc' -> NaN
         • boolean轉number
           • true --> 1
           • false --> 0
         • undefined轉number結果為 NaN
         • null轉number結果為 0
       • 注： NaN和任何數比較的結果都是false

           // 右側為數值 先執行轉數值  '11'-->11  11>2
           console.log('11' > 2) // true
           // 同樣轉數值  '11a' --> NaN  NaN和任何數比較結果都是false
           console.log('11a' > 2) // false
           console.log('11a' < 2) // false
           // '11' --> 11  true-->1   11>1
           console.log('11' > true) // true
           console.log(true > false) //true
           // undefined-->NaN  null-->0   NaN和任何數比較結果都是false
           console.log(undefined>null) //false
           console.log(undefined<null) //false
       

• == === != !==相等比較
  • == !=比較
    • 字符串和布爾值都會先轉換成數值類型比較

          // 以下幾種情況都會先將字符串和布爾值轉換成數值 在比較值相等
          console.log('11' == 2) // false
          console.log(true == '1') // true
          console.log(false == '0') // true
          console.log(true == 1) // true
          console.log(false == 0) // true
      

    • NaN和任何數比較的結果都是false包括自身
    • undefined和null不會自動類型轉換

          // 如果此時發生轉換結果會為true但並沒有
          console.log(null == 0) // false
          console.log(undefined == NaN) // false
          // 可以理解為他們的值都為空 值相等
          console.log(undefined == null) // true
      

  • === !==比較
    • 不會轉換類型，因為這個會關注類型相等和值相等，轉換類型那就沒得玩了,不會自動類型轉換
    • undefined === null結果為false

結語

• 以上所有的比較都是只考慮基礎類型比較，也是常見的比較，暫未考慮復雜數據類型，如果考慮不到，歡迎大家指正！