說起 js 類型轉(zhuǎn)換，都是頭疼吧，暈暈的，但是不行啊，這東西很重要滴！

基礎(chǔ)知識

JavaScript的數(shù)據(jù)類型分為六種，分別為null, undefined, boolean, string, number, object。

object是引用類型，包含數(shù)組，其它的五種是基本類型或者是原始類型(原始值)。

我們可以用typeof方法打印來某個是屬于哪個類型的。不同類型的變量比較或者運算，要先轉(zhuǎn)類型，叫做類型轉(zhuǎn)換。

注意，typeof null 返回 "object"，它是一個特殊的對象值，含義是“非對象”。實際上，我們通常認為null是自有類型的唯一成員。

一、顯式轉(zhuǎn)換

parseInt()和parseFloat() 字符串轉(zhuǎn)數(shù)字

js提供了parseInt()和parseFloat()兩個轉(zhuǎn)換函數(shù)。前者把值轉(zhuǎn)換成整數(shù)，后者把值轉(zhuǎn)換成浮點數(shù)。只有對String類型調(diào)用這些方法，這兩個函數(shù)才能正確運行；對其他類型返回的都是NaN(Not a Number)。

parseInt()：

parseInt("1234blue");   //1234 
parseInt("0xA");   //10 
parseInt("22.5");   //22 
parseInt("blue");   //NaN

parseInt()方法還有第二個參數(shù)，可以把二進制、八進制、十六進制或其他任何進制的字符串轉(zhuǎn)換成整數(shù)。所以要解析十六進制的值，需如下調(diào)用parseInt()方法：

parseInt("AF",   16);   //175 

當然，對二進制、八進制，甚至十進制（默認模式），都可以這樣調(diào)用parseInt()方法：

parseInt("10",   2);    //2 
parseInt("66",   8);    //54 
parseInt("10",   10);   //10 

parseFloat字符串轉(zhuǎn)浮點數(shù)字，沒有第二個參數(shù)。
下面是使用parseFloat()方法的示例：

parseFloat("1234blue");  //1234.0 
parseFloat("0xA");       //NaN 
parseFloat("22.5");      //22.5 
parseFloat("22.34.5");   //22.34 
parseFloat("0908");      //908 
parseFloat("blue");      //NaN

toFixed() 數(shù)字轉(zhuǎn)成字符串

根據(jù)參數(shù)保留小數(shù)點后幾位 會四舍五入，如果無參，默認為0；
例：

(66.55).toFixed();    //"67"
(66.64).toFixed(1);   //"66.6"

toExponenttial() 數(shù)字轉(zhuǎn)成字符串

根據(jù)參數(shù)保留小數(shù)點后幾位 指數(shù)形式 會四舍五入
這個我不就不舉例了，感興趣的，自己百度下把。

Number對象的 toString() 方法， 數(shù)字轉(zhuǎn)字符串

根據(jù)2 8 16 （范圍2 - 36）分別轉(zhuǎn)為二進制 八進制 十六進制字符串,，
不帶參，就默認為10， 轉(zhuǎn)十進制。
例：

(6).toString(2);     //"110"
(66).toString(8);    //"102"
(66).toString(16);   //"42"

下面三個構(gòu)造函數(shù)，當沒有使用 new 時，表示類型轉(zhuǎn)換函數(shù)，使用new 時，表示轉(zhuǎn)對象（創(chuàng)建一個對應(yīng)對象），即轉(zhuǎn)換得到的值 創(chuàng)建一個對應(yīng)的對象。

Boolean()

它會把 “真值” 轉(zhuǎn)為 true ， “假值” 轉(zhuǎn)為 false。

Boolean()方法的示例：

Boolean("");               //false   “假值”
Boolean("zdx");            //true    “真值” 
Boolean(66);               //true    “真值” 
Boolean(null);             //false   “假值”
Boolean(0);                //false   “假值”
Boolean(new Object());     //true    “真值” 

Number()

有以下規(guī)律：

