Javascript隐式转换

乱想

javascript为何须要隐式转换?若是没有会出现什么状况?

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

郁闷就是郁闷在好好的,为何要搞个隐式转换,通常来说这样去想不太可能想出个结果,毕竟这门语言不是本身写的,若是换一个问题,可能会好点,若是没有隐式转换javscript会成什么样子?前端

好比下面这一段代码:java

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默认把这种状况当成了字符串拼接。另减乘除就不存在这种问题,所以也只好将字符串转换成数字。ui

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

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

某些函数

isNaN():spa

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。

总结

大体会进行隐式转换的状况以下:

一、不一样类型的值进行运算
二、判断
三、个别函数

问答

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

相关文章
相关标签/搜索