美文网首页
javascript:详解数据类型隐式转换

javascript:详解数据类型隐式转换

作者: 小飞牛牛 | 来源:发表于2017-11-23 16:48 被阅读0次

    一、各种类型转换测试

    Boolean 逻辑值

    当遇到0,'',null,undefined,NaN时,转换成逻辑值false,其它的都为true

    console.log(Boolean(0)) //false
    console.log(Boolean('')) //false
    console.log(Boolean(null)) //false
    console.log(Boolean(undefined)) //false
    console.log(Boolean(NaN)) //false
    
    console.log(Boolean(1)) //true
    console.log(Boolean('11')) //true
    console.log(Boolean('dsf')) //true
    console.log(Boolean({a:'dfsf'})) //true
    console.log(Boolean({})) //true
    console.log(Boolean([1,2,3])) //true
    console.log(Boolean([])) //true
    

    Number

    当遇到'',null,[]时转换成0,数值字符串或者数组只有一个数值元素时,转换为数值。其余都是NaN(NaN其实也是一个Number类型)

    值得注意的是数组类型,['11']可以转换,[1,2,3] 却不能转换,这里可以理解成数组先转换成String类型再转成Number,因为[1,2,3] 转成字符串是'1,2,3',所以理所当然是NaN

    console.log(Number('')) //0
    console.log(Number(null)) //0
    console.log(Number([])) //0
    console.log(Number(false)) //1
    console.log(Number(true)) //1
    console.log(Number([1])) //1
    console.log(Number(['11'])) //1
    console.log(Number('11')) //11
    console.log(Number('sss11')) //NaN
    console.log(Number(NaN)) //NaN
    console.log(Number(undefined)) //NaN
    console.log(Number('dd')) //NaN
    console.log(Number({a:'fdsf'})) //NaN
    console.log(Number({})) //NaN
    console.log(Number([1,2,3])) //NaN
    

    String

    console.log(String(0)) //0
    console.log(String(null)) //null
    console.log(String([])) //
    console.log(String(1)) //1
    console.log(String(undefined)) //undefined
    
    console.log(String(NaN)) //NaN
    console.log(String({a:'fdsf'})) //[object object]
    console.log(String({})) //[object object]
    console.log(String([1,2,3])) //1,2,3
    

    与toString()结果基本相同

    二、类型转换的发生

    1 加减运算符连接不同数据类型

    当字符串与其它类型用+连接,其它类型会转为字符串

    例如 var a=1+'11'//111
    

    其它的运算符-,*,/,%都会转换成Number类型

    console.log('12'/3) //4
    console.log('12'-3) //9
    console.log('12'*3) //36
    console.log('12'%3) //0
    
    

    2 比较运算符

    运算符>,<,>=,<=
    当这几个用于字符串比较时,应当是比较它们的字符顺序;

    比较数值时,比较的是大小,当字符串和数值比较时,会隐式转换成数值再比较

    console.log('22.12'<22.2)//true
    console.log('22.12'<'aaa')//true
    console.log(22.12>22.2)//false
    

    但是在对其它类型比较时,会出现有趣的现象,未知中间的隐式转换过程,我也总结不出规律,读者可以自己尝试

    console.log({a:'dd'}>={b:'eee'}) //true
    console.log({a:'dd'}<={b:'ddd'}) //true
    console.log({a:'dd'}>=23) //false
    console.log({a:'dd'}>='aa') //false
    console.log({0:'11'}>=[12]) //true
    console.log({0:'11'}<=[12]) //false
    console.log({a:'11'}>=[12]) //true
    

    == 等于运算符连接时,会将两头的变量转成同一个类型再比较

    console.log('11'==11)
    console.log('11'>=9)
    

    值得注意的是用==比较两个NaN时,它们并不相等,因为NaN是一个特殊的类型,NaN!=NaN

    console.log(Number('12d')==NaN) //false
    

    另外,===实质上比较的是内存地址是否相等,也不会进行类型转换

    3 逻辑运算符

    逻辑运算符有||,&&,!

    a||b 当a为false时,会继续执行b表达式;a为true时,不会再执行b表达式

    a&&b 当a为true时,会继续执行b表达式;a为false时,不会再执行b表达式

    有趣的是,在判断a时,表达式会隐式地将a转换为逻辑值,以决定是否执行b表达式,但最后逻辑运算后的返回值却是a或b原表达式的值

    !则会返回逻辑值

    var a='aaa'
    console.log(a||(function(){console.log('bbb');return 'bbb'})());
    

    4 三元运算符

    a?b:c
    在三元运算符中,判断a时,会隐式将a转为逻辑值。

    例如 var a={a:'ddd'}?'aaa':'bbb'
    

    5 if条件语句

    if括号内,默认会得到一个逻辑值,因此它会将里面的表达式隐式转换成逻辑值

    var a='';
    if(a){
        console.log('true')
    }else{
        console.log('false')
    }
    

    相关文章

      网友评论

          本文标题:javascript:详解数据类型隐式转换

          本文链接:https://www.haomeiwen.com/subject/xbizvxtx.html