1. false、null、""、[]，轉(zhuǎn)為0
2. true ， 轉(zhuǎn)1
3. 數(shù)字轉(zhuǎn)數(shù)字
4. 全是數(shù)字的字符串轉(zhuǎn)數(shù)字
5. 數(shù)組內(nèi)全是數(shù)字（不能有逗號）轉(zhuǎn)數(shù)字
6. 數(shù)組內(nèi)字符串全是數(shù)字（不能有逗號）轉(zhuǎn)數(shù)字
7. 其他都是 NaN

大栗子：

Number(false);            //0 
Number(null);             //0 
Number("");               //0 
Number([]);               //0
Number(true);             //1 
Number("66");             //66 
Number("66f");            //NaN 
Number(new Object());     //NaN 
Number([66]);             //66
Number(["66"]);           //66       
Number([6,6]);            //NaN
Number(["6f6"]);          //NaN

String()

String()可把任何值轉(zhuǎn)換成字符串。它就是調(diào)用傳進參數(shù)的 toString()方法。使用String()轉(zhuǎn)換成字符串和調(diào)用toString()方法的唯一不同之處在于，對null或undefined值轉(zhuǎn)換可以生成字符串而不引 發(fā)錯誤：

String()方法的示例：

String(null);            //"null" 

var   null   =   null; 
null.toString();        //報錯

Object()

這個函數(shù)，使用 和 不使用 new 是一樣的。

它會把原始值，根據(jù)它的類型，使用對應(yīng)的構(gòu)造函數(shù)，創(chuàng)建一個對象。null 和 undefined 和創(chuàng)建一個空對象。

Object(66);           //數(shù)字對象，等于  new Number(66)
Object("66");         //字符串對象，等于  new String("666")
Object(true);         //布爾對象， 等于  new Boolean(true)
Object(null);         //空對象，等于 new Object()
Object(undefined);    //空對象，等于 new Object()

二、隱式轉(zhuǎn)換

（一）、所有類型 轉(zhuǎn)為 布爾

JavaScript 的基礎(chǔ)類型中 有布爾類型，這個類型的值，只有兩個值---- true 和 false

任意的JavaScript 的值都可以轉(zhuǎn)換為布爾值。但只有下面這六個值會轉(zhuǎn)為false：

""
0
-0
null
undefined
NaN

其他所有值，包括所有對象（數(shù)組）都會轉(zhuǎn)換為 true。布爾值 false，和上面6個能轉(zhuǎn)為false 的值，我們一般稱為“假值”，其他值稱為“真值”。（“真值”等價true，“假值”等價false）

注意?。?！在JavaScript 中 ，任何希望使用布爾值的地方，都會將操作數(shù)當作 “真假” 或 “假值” 對待（即把“真值”當true，“假值”當false）。這句話你現(xiàn)在不懂沒事，看完下面的，或許你就懂了，哈哈。

（二）、原始值 轉(zhuǎn)為 數(shù)字

字符串 轉(zhuǎn) 數(shù)字

當字符串里，全為數(shù)字時，轉(zhuǎn)數(shù)字，其他都為NaN?？兆址娃D(zhuǎn)0

+ "666";    //666
+ "66f";    //NaN
+ "";       //0

布爾轉(zhuǎn)數(shù)字

這個比較簡單了。
true 轉(zhuǎn) 1；false 轉(zhuǎn) 0；

+ true;   //1
+ false;  //

null 轉(zhuǎn)數(shù)字

null 轉(zhuǎn) 0。

+ null;        //0

undefined 和 NaN 轉(zhuǎn)數(shù)字

undefined 和 NaN 都轉(zhuǎn) NaN。

+ undefined;   //NaN
+ NaN;         //NaN

（三）、原始值 轉(zhuǎn)為 字符串

這個也比較簡單，原始值 到 字符串，就原封不動的轉(zhuǎn)（加個雙引號）。

"zdx" + true;    //"zdxtrue"

（四）、 引用類型( 對象 )轉(zhuǎn)為 原始值

對象 轉(zhuǎn) 布爾

對象 轉(zhuǎn) 布爾 都為 true；等同于 Boolean()

