隱式轉(zhuǎn)換介紹

• 在js中，當(dāng)運(yùn)算符在運(yùn)算時(shí)，如果兩邊數(shù)據(jù)不統(tǒng)一，CPU就無法計(jì)算，這時(shí)我們編譯器會自動將運(yùn)算符兩邊的數(shù)據(jù)做一個(gè)數(shù)據(jù)類型轉(zhuǎn)換，轉(zhuǎn)成一樣的數(shù)據(jù)類型再計(jì)算，這種無需程序員手動轉(zhuǎn)換，而由編譯器自動轉(zhuǎn)換的方式就稱為隱式轉(zhuǎn)換。
• 例如1 > "0"這行代碼在js中并不會報(bào)錯(cuò)，編譯器在運(yùn)算符時(shí)會先把右邊的"0"轉(zhuǎn)成數(shù)字0`然后在比較大小

隱式轉(zhuǎn)換規(guī)則

• 轉(zhuǎn)成string類型： +（字符串連接符） 2..轉(zhuǎn)成number類型：++/--(自增自減運(yùn)算符) + - * / %(算術(shù)運(yùn)算符) > < >= <= == != === !=== (關(guān)系運(yùn)算符)
• 轉(zhuǎn)成boolean類型：!（邏輯非運(yùn)算符）

坑一：字符串連接符與算術(shù)運(yùn)算符隱式轉(zhuǎn)換規(guī)則混淆

常見面試題如下

console.log ( 1 + "true" );// ‘1true‘’
console.log ( 1 + true );//2
console.log ( 1 + undefined );//   NaN
console.log ( 1 + null );//1

原理分析：

• 此類問題的坑： 將字符串連接符(+ : 只要+號兩邊有一邊是字符串)與算術(shù)運(yùn)算符(+:兩邊都是數(shù)字)的隱式轉(zhuǎn)換搞混淆
• 字符串連接符+：會把其他數(shù)據(jù)類型調(diào)用String()方法轉(zhuǎn)成字符串然后拼接
• 算術(shù)運(yùn)算符+ ：會把其他數(shù)據(jù)類型調(diào)用Number（）方法轉(zhuǎn)成數(shù)字然后做加法計(jì)算

• +是字符串連接符： String(1) + 'true' = '1true'
  console.log ( 1 + "true" );//1true
• +是算術(shù)運(yùn)算符 ： 1 + Number(true) = 1 + 1 = 2
  console.log ( 1 + true );//2
• +是算術(shù)運(yùn)算符 ： 1 + Number(undefined) = 1 + NaN = NaN
  console.log ( 1 + undefined );// NaN
• +是算術(shù)運(yùn)算符 ： 1 + Number(null) = 1 + 0 = 1
  console.log ( 1 + null );//1

坑二：關(guān)系運(yùn)算符：會把其他數(shù)據(jù)類型轉(zhuǎn)換成number之后再比較關(guān)系

常見面試題如下

console.log ( "2" > 10 );//false 
console.log ( "2" > "10" );//true 
console.log ( "abc" > "b" );//false
console.log ( "abc" >  "aad" );//true 
console.log ( NaN == NaN );//false
console.log ( undefined == null );//true

原理分析

• 當(dāng)關(guān)系運(yùn)算符兩邊有一邊是字符串的時(shí)候，會將其他數(shù)據(jù)類型使用>Number()轉(zhuǎn)換，然后比較關(guān)系
  console.log ( "2" > 10 );//false Number('2') > 10 = 2 > 10 = >false

• 當(dāng)關(guān)系運(yùn)算符兩邊都是字符串的時(shí)候，此時(shí)同時(shí)轉(zhuǎn)成number，然后比較關(guān)系
  1.重點(diǎn)：此時(shí)并不是按照Number()的形式轉(zhuǎn)成數(shù)字，而是按照字符串對應(yīng)的unicode編碼來轉(zhuǎn)成數(shù)字。
  2.使用這個(gè)方法可以查看字符的unicode編碼： 字符串.charCodeAt(字符下
  標(biāo)，默認(rèn)為0)。
  console.log ( "2" > "10" );//true '2'.charCodeAt() > '10'.charCodeAt() = 50 > 49 = true
  console.log ( "2".charCodeAt () );//數(shù)字50
  console.log ( "10".charCodeAt () );//數(shù)字49（默認(rèn)返回第一個(gè)字符的編碼，如果想要查詢第二個(gè)字符可以傳參下標(biāo)）

• 多個(gè)字符從左往右依次比較
  console.log ( "abc" > "b" );//false 先比較'a' 和 'b'， 'a' 與 'b'不等，則直接>得出結(jié)果
  console.log ( "abc" > "aad" );//true 先比較'a'和'a'，兩者相等，繼續(xù)比較

• 第二個(gè)字符 'b' 與 'a' ,得出結(jié)果
  console.log ( "a".charCodeAt () );//數(shù)字97
  console.log ( "b".charCodeAt () );//數(shù)字98

• 特殊情況(無視規(guī)則)：如果數(shù)據(jù)類型是undefined與null，，得出固定的>結(jié)果
  console.log ( undefined == undefined );//true
  console.log ( undefined == null );//true
  console.log ( null == null );//true

• 特殊情況（無視規(guī)則）：NaN與任何數(shù)據(jù)比較都是NaN
  console.log ( NaN == NaN );//false

坑三：復(fù)雜數(shù)據(jù)類型在隱式轉(zhuǎn)換時(shí)會先轉(zhuǎn)成String，然后再轉(zhuǎn)成Number運(yùn)算

如何完善a，使其正確打印1

var = ???
if (a == 1 && a == 2 && a == 3)
      console.log ( "1" );
 }

原理分析：

• 復(fù)雜數(shù)據(jù)類型轉(zhuǎn)number順序如下:
  1.先使用valueOf()方法獲取其原始值，如果原始值不是number類型，則使用 toString()方法轉(zhuǎn)成string
  2.再將string轉(zhuǎn)成number運(yùn)算

  
  
  

console.log ( [ 1,2] == '1,2' );//true 先將左邊數(shù)組轉(zhuǎn)成string，然后右邊也是string則轉(zhuǎn)成unicode編碼運(yùn)算
console.log ( [ 1, 2 ].valueOf () );// [1,2]
console.log ( [ 1, 2 ].toString () );// '1,2'

var a = {};
console.log ( a == "[object Object]" );//true
console.log ( a.valueOf ().toString() );//[object Object]

• 分析：
  邏輯與運(yùn)算一假則假，要想if分支語句小括號條件成立，則必須要讓a的值同時(shí)等于1 且 等于 2 且等于3。
  乍看之下，好像根本不可能實(shí)現(xiàn)，但是復(fù)雜數(shù)據(jù)類型會先調(diào)用valueOf()方法,然后轉(zhuǎn)成number運(yùn)算。
  而對象的valueOf（）方法是可以重寫的。

  var a = {
  i : 0,//聲明一個(gè)屬性i
  valueOf:function ( ) {
  return ++a.i;//每調(diào)用一次，讓對象a的i屬性自增一次并且返回
  }
  }
  if (a == 1 && a == 2 && a == 3){//每一次運(yùn)算時(shí)都會調(diào)用一次a的valueOf()方法

   console.log ( "1" );

}

坑四：邏輯非隱式轉(zhuǎn)換與關(guān)系運(yùn)算符隱式轉(zhuǎn)換搞混淆

前方高能，請注意~

空數(shù)組的toString()方法會得到空字符串，而空對象的toString()方法會得到字符串[object Object] （注意第一個(gè)小寫o，第二個(gè)大寫O喲）

常見面試題

//大坑
console.log ( [] == 0 );//true
console.log ( ! [] == 0 );//true

//神坑
console.log ( [] == ! [] );//true
console.log ( [] == [] );//false

//史詩級坑
console.log({} == !{});//false
console.log({} == {});//false

原理分析

1.關(guān)系運(yùn)算符：將其他數(shù)據(jù)類型轉(zhuǎn)成數(shù)字
2.邏輯非：將其他數(shù)據(jù)類型使用Boolean()轉(zhuǎn)成布爾類型
* 以下八種情況轉(zhuǎn)換為布爾類型會得到false
* 0 、-0、NaN、undefined、null、''(空字符串)、false、document.all()
* 除以上八種情況之外所有數(shù)據(jù)都會得到true

原理
（1）[].valueOf().toString() 得到空字符串
（2）Number('') == 0 成立
console.log ( [] == 0 );//true

原理 :本質(zhì)是 ![] 邏輯非表達(dá)式結(jié)果 與 0 比較關(guān)系
(1)邏輯非優(yōu)先級高于關(guān)系運(yùn)算符 ![] = false (空數(shù)組轉(zhuǎn)布爾得到true，然后取反得到false)
(2)false == 0 成立
console.log ( ! [] == 0 );//true

原理 ：本質(zhì)其實(shí)是 空對象{} 與 !{} 這個(gè)邏輯非表達(dá)式結(jié)果做比較
(1) {}.valueOf().toString() 得到字符串 '[object Object]'
(2) !{} = false
(3) Number('[object Object]') == Number(false)
console.log({} == !{});//false
//引用類型數(shù)據(jù)存在堆中，棧中存儲的是地址，所以他們的結(jié)果是false
console.log({} == {});//false

原理：本質(zhì)是 空數(shù)組[] 與 ![] 這個(gè)邏輯非表達(dá)式結(jié)果做比較
(1) [].valueOf().toString() 得到空字符串 ''
(2) ![] = false
(3) Number('') == Number(false) 成立 都是0
console.log ( [] == ! [] );//true
//引用類型數(shù)據(jù)存在堆中，棧中存儲的是地址，所以他們的結(jié)果是false
console.log ( [] == [] );//false
console.log ( {}.valueOf ().toString () )//[object Object]
console.log ( [].valueOf ().toString () );//'' 空字符串