【深入淺出】js中的隱式轉換

探索了一下隱式轉換的問題

先要知道js那些值在判斷中是錯誤

  1. 0是false,1是true
  2. false
  3. undefined
  4. null
  5. ""或者’’,就是空字符串
  6. NaN

那麼在什麼情況下會發生隱式轉換呢?

一般常出現在==、+、-、>、<這些涉及到兩個數據的比較or運算(還有其他的,麻煩評論告訴我喲,不吝賜教)

自認爲隱形轉換是指:開發者沒有對數據進行強制轉換類型,數據的類型卻發生了轉換

原始數據類型的隱式轉換,例如:

console.log(""==0);//true -> Number("")==0 -> 0===0
console.log("0"==0);//true -> Number("0")==0 ->0===0
console.log(""=="0");//false ->類型相同執行===比較值
console.log(false=="0");//true -> Number(false)== Number("0") -> 0===0
console.log(0=="false");//false ->0==NaN
基本數據類型判斷相等都是值於值
相比較的兩個值如果值的類型相同就會進行===比較,但是兩個值類型不相同,string會轉成number布爾類型也會轉換成number,最後會轉成相同數據類型後進行===比較(這些本來是我通過表現猜測出來的,後來看了ECMA規範證實了)

console.log("3"+1);//31,類型是string
console.log("3"-1);//2,類型是number
console.log("3"-"1");//2,類型是number
在js中+也是值的連接符號,所以在兩個值連接時,有一個值是string類型那麼就是連接符。如果要進行加法運算要確保兩個數值都是number類型
-*/都會把string類型轉爲number,都是作用在number類型上所以number爲主,往好了想你不用特意轉數據類型了。

對象數據類型的隱式轉換,如:

let obja={name:"lisi"};
let objb={name:"lisi"};
console.log({}=="[object Object]");//true,面對不同類型,{}.toString轉型後就是"[object Object]"根據原始類型的例子還是可以理解
console.log({}=={});//false 誒很納悶,繼續往下走
console.log(obja==objb);//false 值都一樣啊
console.log(obja===objb);//false 也不行,繼續試
console.log(obja.name==objb.name);//true 值與值是可以的
let a=obja;//接着實驗呢
console.log(a==obja);//true 這樣一下就明白了
ECMA規範也只說了有對象類型比較時,兩邊數據類型不相同會轉型,默認情況下是先valueOf然後toString。並沒有看到說兩個屬性相等的對象比較。
所以上面爲什麼a==obja是true呢,通過它的表現去想他們哪裏相同,屬性相同外還有其他的嘛???
對,調用的地址相同,內存地址相同。每一個對象都是new出來的,之後一直存在與內存中,當{}=={}時,它們所指向的應該是自己的內存地址。a就是從obja的內存地址調用的所以相同。
不知道對不對,但只有這個能說服自己了。。

如果不能說服你,就再來一個時間對象:
let timea=new Date(2019,1,1);
let timeb=new Date(2019,1,1);
console.log(timea==timeb);//false
let timec=timea;
console.log(timea==timec);//true 不知道還有什麼理由可以解釋這種表現
console.log(timea=="Fri Feb 01 2019 00:00:00 GMT+0800 (中國標準時間)");//true 這是timea.toString然後進行比較

再來看看數組的:
console.log([]==[]);//false
let arya=[1,2];
let aryb=[1,2];
let aryc=arya;
console.log(arya==aryb);//false
console.log(arya==aryc);//true 舉了三個同樣的例子只是爲了更能說服自己
console.log([]==false);//true,隱形轉換後相當於""==false -> 0===0
console.log([]==![]);//true,!可將變量轉換成boolean類型,null、undefined、NaN以及空字符串('')取反都爲true,其餘都爲false。!優先級是大於==的所以先!運算爲false,相當於false==false,false=0 => 0==0
console.log([1]=="1");//true,"1"=="1" -> "1"==="1"
console.log([1]==1);//true,"1"==1 -> 1===1

複雜數據類型,使用==判斷時,JavaScript會試圖把兩個不同類型的數值,轉爲相同類型然後進行===比較,> or < or <= or >=也是會把兩個比較值轉換成相同類型,博文寫太長不好,就不舉例子了。

下面這個例子,是我忘記改判斷條件出現的隱式轉換,也是我爲什麼要想深入瞭解隱式轉換

let ary=[1,2,3];
			let num=$.inArray(1,ary);//查找第一個參數是否存在於指定數組裏,沒有返回-1,有返回他所在的下標
			if(num!=""){//
				console.log("進來了");
			}

這個判斷從表面上來講不可能等於空,就算找不到也會返回-1,也就是說num是有值的。
按理來講是會輸出"進來了",可是並沒有,因爲1的下標爲0。隱式轉換後是0===0,所以纔有了上面那些試驗。

說一下個人對JavaScript的看法
有挺多人說JavaScript不嚴謹,很糟糕,它的表現難以理解,要避開這些令人糟糕的東西。但是我覺得這相反是js最瀟灑的地方,瞭解了它的特性,開發也會更爲快捷,就比如:

<span>8</span>
<script>
let num=document.getElementsByTagName("span")[0].innerText;
num--;
console.log(num);
</script>

這是平常沒注意到的一個操作,如果是其他語言是一定要轉number或者說int類型纔可以進行減法運算吧。js直接一個string帶上個-就會自動轉換爲number類型,何樂而不爲。瞭解了,也就可以避免出錯了。既然每個人都不一樣,語言也不用恪守成規吧。

發佈了32 篇原創文章 · 獲贊 46 · 訪問量 7247
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章