IT工程師數位筆記本

亂想

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、個別函數

問答

這兩年越來越多討論關于全棧工程師的話題，而實際上所謂的全棧工程師就是早期的程序員，那時分工沒有現在這么明細，很多活都是一個人干，后來才開始分前端后端等，現在又開始所謂的全棧，你怎么看？如果你想成為一個全棧工程師，你會怎么做？