js基礎筆記-類型裝換

前言

說好聽是說JS靈活， 說很差聽就是JS的坑太多， JS類型轉換就是一個大坑， JS的類型包括了原始類型的[null, undefined, String ,Number, Boolean]，以及對象類型的[function, object];

JavaScript 是一種弱類型（或稱動態類型）語言，即變量的類型是不肯定的。

x = 5; // 5
x = x + 'A'; // '5A'

上面代碼中，變量x起先是一個數值，後來是一個字符串，類型徹底由當前的值決定，這就叫弱類型。

JS的數據類型

JavaScript中有五種原始數據類型：Undefined、Null、Boolean、Number以及String。

1. Undefined數據類型的值只有一個：undefined。
   在JavaScript中，若是函數沒有聲明返回值，那麼會返回undefined。
   若是typeof後面跟一個未定義的參數，也是返回undefined。

   function undefinedA(){}
   undefinedA();//返回undefined
   typeof abc;//變量abc未聲明，返回undefined

2. Null數據類型的值只有一個：null。
   null與undefined的關係：undefined其實是從null派生出來的。其實全部的js的object對象的父對象都是null。

   undefined == null;//返回true

3. typeof是一元運算符，後跟變量的名稱，用於獲取變量的數據類型，其返回值有5個：undefined、boolean、number、string以及object。

轉換規則

1. 轉 boolean 規則：
   null, undefined, "", 0, -0, NaN 轉換成布爾值是 false， 剩下的全轉化 true;

2. 轉 number 規則：

   • string '2.3.1' => NaN;
     非數字形式的，如str,str2.3,2.3.3.3,a+3.2都將會轉換成非數字及NaN

   Number('str');//NaN
   Number('2.3.3.3');//NaN
   Number('a+1.2');//NaN
   Number('2.3');//2.3

   • null, '', false, [] => 0;
     null,空字符串，FALSE，空數組，都將會轉換成數字0（這個可能在隱式類型轉換中看到的比較多）

   Number(null);//0
   Number('');//0
   Number(false);//0
   Number([]);//0

   • undefined => NaN;
     undefined即未定義，轉換爲非數字

   Number(undefined);//NaN

   • object => x Number(object.toString())
     若是沒法從valueOf()方法中獲取Primitive值，那麼調用object的toString()方法；若是toString()返回的是Primitive值，則將該Primitive值轉換成number後返回。(Primitive這個暫時沒懂)

   Number([2]);//2
   Number([2,3]);//NaN
   Number({});//NaN

3. 隱式類型轉換 ==

   • 有布爾值則轉換爲數值

     1 == true;//true
     0 == false;//true

   • 字符串數值，則字符串轉換爲數值

     '2' == 2;//true

     根據上面兩條，能夠想到一個頗有趣的轉換，以下

     !!'2' == true;//true,bool值全轉爲數字，字符串轉數字，數字前加非規則爲，非0的都轉1

   • 只有一個是對象，則對象會調用toString() valueOf()

     "[object Object]" == {id:1};//true，這裏的對象進行調用了toString()方法
     "[object Function]" == {id:1};//false

   • null == undefined

     null == undefined;//true

   • NaN != NaN

     NaN != NaN

   • 對象==，比較內存地址

     var a = {id:1};
     var b = {id:1};
     a == b;//false,對象比較的內存地址

轉換函數

1. 強制轉換：parseInt,parseFloat,Number,String,Boolean

   下面的例子以下，以Number爲例

   Number(false);//0 
   Number(true);//   1 
   Number(undefined);//   NaN 
   Number(null);//   0 
   Number( "5.5 ");//   5.5 
   Number( "56 ");//   56 
   Number( "5.6.7 ");//   NaN 
   Number(new   Object());//   NaN 
   Number(100);//   100

2. 隱式類型轉換：==，-，+，*，if，>=，<=，while，for in，alert

   隱式類型轉換在比較以及判斷，還有作算術運算的時候比較常見

   • 比較運算

   '2' == 2;//true;
   '2' > 0;//true;

   • while,for in, alert運算

   alert(new Boolean(false));//false,轉成字符串

   • 算術運算

   '2'+1;//'21'
   1+true;//2
   '2'+true;//'2true'
   '2'-1;//1
   '210'-'10';//100
   '2'*'3';//6

參考

1. 下表做爲參考, 來自js權威指南：

   原始類型和對象類型	轉換成String	轉換成Number	轉換成Boolean	轉換成Object
   undefined	"undefined"	NaN	false	throws TypeError
   null	"null"	0	false	throws TypeError
   true	"true"	1		new Boolean(true)
   false	"false"	0		new Boolean(false)
   ""(empty string)		0	false	new String("");Object("")
   "1.2" (nonempty, numeric)		1.2	true	new String("1.2");Object("1.2")
   "one" (nonempty, non-numeric)		NaN	true	new String("one");Object("one")
   0	"0"		false	new Number(0);Object(0)
   -0	"0"		false	new Number(-0);Object(-0)
   NaN	"undefined"		false	new Number(NaN);Object(NaN)
   Infinity	"Infinity"		true	new Number(Infinity);Object(Infinity)
   -Infinity	"-Infinity"		true	new Number(-Infinity);Object(-Infinity)
   1 (finite, non-zero)	"1"		true	new Number(1);Object(1)
   {} (any object)		NaN	true
   [] (empty array)	""	0	true
   [9] (1 numeric elt)	"9"	9	true
   ['a'] (any other array)	use join() method	NaN	true
   function(){} (any function)	"undefined"	NaN	true