![];     //false    這里取反了，注意，取反會把操作值轉(zhuǎn)布爾
!{};     //false

對象 轉(zhuǎn) 數(shù)字

對象 轉(zhuǎn) 數(shù)字 ，首先調(diào)用 valueOf()，如果返回的是原始值，再轉(zhuǎn)數(shù)字（需要的話），并返回；否則調(diào)用 toString()， 如果返回的是原始值，再轉(zhuǎn)數(shù)字，并返回;否則 拋出一個類型錯誤。

+ [];    //0
//[].valueOf();   返回數(shù)組本身[]，所以調(diào)用 [].toString(); 返回 空字符串"",""再轉(zhuǎn)數(shù)字 0；
+ (new Date());   //1526008864094
//調(diào)用  (new Date()).valueOf(); 返回1526008864094

對象 轉(zhuǎn) 字符串

對象 轉(zhuǎn) 字符串 ，跟轉(zhuǎn)數(shù)字的規(guī)則一樣。只不過是轉(zhuǎn)字符串。
首先調(diào)用 valueOf()，如果返回的是原始值，再轉(zhuǎn)字符串（需要的話），并返回；否則調(diào)用 toString()， 如果返回的是原始值，再轉(zhuǎn)字符串，并返回;否則 拋出一個類型錯誤。

"66" + [];    //"66"
"66" + {};    //"66[object Object]"

總結(jié)：對象對原始值，除了布爾類型，其他都是先調(diào)用valueOf，然后根據(jù)需要調(diào)用toString。

想知道，js 每個內(nèi)置對象的valueOf() 和 toString()方法，可以翻到最下面，附錄。

三、隱式轉(zhuǎn)換 發(fā)生的地方

隱式轉(zhuǎn)換通常發(fā)生在表達式 和 運算符 。

（1）加減乘除：

加號 +

二元運算符用法（兩個操作數(shù)）

可以對數(shù)字做加法， 也可以做字符串連接操作。
當兩個操作數(shù) 都是 數(shù)字 或 字符串時，計算是顯然的。其他情況下，有如下規(guī)則

1. 對象轉(zhuǎn)原始值，除了Date 對象 直接調(diào)用toString，其他對象，調(diào)用自身的valueOf 方法，但有的對象自身沒有valueOf，或者得到的不是原始值，此時調(diào)用toString。
2. 第一步轉(zhuǎn)換后，如果其中一個是字符串的話，另一個操作數(shù)也轉(zhuǎn)字符串，進行字符串連接。
3. 否則，都轉(zhuǎn)為數(shù)字(或者NaN),進行加法。

栗子來了：

1 + new Date();     //"1Fri May 11 2018 14:20:50 GMT+0800 (中國標準時間)"

1 + new Number(2);    //3  (new Number).valueOf(); 返回2， 和1 做加法

"66" + 6;       //666    6 轉(zhuǎn) "6"

1 + {};         //"1[object Object]"   ({}).toString()

true + false;   //1    都轉(zhuǎn)數(shù)字

1 + null;       //1    null 轉(zhuǎn)數(shù)字

1 + undefined;  //NaN   undefined 轉(zhuǎn) NaN

實際代碼中，經(jīng)常這樣

var x = 66;
x + "";     //"66"    等價于 String(x)

注意：兩點！

1. 不要把對象字面量形式的值放在前面。
2. 從左到右的進行 + 運算。

//對象字面量形式放在前面的結(jié)果比較復(fù)雜，不建議使用。（下面的結(jié)果不是唯一的）
{} + 1;     //1
{} + "1";   //1
{} + {};    //"[object Object][object Object]"
{x:1} + {};  //NaN

//從左到右，逐個做 + 運算
1 + 2 + "";    //"3"
1 + "" + 2;    //"12"

一元運算符用法（一個操作數(shù)）

把操作數(shù)轉(zhuǎn)換為 數(shù)字（或者NaN），并返回它。

+ "666";       //666   等價于 Number("666")
+ undefined;   //NaN

減號 -

都是轉(zhuǎn)數(shù)字。

