一文看懂Js隐式转换

隐式转换介绍:

什么玩意

在js中，当运算符在运算时，如果两边数据不统一，CPU就无法计算，这时我们编译器会自动将运算符两边的数据做一个数据类型转换，转成一样的数据类型再计算!

隐式转换规则:

1.转成string类型:+(字符串连接符)

2.转成number类型:++/--(自增自减运算符)+ - * %(算术运算符)> >= < <= != == === !==(关系运算符)

3.转成boolean类型:!(逻辑非运算符)

(一)字符串运算符跟算术运算符隐式转换规则混淆

  console.log(1+"true")     //'1true'
  //+是字符串连接符:String(1)+true = '1true'
  console.log(1+true)       //2
  //+是算术运算符:1+Number(true) = 1+1 =2
  console.log(1+undefined)  //NaN
  //+是算术运算符:1+Number(undefined) = 1+NaN
  console.log(1+null)       //1
  //+是算术运算符:1+Number(null) = 1+0 =1

(二)关系运算符

  console.log(1+"true")     //'1true'
  //+是字符串连接符:String(1)+true = '1true'
  console.log(1+true)       //2
  //+是算术运算符:1+Number(true) = 1+1 =2
  console.log(1+undefined)  //NaN
  //+是算术运算符:1+Number(undefined) = 1+NaN
  console.log(1+null)       //1
  //+是算术运算符:1+Number(null) = 1+0 =1

(三)逻辑非隐式转换与关系运算符隐式转换搞混淆

  //空数组的toString()方法会得到空字符串,而空对象的toString()方法会得到[object Object],前后两个o大小有区别
  //1.关系运算符:将其他数据类型转换成数字
  //2.逻辑非:将其他数据类型使用Boolean()转成布尔类型
  //以下八种情况转换为布尔类型都会得到false---(0,-0,NaN,unfefined,null,'',false,document.all())

  console.log([] == 0)    //true
  //原理:[].valueOf().toString()结果为空字符串 Number('') == 0

  console.log(![] == 0)   //true
  //原理:本质是'![]'逻辑非表达式结果与 0 比较关系
  //逻辑非优先级高于关系运算符![] = false(空数组转换boolean值为true,然后取反得到false)
  //Number(false) = 0

  console.log([] == ![])  //true
  //原理:本质是[] 与 '![]'逻辑非表达式结果比较
  //(1)[].valueOf().toString() = ''
  //(2)![] =false
  //(3)NUmber('') == NUmber(false)

  console.log([] == [])   //false
  //引用类型数据存贮在堆中,比较的是存储地址,所以两者不相等

  console.log({} == {})   //false 同上

  console.log({} == !{})  //false
  //本质:{}与!{}这个逻辑非表达式作比较
  //(1){}.valueOf().toString() = '[object Object]'
  //(2)Number('[object Object]') = NaN
  //(3)Number(false) = 0

应用:

  //复杂数据类型在隐式转换时先转成String,然后在转成Number运算
  //先使用valueOf()方法获取原始值,如果原始值不是number类型,则使用toString()方法转换成string
  //再将string转成number运算

  console.log([1,2] == '1,2')           //true
  console.log({} == '[object Object]')  //true

//当a满足什么条件的时候,控制台可以输出为1

  var a = '?';
  if(a ==1 && a==2 &&a ==3){
    console.log(1)
  }

  var a = {
    i:0,
    valueOf:function(){
      return ++a.i
    }
  }

  var a = {
    i:0,
    toString:function(){
      return ++a.i
    }
  }