zoukankan      html  css  js  c++  java
  • 每天多一点(2016.12.04)》Javascript隐式转换

    乱想

    javascript为什么需要隐式转换?如果没有会出现什么情况?

    找了一圈没有看到关于这个的讨论,只好自己研究了,可能不一定正确,自行辨知。

    郁闷就是郁闷在好好的,为什么要搞个隐式转换,一般来讲这样去想不太可能想出个结果,毕竟这门语言不是自己写的,如果换一个问题,可能会好点,如果没有隐式转换javscript会成什么样子?

    比如下面这一段代码:

    console.log("10" - 1)
    

    如果没有隐式转换,也许会报错吧?或者返回NaN?,不太确定,但假如说javascript根本不存在隐式转换,或许你不会这样去写代码吧,那么就更奇怪了,设计隐式转换究竟何目的?目前能想到的一点就是因为它是一门动态语言,值是运行时才知道的,因此有很多不确定的因素,这可能是作者设计隐式转换的目的吧。

    什么是隐式转换

    console.log(1 + "2");//12
    

    可以看到一个是Number类型的值和一个String类型的值进行了相加,结果是12。那为什么是12呢?如果是按照数字相加应该是3,但这里却是将1和2进行了字符串拼接,也就是说这里的1被转换成了字符串1。

    结论

    如果两个值(也可以是多个)的类型不同,但你却拿它们来运算,它们就会进行隐式转换,当然也不只是运算才会产生隐式转换。

    谁被转换

    console.log(10 + "2");//102
    
    console.log(10 - "2");//8
    console.log(10 * "2");//20
    console.log("2" - 10);//-8
    console.log(10 / "2");//5
    

    它们有一个小小的规律,如果是+号,数字会被转换成字符串,而如果是减乘除则会将字符串转换成数字。

    那么为什么唯独+号比较特别呢,因为在javascript中,+号是有两个作用的,一个是数字相加,另一个是字符串拼接,而javscript默认把这种情况当成了字符串拼接。另减乘除就不存在这种问题,因此也只好将字符串转换成数字。

    哪些情况下会进行隐式转换

    上面的几个例子中,都是在讲运算符导致的隐式转换,那么除了这种情况还有哪些情况下会进行隐式转换?

    某些函数

    isNaN():

    console.log(isNaN(2)) //false
    console.log(isNaN("a")) //true
    console.log(isNaN("2")) //false
    

    isNaN会将传进来的那个值进行转换如果能够转换成数字那么就是false(如果本身就是数字那么也是false),否则true。

    条件判断
    if(""){
      console.log(true); //不会被打印
    }
    if(" "){
      console.log(true); //会被打印
    }
    

    空字符串会被转换成false,否空字符串会被转换成true。

    [0,-1,[],{},NaN,undefined,null,""," "].forEach(function(item,index){
      if(item){
        console.log(item);
      }
    })
    
    // 打印的有:-1,[],{}," "
    

    也就是除,非0的数字,数组,对象,非空字符串都会被转换成true,其他的false。

    需要注意的是switch不会进行隐式转换

    switch("5"){
      case 5:
        console.log(5);
        break;
      case "5":
        console.log("5"); //打印这条
        break;
    }
    
    

    如果switch会进行隐式转换那么问题就出大了,甚至我们都不敢去使用它。那么为什么if会进行隐式转换,我的理解是,因为if它的值无非就是true跟false,而你传进来的不是这种类型,它自然需要进行转换,switch则不同,它判断的是一个值是不是和另外一个值相等,因此它不能去转换,换一句话说switch使用的是 === 比较。

    其他类型的混合运算

    相加

    console.log([]+0); //0
    
    console.log(!+0); //true
    console.log(!+1); //false
    
    console.log(NaN+2); //NaN
    console.log(NaN+"2"); //NaN2
    console.log(NaN+"a"); //NaNa
    
    console.log(undefined+0); //NaN
    console.log(undefined+"0"); //undefined0
    
    console.log(null+0); //0
    console.log(null+"0"); //null0
    
    console.log({}+0); //[object Object]0
    console.log({}+"0"); //[object Object]0
    
    console.log(""+0); //0
    console.log(""+"0"); //0
    
    console.log(true + 0); //1
    console.log(true + "0"); //true0
    
    console.log(false + 0); //0
    console.log(false + "0"); //false0
    
    
    • []》 0
    • !》 会将后面的那个值转换成布尔类型,然后取反
    • undefined 》 根据后面的那个值来进行转换,如果是数字转换成NaN,否则字符串拼接
    • {} 》 [object Object]
    • true 》 1
    • false 》 0

    其实有一个规律,除了[],{},其他的值具体转换是根据和它进行运算的那个值的类型来转换的。

    相减

    console.log([]-0); //0
    
    console.log(!-0); //true
    console.log(!-1); //false
    
    console.log(NaN-2); //NaN
    console.log(NaN-"2"); //NaN
    console.log(NaN-"a"); //NaN
    
    console.log(undefined-0); //NaN
    console.log(undefined-"0"); //NaN
    
    console.log(null-0); //0
    console.log(null-"0"); //0
    
    console.log({}-0); //NaN
    console.log({}-"0"); //NaN
    
    console.log(""-0); //0
    console.log(" "-"0"); //0
    console.log("1"-"0"); //1
    

    除了相加以为,其他的几个运算符,主要还是将这些值转换成数字进行运算,比较特殊的是!(取反),它始终转换成的是一个布尔值。

    一些有趣的事

    根据这些隐式转换,有时我们可以用它来做一些不同寻常的事,比如直接利用隐式转换来取得一个object字符串。

    console.log(({}+0).substring(1,({}+0).indexOf(" "))) //object
    

    原理因为{}+0等于 = "[object Object]0",既然它是一个字符串,那么我们可以用字符串的方法,将其中的某个值取出来,也可以用[]的方式来取值。

    也就是利用这些隐式转换你可以取得任何字符串,甚至中文,不过需要你对javascript有点基础罢了。

    console.log(String.fromCharCode(20013)) //中
    

    取中文需要你知道对应的字符串编码值

    隐式转换带来的利与弊

    好处就是,我们不需要直接显示的进行转换,比如你想将一个字符串转成数字,只需要这样:

    console.log("15"-0) //数字15
    

    传统的做法

    console.log(parseInt("15")) //数字15
    

    但也有坏处,就是有些你并不希望进行转换,但它却转换了,而往往你容易忘了它会进行隐式转换这一点,导致一些不太明显的bug。

    总结

    大致会进行隐式转换的情况如下:

    1、不同类型的值进行运算
    2、判断
    3、个别函数

    问答

    这两年越来越多讨论关于全栈工程师的话题,而实际上所谓的全栈工程师就是早期的程序员,那时分工没有现在这么明细,很多活都是一个人干,后来才开始分前端后端等,现在又开始所谓的全栈,你怎么看?如果你想成为一个全栈工程师,你会怎么做?

  • 相关阅读:
    刷题记录:[ByteCTF 2019]EZCMS
    angularJS——自定义指令
    HTML5——语音输入
    jQuery表单验证插件——jquery.validate.js
    纯CSS气泡效果
    管理Cookie的插件——jquery.cookie.js
    网页打印
    CSS hack
    如何挑选适合的前端框架(去哪儿网前端架构师司徒正美)
    让DIV水平和垂直居中的几种方法
  • 原文地址:https://www.cnblogs.com/pssp/p/6130314.html
Copyright © 2011-2022 走看看