- "666";    //-666
- "66f";    //NaN
1 - null;   //1

乘號 *

都是轉(zhuǎn)數(shù)字

1 * "666";     //666
1 * null;      //0

除號 /

都是轉(zhuǎn)數(shù)字

"666" / 1;     //666
1 / true;      //1

（2）比較運算符 （> < >= <=）

比較運算符用來檢測兩個操作數(shù)（數(shù)字或字符串）的大小關(guān)系（數(shù)值大小或者字符串首個字符的16位Unicode的大小 ）。

比較運算符的操作數(shù)可能是任意類型。但只有數(shù)字和字符串才能比較。因此，它會把別的操作數(shù)進行類型轉(zhuǎn)換，規(guī)則如下：

1. 對象轉(zhuǎn)原始值，如果valueOf()返回原始值，直接比較，否則，調(diào)用toString()進行轉(zhuǎn)換。
2. 轉(zhuǎn)原始值后，如果兩個操作數(shù)都是字符串，那么將按字符串首個字符的16位Unicode的大小 進行比較。
3. 否則都轉(zhuǎn)數(shù)字比較。Infinity比任何數(shù)字都大（除了自身），-Infinity 相反。如果一個操作數(shù)是NaN（或轉(zhuǎn)NaN）,結(jié)果返回false。

11 < 3;

"11" < "3";   //true    "11" 首個字符串 "1" 的16位Unicode 值比 "3"的16位Unicode 小

//"11".charCodeAt(0).toString(16) 31

//"3".charCodeAt(0).toString(16)  33

"11" < 3;     //false   "11" 轉(zhuǎn) 11，false

{} < 3;       //false   {}轉(zhuǎn)原始值字符串，字符串轉(zhuǎn)NaN， false

null < 3;     //true    null 轉(zhuǎn)數(shù)字

最后要注意的是，<= 和 >= 比較時，并不根據(jù) == 和 === 的規(guī)則（在下方）比較，它就僅僅表示 數(shù)值 或 字符串 之間的比較。

 null >= undefined    //false

（3）in運算符

把左操作數(shù)轉(zhuǎn) 字符串

in 運算符希望它的左操作數(shù)是一個字符串或可以轉(zhuǎn)換為字符串，右操作數(shù)是一個對象。如果，右側(cè)的對象擁有一個名為左側(cè)操作數(shù)值的屬性名，那么表達式返回true。

var point = { x:1, y:2};
"x" in point;    //true  point 有一個 x 的屬性名

var arr = [a,b,c];
1 in arr;        //true   數(shù)組的索引就相當于 屬性名

（4）！ 和 ??！

！ 它會把操作值 轉(zhuǎn)為 布爾值（“真值”為true，“假值”為false），對布爾值求反。（結(jié)果只有true，false）

例：

console.log(!"");           //true
console.log(!0);            //true
console.log(!-0);           //true
console.log(!null);         //true
console.log(!undefined);    //true
console.log(!NaN);          //true
console.log(!false);        //true

?。?得到操作值 等價的 布爾值（“真值”為true，“假值”為false）
等同于 Boolean()，經(jīng)常稱！！ 為強制轉(zhuǎn)換。
例：

console.log(!!"");           //false
console.log(!!0);            //false
console.log(!!-0);           //false
console.log(!!null);         //false
console.log(!!undefined);    //false
console.log(!!NaN);          //false
console.log(!!false);        //false

總結(jié)：“假值” 取反都是true， “真值”取反為false；“假值” 強制轉(zhuǎn)換 都是 false， “真值”強制轉(zhuǎn)換為 true

（5）== 和 ===

都知道 == 是判斷 左右值 是否想等的。而 === 不僅判斷 右右值是否想等，還要判斷，類型是否一樣。結(jié)果返回布爾值

== 的用法
NaN是JavaScript中唯一一個不等于任何值的（包括它自己）。(NaN == NaN) // false

一般對NaN的判斷：

function isNaN(num){
    return typeof num === "number" && num !== num;
}

注意，跟js 自帶的 isNaN 方法 不一樣。

