js隱式類型轉換使用步驟詳解

相信剛開始了解js的時候，都會遇到 2 =='2'，但 1+2 == 1+'2'為false的情況。這時候應該會是一臉懵逼的狀態，不得不感慨js弱類型的靈活讓人發指，隱式類型轉換就是這么猝不及防。結合實際中的情況來看，有意或無意中涉及到隱式類型轉換的情況還是很多的。既然要用到，就需要掌握其原理，知其然重要知其所以然更重要。

js的變量類型

JavaScript 是弱類型語言，意味著JavaScript 變量沒有預先確定的類型。
并且變量的類型是其值的類型。也就是說變量當前的類型由其值所決定,夸張點說上一秒種的string，下一秒可能就是個array了。此外當進行某些操作時，變量可以進行類型轉換，我們主動進行的就是顯式類型轉換，另一種就是隱式類型轉換了。例如:

var a = '1'; 
typeof a;//string 
a =parseInt(a); //顯示轉換為number
typeof a //number 
a == '1' //true

弱類型的特性在給我們帶來便利的同時，也會給我們帶來困擾。趨利避害，充分利用該特性的前提就是掌握類型轉換的原理，下面一起看一下。

js數據類型

老生常談的兩大類數據類型：

1. 原始類型
   Undefined、 Null、 String、 Number、 Boolean

2. 引用類型
   object

此外還有一個es6新增的Symbol，先不討論它。對于這五類原始類型，突然提問可能想不全，沒必要去死記硬背，可以想一下為否的常見變量及其對應值即可。

對于不同的數據格式轉換規則是不同的，我們需要分別對待。

轉換規則

既然是規范定義的規則，那就不要問為什么了，先大致看一下，爭取記住。是在不行經常翻翻看看大佬的博客es5規范。轉換有下面這么幾類，我們分別看一下具體規范。（這部分轉換規則，完全可以跳過去，看到下面的實例再回頭看應該更容易接受一些）

ToPrimitive(轉換為原始值)

ToPrimitive 運算符接受一個值，和一個可選的 期望類型 作參數。ToPrimitive 運算符把其值參數轉換為非對象類型。如果對象有能力被轉換為不止一種原語類型，可以使用可選的 期望類型 來暗示那個類型。根據下表完成轉換

這段定義看起來有點枯燥。轉換為原始值，其實就是針對引用數據的，其目的是轉換為非對象類型。
如果已經是原始類型，當然就不做處理了
對于object，返回對應的原始類型，該原始類型是由期望類型決定的，期望類型其實就是我們傳遞的type。直接看下面比較清楚。
ToPrimitive方法大概長這么個樣子具體如下。

/**
* @obj 需要轉換的對象
* @type 期望轉換為的原始數據類型，可選
*/
ToPrimitive(obj,type)

type可以為number或者string，兩者的執行順序有一些差別
string:

1. 調用obj的toString方法，如果為原始值，則返回，否則下一步

2. 調用obj的valueOf方法，后續同上

3. 拋出TypeError 異常

number:

1. 調用obj的valueOf方法，如果為原始值，則返回，否則下一步

2. 調用obj的toString方法，后續同上

3. 拋出TypeError 異常

其實就是調用方法先后，畢竟期望數據類型不同，如果是string當然優先調用toString。反之亦然。
當然type參數可以為空，這時候type的默認值會按照下面的規則設置

1. 該對象為Date，則type被設置為String

2. 否則，type被設置為Number

對于Date數據類型，我們更多期望獲得的是其轉為時間后的字符串，而非毫秒值，如果為number，則會取到對應的毫秒值，顯然字符串使用更多。
其他類型對象按照取值的類型操作即可。

概括而言，ToPrimitive轉成何種原始類型，取決于type，type參數可選，若指定，則按照指定類型轉換，若不指定，默認根據實用情況分兩種情況，Date為string，其余對象為number。那么什么時候會指定type類型呢，那就要看下面兩種轉換方式了。

toNumber

某些特定情況下需要用到ToNumber方法來轉成number
運算符根據下表將其參數轉換為數值類型的值

對于string類型，情況比較多，只要掌握常見的就行了。和直接調用Number(str)的結果一致，這里就不多提了，主要是太多提不完。
需要注意的是，這里調用ToPrimitive的時候，type就指定為number了。下面的toString則為string。

toString

