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、个别函数

问答

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