隱式類型轉換

隱式轉換介紹

• 在js中，當運算符在運算時，如果兩邊數據不統一，CPU就無法計算，這時我們編譯器會自動將運算符兩邊的數據做一個數據類型轉換，轉成一樣的數據類型再計算

• 這種無需程序員手動轉換，而由編譯器自動轉換的方式就稱為隱式轉換

• 例如1 > "0"這行代碼在js中並不會報錯，編譯器在運算符時會先把右邊的"0"轉成數字0`然后在比較大小

隱式轉換規則

1. 轉成string類型： +（字符串連接符）2..轉成number類型：++/--(自增自減運算符) + - * / %(算術運算符) > < >= <= == != === !=== (關系運算符)

2.  轉成boolean類型：!（邏輯非運算符）

坑一：字符串連接符與算術運算符隱式轉換規則混淆

 

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

　　原理分析

/*此類問題的坑： 將字符串連接符(+ : 只要+號兩邊有一邊是字符串)與算術運算符(+:兩邊都是數字)的隱式轉換搞混淆
  1.字符串連接符+：會把其他數據類型調用String()方法轉成字符串然后拼接
  2.算術運算符+ ：會把其他數據類型調用Number（）方法轉成數字然后做加法計算
    */

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

　　坑二：關系運算符：會把其他數據類型轉換成number之后再比較關系

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

　　原理分析

//2.1 : 當關系運算符兩邊有一邊是字符串的時候，會將其他數據類型使用Number()轉換，然后比較關系
   console.log ( "2" > 10 );//false   Number('2') > 10   =           2 > 10           =       false

   /*2.2： 當關系運算符兩邊都是字符串的時候，此時同時轉成number然后比較關系
  重點：此時並不是按照Number()的形式轉成數字，而是按照字符串對應的unicode編碼來轉成數字
  使用這個方法可以查看字符的unicode編碼： 字符串.charCodeAt(字符下標，默認為0)
    */
   console.log ( "2" > "10" );//true     '2'.charCodeAt() > '10'.charCodeAt() = 50 > 49 = true
   console.log ( "2".charCodeAt () );//數字50
   console.log ( "10".charCodeAt () );//數字49（默認返回第一個字符的編碼，如果想要查詢第二個字符可以傳參下標）

   //多個字符從左往右依次比較
   console.log ( "abc" > "b" );//false     先比較'a' 和 'b'， 'a' 與 'b'不等，則直接得出結果
   console.log ( "abc" >  "aad" );//true     先比較'a'和'a'，兩者相等，繼續比較第二個字符 'b' 與 'a' ,得出結果
   console.log ( "a".charCodeAt () );//數字97
   console.log ( "b".charCodeAt () );//數字98

   //2.3 特殊情況(無視規則)：如果數據類型是undefined與null，，得出固定的結果
   console.log ( undefined == undefined );//true
   console.log ( undefined == null );//true
   console.log ( null == null );//true
   //2.4 特殊情況（無視規則）：NaN與任何數據比較都是NaN
   console.log ( NaN == NaN );//false

　　坑三：復雜數據類型在隱式轉換時會先轉成String，然后再轉成Number運算

var a=???
if(a==1 && a==2 && a==3){
   console.log(1)
}
打印出1  a=？

　　原理分析

/*復雜數據類型轉number順序如下
  1.先使用valueOf()方法獲取其原始值，如果原始值不是number類型，則使用 toString()方法轉成string
  2.再將string轉成number運算
    */

   console.log ( [ 1,2] == '1,2' );//true     先將左邊數組轉成string，然后右邊也是string則轉成unicode編碼運算
   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]

/*分析：邏輯與運算一假則假，要想if分支語句小括號條件成立，則必須要讓a的值同時等於1 且 等於 2 且等於3
  乍看之下，好像根本不可能實現，但是復雜數據類型會先調用valueOf()方法,然后轉成number運算
  而對象的valueOf（）方法是可以重寫的
    */
   var a = {
       i : 0,//聲明一個屬性i
       valueOf:function ( ) {
           return ++a.i;//每調用一次，讓對象a的i屬性自增一次並且返回
      }
  }
   if (a == 1 && a == 2 && a == 3){//每一次運算時都會調用一次a的valueOf()方法
       console.log ( "1" );
  }

　　坑四：邏輯非隱式轉換與關系運算符隱式轉換搞混淆

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

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

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

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

　　原理分析

/*1.關系運算符：將其他數據類型轉成數字
2.邏輯非：將其他數據類型使用Boolean()轉成布爾類型
      * 以下八種情況轉換為布爾類型會得到false
          * 0 、-0、NaN、undefined、null、''(空字符串)、false、document.all()
      * 除以上八種情況之外所有數據都會得到true
  */
   
   /*原理   
  （1）[].valueOf().toString() 得到空字符串
  （2）Number('') == 0 成立
  */
   console.log ( [] == 0 );//true
   
   /* 原理 :本質是 `![]` 邏輯非表達式結果 與   0 比較關系
      (1)邏輯非優先級高於關系運算符 ![] = false (空數組轉布爾得到true，然后取反得到false)
      (2)false == 0 成立
    */
   console.log ( ! [] == 0 );//true


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

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


   console.log ( {}.valueOf ().toString () )//[object Object]
   console.log ( [].valueOf ().toString () );//'' 空字符串