左右兩邊類型相同

1、原始值的比較

它們的比較，就是值的直接比較。
比如：

console.log(null == null);               //true
console.log(undefined == undefined);     //true
console.log(666 == 666);                 //true
console.log(666 == 1);                   //false
console.log("周大俠啊" == "周大俠啊");      //true
console.log("周大俠啊" == "大佬");         //false
console.log(true == true);               //true
console.log(true == false);              //false

2、對象的比較

對象和原始值不同，首先，它們是可變的-----它們的值是可修改的：

var o = { x:1 };   //定義一個對象
o.x = 2;           //修改x的值

var a = [1,2,3];   //數(shù)組也是可修改的
a[0] = 0;          //修改數(shù)組第一個元素

**對象的比較并非值的比較，而是引用（內(nèi)存地址）的比較。 **

var o1 = { x:1 };
var o2 = { x:1 };
console.log( o1 == o2 );    //false
//即使 對像的屬性，值完全相同， 也不相等

var o3 = o1;
console.log( o1 == o3 );    //true
//o3 和  o1 引用的是同一對象。（即指向的是同一塊儲存地址）

//數(shù)組同上

左右兩邊類型不同

如果 == 兩邊的 類型不同，則比較時，有以下兩個個規(guī)則：

1. undefined等于null
2. 其他都轉(zhuǎn)數(shù)字比較

對象通過valueOf 或 toString 轉(zhuǎn)換為原始值，原始值在對應(yīng)轉(zhuǎn)數(shù)字。

總結(jié):左右兩邊類型不同， == 在比較時，除了(null == undefined)，NaN，其他都是轉(zhuǎn)為數(shù)字比較， 從來不會轉(zhuǎn)為布爾值！

舉個大栗子：

//1. undefined等于null
undefined == null; //ture

//2. 字符串和數(shù)字比較時，字符串轉(zhuǎn)數(shù)字
"0" == 0;  //true
"f" == 0;  //false
//字符串轉(zhuǎn)數(shù)字時，只有在字符串是純數(shù)字時，轉(zhuǎn)對應(yīng)數(shù)字，其他都轉(zhuǎn)為 NaN。

// 3. 字符串和布爾比較時，都轉(zhuǎn)為數(shù)字
"0" == false;   //true
"1" == true;    //true

//4. 數(shù)字和布爾比較時，布爾轉(zhuǎn)數(shù)字
1 == true;    //true
0 == false;   //true
//true 轉(zhuǎn) 1， false 轉(zhuǎn)0；

//5.對象 和 字符串，數(shù)字比較， 都轉(zhuǎn)數(shù)字。
new String("66") == "66";      //true
new String("zdx") == "zdx";    //false
new String("66") == 66;        //true

=== 的用法

這個比較，首先，看兩邊類型是否一致，不一致， 直接false，一致的話，再根據(jù) == 的使用規(guī)則， 進行比較。

（6）！= 和 ！==

這兩個 運算 跟 取反（！） 操作是 不一樣 的！，注意區(qū)分。

這兩個運算，是在 == 和 === 比較過后的結(jié)果，進行取反（就是對 true 和 false 取反，因為，== 和 === 的返回值 只有 true 和 false）。

簡單栗子:

"0" == 0;  //true
"f" === 0;  //false

"0" != 0;  //false
"f" !== 0;  //true

（7）&&、||

&& 邏輯與

1. 如果兩側(cè)都是布爾值， 進行布爾（AND）運算。
2. 否則它會先計算左側(cè)表達式，如果為 “假值”，返回這個值，如果是“真值”，計算右側(cè)表達式，并返回計算結(jié)果。

看：

true && false;       //false
1 && 2;              //2
null && 2;           //null
1-1 && 2;            //0
2-1 && 0;            //0

所以，有時候就會這樣寫代碼：

if( a==b ) start();
a == b && start();    //效果同上

|| 邏輯或

它跟 && 的行為是一樣的，只是它的做的是布爾（OR）運算，返回的情況相反。

