JS中數據類型轉換

JS中數據類型轉換彙總

JS中的數據類型分為
【基本數據類型】
數字 number
字元串 string
布爾 boolean
空 null
未定義 undefined
【引用數據類型】
對象 object
- 普通對象
- 數組對象 (Array)
- 正則對象 (RegExp)
- 日期對象 (Date)
- 數學函數 (Math)
...
函數 function

真實項目中，根據需求，我們往往需要把數據類型之間進行轉換

把其它數據類型轉換為number類型

1.發生的情況

• isNaN檢測的時候：當檢測的值不是數字類型,瀏覽器會自己調用Number方法把它先轉換為數字，然後再檢測是否為非有效數字

isNaN('3') =>false
  Number('3')->3
  isNaN(3)->false

isNaN('3px') =>true
  Number('3px')->NaN
  isNaN(NaN)->true

• 基於parseInt/parseFloat/Number去手動轉換為數字類型
• 數學運算：+ - * / %，但是“+”不僅僅是數學運算，還可能是字元串拼接

'3'-1 =>2
  Number('3')->3
  3-1->2

'3px'-1 =>NaN

'3px'+1 =>'3px1' 字元串拼接

var i='3';
i=i+1; =>'31'
i+=1; =>'31'
i++; =>4  i++就是單純的數學運算，已經摒棄掉字元串拼接的規則

• 在基於“==”比較的時候，有時候也會把其它值轉換為數字類型
• ...

2.轉換規律

//=>轉換的方法：Number（瀏覽器自行轉換都是基於這個方法完成的）

【把字元串轉換為數字】
只要遇到一個非有效數字字元，結果就是NaN
'' ->0
' ' ->0 空格(Space)
'\n' ->0 換行符(Enter)
'\t' ->0 製表符(Tab)


【把布爾轉換為數字】
true ->1
false ->0

【把沒有轉換為數字】
null ->0
undefined ->NaN

【把引用類型值轉換為數字】
首先都先轉換為字元串（toString），然後再轉換為數字（Number）

把其它類型值轉換為字元串

1.發生的情況

• 基於alert/confirm/prompt/document.write等方法輸出內容的時候，會把輸出的值轉換為字元串，然後再輸出

alert(1) =>'1'

• 基於“+”進行字元串拼接的時候
• 把引用類型值轉換為數字的時候，首先會轉換為字元串，然後再轉換為數字
• 給對象設置屬性名，如果不是字元串，首先轉換為字元串，然後再當做屬性存儲到對象中（對象的屬性只能是數字或者字元串）
• 手動調用toString/toFixed/join/String等方法的時候，也是為了轉換為字元串

var n=Math.PI;//=>獲取圓周率：
n.toFixed(2) =>'3.14'

var ary=[12,23,34];
ary.join('+') =>'12+23+34'

• ...

2.轉換規律

//=>調用的方法：toString

【除了對象，都是你理解的轉換結果】
1 ->'1'
NaN ->'NaN'
null ->'null'
[] ->''
[13] ->'13'
[12,23] ->'12,23'
...

【對象】
{name:'xxx'} ->'[object Object]'
{} ->'[object Object]'
不管是啥樣的普通對象，最後結果都一樣

把其它值轉換為布爾類型

1.發生的情況

• 基於!/!!/Boolean等方法轉換
• 條件判斷中的條件最後都會轉換為布爾類型
• ...

if(n){
  //=>把n的值轉換為布爾驗證條件真假
}

if('3px'+3){
  //=>先計算表達式的結果'3px3'，把結果轉換為布爾true，條件成立
}

2.轉換的規律
只有“0/NaN/''/null/undefined”五個值轉換為布爾的false,其餘都是轉換為true

特殊情況：數學運算和字元串拼接 “+”

//=>當表達式中出現字元串，就是字元串拼接，否則就是數學運算

1+true =>2 數學運算
'1'+true =>'1true' 字元串拼接

[12]+10 =>'1210' 雖然現在沒看見字元串，但是引用類型轉換為數字，首先會轉換為字元串，所以變為了字元串拼接
({})+10 =>"[object Object]10"
[]+10 =>"10"

{}+10 =>10 這個和以上說的沒有半毛錢關係，因為它根本就不是數學運算，也不是字元串拼接，它是兩部分代碼
  {} 代表一個代碼塊（塊級作用域）
  +10 才是我們的操作
  嚴格寫法：{}; +10;

思考題：

12+true+false+null+undefined+[]+'佳佳'+null+undefined+[]+true
=>'NaN佳佳nullundefinedtrue'

12+true ->13
13+false ->13
13+null ->13
13+undefined ->NaN
NaN+[] ->'NaN'
'NaN'+'佳佳' ->'NaN佳佳'
...
'NaN佳佳rueundefined'
'NaN佳佳trueundefined'+[] ->'NaN佳佳trueundefined'
...
=>'NaN佳佳trueundefinedtrue'

特殊情況：“==”在進行比較的時候，如果左右兩邊的數據類型不一樣，則先轉換為相同的類型，再進行比較

對象==對象：不一定相等，因為對象操作的是引用地址，地址不相同則不相等

{name:'xxx'}=={name:'xxx'} =>false
[]==[] =>false

var obj1={};
var obj2=obj1;
obj1==obj2 =>true

==========================>上面是重點強調的

對象==數字：把對象轉換為數字
對象==布爾：把對象轉換為數字，把布爾也轉換為數字
對象==字元串：把對象轉換為數字，把字元串也轉換為數字
字元串==數字：字元串轉換為數字
字元串==布爾：都轉換為數字
布爾==數字：把布爾轉換為數字
===========================>不同情況的比較，都是把其它值轉換為數字，然後再進行比較的

null==undefined：true
null===undefined：false
null&&undefined和其它值都不相等

NaN==NaN：false
NaN和誰都不相等包括自己
===========================>以上需要特殊記憶

1==true =>true
1==false =>false
2==true =>false  規律不要混淆，這裡是把true變為數字1   //未掌握


[]==true：false  都轉換為數字 0==1
![]==true：false

[]==false：true  都轉換為數字 0==0
![]==false：true  先算![]，把數組轉換為布爾取反=>false  =>false==false