详解基础类型在比较时隐式类型转换

比较运算符与隐式类型转换

前言

• 对于广大学习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

结语

• 以上所有的比较都是只考虑基础类型比较，也是常见的比较，暂未考虑复杂数据类型，如果考虑不到，欢迎大家指正！