1. 如果兩側(cè)都是布爾值， 進行布爾（OR）運算。
2. 否則它會先計算左側(cè)表達式，如果為 “真值”，返回這個值，如果是“假值”，計算右側(cè)表達式，并返回計算結(jié)果。

true || false;       //true
1 || 2;              //1
null || 2;           //2
1-1 || 2;            //2
2-1 || 0;            //1

（8）if 語句

它會計算操作數(shù)的值，“真值” 表現(xiàn)為true ， “假值” 表現(xiàn)為false。

附錄

一、Object

1、valueOf
返回對象本身。

({x:1,y:2}).valueOf();    //{x: 1, y: 2},返回的是對象！

2、toString
返回 "[object type]"，其中type是對象的類型。

//這里使用函數(shù)的call方法，指定 this的指向
var toString = Object.prototype.toString;

toString.call(new Date); // [object Date]
toString.call(new String); // [object String]
toString.call(Math); // [object Math]

toString.call(undefined); // [object Undefined]
toString.call(null); // [object Null]

二、Boolean

1、valueOf
返回布爾值。

(true).valueOf();    //true , 返回的是原始值，Boolean類型

2、toString
返回該對象的字符串形式。

(true).toString();     //"true"，返回的是原始值，string類型

三、Date

1、valueOf
返回存儲的時間是從 1970 年 1 月 1 日午夜開始計的毫秒數(shù) UTC。

(new Date()).valueOf();    //1525943413141  一串數(shù)字

2、toString
返回一個美式英語日期格式的字符串.

(new Date()).toString();    //"Fri May 11 2018 10:26:16 GMT+0800 (中國標準時間)"  原始值，string類型

四、Number

1、valueOf
返回數(shù)字值。

(66).valueOf();    //66   返回的是原始值，Number類型

2、toString
返回的是原始值，String類型
根據(jù)2 8 16 （范圍2 - 36）分別轉(zhuǎn)為二進制 八進制 十六進制字符串,，
不帶參，就默認為10， 轉(zhuǎn)十進制。
例：

(66).toString(2);    //"1000010"
(66).toString(8);    //"102"
(66).toString(16);   //"42"

五、String

1、valueOf
返回字符串值。

("666").valueOf();    //"666"   返回的是原始值，String類型
("zdx").valueOf();    //"zdx"   返回的是原始值，String類型

2、toString
和valueOf 效果一樣，返回字符串值。

("666").toString();    //"666"   返回的是原始值，String類型
("zdx").toString();    //"zdx"   返回的是原始值，String類型

六、Array

1、valueOf
自身沒有該方法，繼承Object.prototype.valueOf。返回的是數(shù)組對象！

([1,2,3]).valueOf();     //(3) [1, 2, 3]，

2、toString
返回表示該數(shù)組的字符串，跟使用 Array.prototype.join(",")，效果等同

([1,2,3]).toString();     //"1,2,3",    原始值，string類型
([1,2,3]).join(",");      //"1,2,3",

七、Function

1、valueOf
自身沒有該方法，繼承Object.prototype.valueOf。
返回的是函數(shù),使用typeof 返回 function，但注意原始值沒有function類型

function a(){ console.log(666) };
a.valueOf();    //? a(){ console.log(666) };  

2、toString
返回當前函數(shù)源代碼的字符串。

function a(){ console.log(666) };
a.toString();    //"function a(){ console.log(666) }";返回的是原始值，string類型

八、Error

1、valueOf
自身沒有該方法，繼承Object.prototype.valueOf。
返回Error 對象本身

(new Error("fatal error")).valueOf();   //Error: fatal error

2、toString
返回一個指定的錯誤對象（Error object）的字符串表示。

var e = new Error("fatal error");
print(e.toString()); // "Error: fatal error"

九、Math

它是全局對象， 不屬于函數(shù)。
1、valueOf
自身沒有該方法，繼承Object.prototype.valueOf。

Math.valueOf();     //返回Math 對象本身

2、toString
自身沒有該方法，繼承Object.prototype.toString。

Math.toString();    //"[object Math]"

這里寫圖片描述