ToString 運算符根據下表將其參數轉換為字符串類型的值：
其實了解也很簡單，畢竟是個規范，借用大佬一張圖：

雖然是需要死記的東西，還是有些規律可循的。
對于原始值：

valueOf

當調用 valueOf 方法，采用如下步驟：

1. 調用ToObject方法得到一個對象O

2. 原始數據類型轉換為對應的內置對象， 引用類型則不變

3. 調用該對象(O)內置valueOf方法.

不同內置對象的valueOf實現：

對照代碼更清晰一點

var str = new String('123')
//123
console.log(str.valueOf())
var num = new Number(123)
//123
console.log(num.valueOf())
var date = new Date()
//1526990889729
console.log(date.valueOf())
var bool = new Boolean('123')
//true
console.log(bool.valueOf())
var obj = new Object({valueOf:()=>{
 return 1
}})
//依賴于內部實現
console.log(obj.valueOf())

運算隱式轉換

前面提了那么多抽象概念，就是為了這里來理解具體轉換的。
對于+運算來說，規則如下：

說的自己都迷糊了快，一起結合代碼來看一下

1+'2'+false

1. 左邊取原始值，依舊是Number

2. 中間為String，則都進行toString操作

3. 左邊轉換按照toString的規則，返回'1'

4. 得到結果temp值'12'

5. 右邊布爾值和temp同樣進行1步驟

6. temp為string，則布爾值也轉為string'false'

7. 拼接兩者 得到最后結果 '12false'

我們看一個復雜的

var obj1 = {
 valueOf:function(){
 return 1
 }
}
var obj2 = {
 toString:function(){
 return 'a'
 }
}
//2
console.log(1+obj1)
//1a
console.log('1'+ obj2)
//1a
console.log(obj1+obj2)

不管多復雜，按照上面的順序來吧。

1. 左邊就不說了，number

2. 右邊obj轉為基礎類型，按照type為number進行

3. 先調用valueOf() 得到結果為1

4. 兩遍都是number，則進行相加得到2

1. 左邊為number

2. 右邊同樣按照按照type為number進行轉化

3. 調用obj2.valueOf()得到的不是原始值

4. 調用toString() return 'a'

5. 依據第二條規則，存在string，則都轉換為string進行拼接

6. 得到結果1a

1. 兩邊都是引用，進行轉換 ToPrimitive 默認type為number

2. obj1.valueOf()為1 直接返回

3. obj2.valueOf()得到的不是原始值

4. 調用toString() return 'a'

5. 依據第二條規則，存在string，則都轉換為string進行拼接

6. 得到結果1a

到這里相信大家對+這種運算的類型轉換了解的差不多了。下面就看一下另一種隱式類型轉換

== 抽象相等比較

這種比較分為兩大類，

相同的就不說了,隱式轉換發生在不同類型之間。規律比較復雜，規范比較長，這里也不列舉了，大家可以查看抽象相等算法。簡單總結一句，相等比較就不想+運算那樣string優先了，是以number優先級為最高。概括而言就是，都盡量轉成number來進行處理，這樣也可以理解，畢竟比較還是期望比較數值。那么規則大概如下：
對于x == y

1. 如果x,y均為number，直接比較

    沒什么可解釋的了
    1 == 2 //false

2. 如果存在對象，ToPrimitive() type為number進行轉換，再進行后面比較

   var obj1 = {
    valueOf:function(){
    return '1'
    }
   }
   1 == obj2 //true
   //obj1轉為原始值，調用obj1.valueOf()
   //返回原始值'1'
   //'1'toNumber得到 1 然后比較 1 == 1
   [] == ![] //true
   //[]作為對象ToPrimitive得到 '' 
   //![]作為boolean轉換得到0 
   //'' == 0 
   //轉換為 0==0 //true

3. 存在boolean，按照ToNumber將boolean轉換為1或者0，再進行后面比較

   //boolean 先轉成number，按照上面的規則得到1 
   //3 == 1 false
   //0 == 0 true
   3 == true // false
   '0' == false //true

4. 如果x為string，y為number，x轉成number進行比較

   //'0' toNumber()得到 0 
   //0 == 0 true
   '0' == 0 //true

相信看了本文案例你已經掌握了方法，更多精彩請關注Gxl網其它相關文章！

推薦閱讀：

前端中排序算法實例詳解

JS中使用接口步驟詳解

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com