前端基礎整理-JS數據類型轉換

前言

JavaScript 是一種弱類型或者說動態語言。這意味着你不用提早聲明變量的類型，在程序運行過程當中，類型會被自動肯定。這也意味着你能夠使用同一個變量保存不一樣類型的數據，本文主要介紹有關數據類型的轉換

JS數據類型

• 基礎類型：string number boolean null undefined symbol
• 引用類型：object

顯式類型轉換

指的是主動調用函數實現數據類型的轉換，隱式轉換主要是基於如下三種方式進行：

Number函數

• number -> number

Number(666) // 666

• string -> number

Number('123') // 123
Number('') // 0
Number('123sd') // NaN

• boolean -> number

Number(true) // 1
Number(false) // 0

• null -> number

Number(null) // 0

• undefined -> number

Number(undefined) // NaN

• object -> number

1. 第一步先調用對象的valueOf方法，若是返回值爲基本類型則不執行第二步
2. 第二部調用對象的toString方法，若是返回值爲符合類型則報錯

var a = {a: 1}
Number(a) // NaN
/** 內部執行流程 **/
var tmp1 = a.valeOf() // {a: 1}
var tmp2 = tmp.toString() // "[object Object]"
Number(tmp2) // NaN

String函數

• number -> string

String(123) // '123'

• string -> string

String('123') // '123'

• boolean -> string

String(true) // 'true'
String(false) // 'false'

• null -> string

String(null) // 'null'

• undefined -> string

String(undefined) // 'undefined'

• object -> string

1. 第一步先調toString方法，若是返回值不是基礎類型執行第二步
2. 第二步調用valueOf方法，若是返回值不是基礎類型，報錯

var a = {a: 1}
String(a) // '[object Object]'

驗證工做原理

a.toString = function () { return 'hi' }
String(a) // 'hi'
a.toString = function () { return [] }
a.valueOf = function () { return 'hello world' }
String(a) // 'hello world'
a.valueOf = function () { return {b: 1} }
String(a) // 報錯
Error: Uncaught TypeError: Cannot convert object to primitive value
        at String (<anonymous>)
        at <anonymous>:10:1

Boolean函數

Boolean(+0)
Boolean(-0)
Boolean(NaN)
Boolean('')
Boolean(false)
Boolean(undefined)
Boolean(null)
// 都爲false其他都爲true

隱式類型轉換

隱式轉換的基石就是js引擎自動調用顯示類型轉換的方法，在如下三種狀況下發生：

四則運算

+ 轉String類型

1 + 'asd123' // '1asd123'

- * / 轉Number類型

1 - 'asd123' // NaN
1 / 'asd123' // NaN
1 * 'asd123' // NaN

判斷語句

轉Boolean類型

1 - 'asd' || true // true
if ( 1 - 'asd') { ... } // false

native調用

按上述規則進行隱式轉換

console.log(1-'asd123') // NaN
console.log(1 + 'asd123') // '1asd123'
...

類型檢測typeof

參考資料

• MDN
• MKW