JS中資料型別轉換

小山芋發表於2018-06-06
JS資料型別

一、JS中的資料型別

【六種基本資料型別】

  • 數字 number
  • 字串string
  • 布林 boolean
  • 空 null
  • 未定義undefined
  • 唯一的值 sysbol

【兩大類引用資料型別】

物件 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珠峰trueundefined'
'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
複製程式碼

相關文章