前言

JavaScript類型在什么情況下會發生類型自動轉換

大家都知道 JavaScript 是弱類型語言，而且 JavaScript 聲明變量的時候并沒有預先確定的類型，變量的類型就是其值的類型，也就是說變量當前的類型由其值所決定,夸張點說上一秒種的String，下一秒可能就是個Number類型了，這個過程可能就進行了某些操作發生了強制類型轉換。雖然弱類型的這種不需要預先確定類型的特性給我們帶來了便利，同時也會給我們帶來困擾，為了能充分利用該特性就必須掌握類型轉換的原理。

下面我們來介紹JavaScript類型在什么情況下會發生類型自動轉換：

什么時候自動轉換為string類型

JavaScript類型在什么情況下會發生類型自動轉換

一、在沒有對象的前提下

字符串的自動轉換，主要發生在字符串的加法運算時。當一個值為字符串，另一個值為非字符串，則后者轉為字符串。

'2' + 1 // '21' 
'2' + true // "2true" 
'2' + false // "2false" 
'2' + undefined // "2undefined" 
'2' + null // "2null"

二、當有對象且與對象+時候

//toString的對象 
var obj2 = { 
 toString:function(){ 
 return 'a' 
 } 
} 
console.log('2'+obj2) 
//輸出結果2a 
 
//常規對象 
var obj1 = { 
 a:1, 
 b:2 
} 
console.log('2'+obj1)； 
//輸出結果 2[object Object] 
 
//幾種特殊對象 
'2' + {} // "2[object Object]" 
'2' + [] // "2" 
'2' + function (){} // "2function (){}" 
'2' + ['koala', 1] // 2koala,1

JavaScript類型在什么情況下會發生類型自動轉換

string類型轉換開發過程中可能出錯的點：

var obj = { 
 width: '100' 
}; 
 
obj.width + 20 // "10020"

什么時候自動轉換為Number類型

一、有加法運算符，但是無String類型的時候，都會優先轉換為Number類型

true + 0 // 1 
true + true // 2 
true + false //1

二、除了加法運算符，其他運算符都會把運算自動轉成數值。

'5' - '2' // 3 
'5' * '2' // 10 
true - 1 // 0 
false - 1 // -1 
'1' - 1 // 0 
'5' * [] // 0 
false / '5' // 0 
'abc' - 1 // NaN 
null + 1 // 1 
undefined + 1 // NaN 
 
//一元運算符（注意點） 
+'abc' // NaN 
-'abc' // NaN 
+true // 1 
-false // 0

注意：null轉為數值時為0，而undefined轉為數值時為NaN。

JavaScript類型在什么情況下會發生類型自動轉換

什么時候進行布爾轉換

一、布爾比較時

二、if(obj) , while(obj)等判斷時或者 三元運算符只能夠包含布爾值

條件部分的每個值都相當于false，使用否定運算符后，就變成了true

if ( !undefined 
 && !null 
 && !0 
 && !NaN 
 && !'' 
) { 
 console.log('true'); 
} // true 
 
//下面兩種情況也會轉成布爾類型 
expression ? true : false 
!! expression

js中的數據類型判斷

JavaScript類型在什么情況下會發生類型自動轉換

三種方式，分別為 typeof、instanceof 和Object.prototype.toString()

一、typeof

通過 typeof操作符來判斷一個值屬于哪種基本類型。

typeof 'seymoe' // 'string' 
typeof true // 'boolean' 
typeof 10 // 'number' 
typeof Symbol() // 'symbol' 
typeof null // 'object' 無法判定是否為 null 
typeof undefined // 'undefined' 
 
typeof {} // 'object' 
typeof [] // 'object' 
typeof(() => {}) // 'function'

上面代碼的輸出結果可以看出，

1、null 的判定有誤差，得到的結果 如果使用 typeof，null得到的結果是object

2、操作符對對象類型及其子類型，例如函數（可調用對象）、數組（有序索引對象）等進行判定，則除了函數都會得到 object 的結果。

綜上可以看出typeOf對于判斷類型還有一些不足，在對象的子類型和null情況下。

二、instanceof

通過 instanceof 操作符也可以對對象類型進行判定，其原理就是測試構造函數的prototype 是否出現在被檢測對象的原型鏈上。

[] instanceof Array // true 
({}) instanceof Object // true 
(()=>{}) instanceof Function // true

注意：instanceof 也不是萬能的。 舉個例子：

let arr = [] 
let obj = {} 
arr instanceof Array // true 
arr instanceof Object // true 
obj instanceof Object // true

在這個例子中，arr 數組相當于 new Array() 出的一個實例，所以 arr.__proto__ === Array.prototype，又因為 Array屬于 Object 子類型，即Array.prototype.__proto__ === Object.prototype，因此 Object 構造函數在 arr 的原型鏈上。所以 instanceof 仍然無法優雅的判斷一個值到底屬于數組還是普通對象。

Object.prototype.toString() 可以說是判定 JavaScript 中數據類型的終極解決方法了，具體用法請看以下代碼：

Object.prototype.toString.call({}) // '[object Object]' 
Object.prototype.toString.call([]) // '[object Array]' 
Object.prototype.toString.call(() => {}) // '[object Function]' 
Object.prototype.toString.call('seymoe') // '[object String]' 
Object.prototype.toString.call(1) // '[object Number]' 
Object.prototype.toString.call(true) // '[object Boolean]' 
Object.prototype.toString.call(Symbol()) // '[object Symbol]' 
Object.prototype.toString.call(null) // '[object Null]' 
Object.prototype.toString.call(undefined) // '[object Undefined]' 
 
Object.prototype.toString.call(new Date()) // '[object Date]' 
Object.prototype.toString.call(Math) // '[object Math]' 
Object.prototype.toString.call(new Set()) // '[object Set]' 
Object.prototype.toString.call(new WeakSet()) // '[object WeakSet]' 
Object.prototype.toString.call(new Map()) // '[object Map]' 
Object.prototype.toString.call(new WeakMap()) // '[object WeakMap]'

JavaScript類型在什么情況下會發生類型自動轉換

我們可以發現該方法在傳入任何類型的值都能返回對應準確的對象類型。用法雖簡單明了，但其中有幾個點需要理解清楚：

1、該方法本質就是依托Object.prototype.toString()方法得到對象內部屬性 [[Class]]

2、傳入原始類型卻能夠判定出結果是因為對值進行了包裝

3、null 和 undefined 能夠輸出結果是內部實現有做處理

總結

重點學習幾種類型自動轉換，實際開發中會經常遇到這樣的bug，數值大還好發現，越小越容易忽略。