數據類型轉換看這篇就夠了

平常開發中，咱們使用到的Js定義的每個值都屬於某一種數據類型，常見的js數據類型有String（字符串）、Number（數字）、Boolean（布爾）、Object、Undefined、Null、Symbol等等，其中Symbol是ES6引入的新的數據類型，表示獨一無二的數值。由於 JS 自己是一門弱類型語言，以致於類型轉換髮生的頻繁很高，本文旨在幫助你們梳理各類類型之間的相互轉換，在每一小節講解轉換前，還會跟你們介紹這些「老朋友」

數據轉換分爲顯示轉換和隱式轉換

• ☀️顯示轉換：常見的️顯式轉換方法有：Boolean()、Number()、String()等等
• 🌛隱式轉換：常見的隱式轉換方法：四則運算(加減乘除) 、== 、判斷語句(if)等

1.String

String是存儲字符的變量,String使用長度屬性length來計算字符串的長度

1.1 String轉換爲Number

• parseInt(string, 10)

parseInt() 函數可解析一個字符串，從位置 0 開始查看每一個字符，直到找到第一個非有效的字符爲止,最後並返回一個整數。

parseInt() 方法還有基模式，能夠把二進制、八進制、十六進制或其餘任何進制的字符串轉換成整數。基是由 parseInt() 方法的第二個參數指定的

• parseFloat(string)

相比上一節parseInt函數是將值轉換成整數，parseFloat函數則是將值轉換成浮點數且該方法方法也沒有基模式（轉換不了），只有對 String 類型調用這些方法，它們才能正確運行

• Number(string)

Number() 函數的強制類型轉換與 parseInt() 和 parseFloat() 方法的處理方式類似，只是它轉換的是整個值，而不是部分值

上兩節提到的parseInt() 和 parseFloat() 方法只轉換第一個無效字符以前的字符串，所以 "1.2.3" 將分別被轉換爲 "1" 和 "1.2"。 而用Number() 進行強制類型轉換，"1.2.3" 將返回 NaN，由於整個字符串值不能轉換成數字。若是字符串值能被完整地轉換

• + string

經過在字符串前面加了個加號，這個數值就變成了number類型

1.2 String轉Object

經過JSON.parse來完成，該注意的是JSON.parse遇到不可解析的字符串時，會拋出SyntaxError異常。

1.3 String轉Object（Array數組類型）

2.Number

Number類型是以IEEE-754標準格式來表示的，包括整數和浮點數，若是是計算會轉化爲2進制再計算，這也是0.1 + 0.2不等於0.3的緣由

拓展：爲何在 JavaScript 中，0.1+0.2 不等於 0.3：

console.log( 0.1 + 0.2 == 0.3);  //false
複製代碼

由於在JavaScript中的二進制的浮點數0.1和0.2並非十分精確，在他們相加的結果並不是正好等於0.3，而是一個比較接近的數字 0.3000000x ，因此條件判斷結果爲false。

問題：有沒有方法能夠解決上述問題呢❓ 可使用 JavaScript 提供的最小精度值Number.EPSILON，在這個偏差的範圍內就能夠斷定0.1+0.2===0.3爲true，以下👇所示

多數狀況下，Number 比 parseInt 和 parseFloat 等方法會更好

2.1 Number轉String

• n.toString( )

toString() 方法把數字轉換成指定進制形式的字符串。

• 一元運算符 +

經過在數字後面加了個空字符串，這個數值就變成了string類型

2.2 Number轉Boolean

number類型轉Boolean，除了0數值和NaN對應的是false,其餘數值都對應true

3.Boolean

Boolean 類型有且只有兩種值:true和false，主要用來表示邏輯意義上的真和假 boolean 這個類型比較簡單，這裏就不作複雜介紹

除了下面六個值被轉爲false，其餘都爲true

4.Object

Object對象是js中比較複雜的數據類型，涉及的東西比其餘類型都多，簡單描述對象的話，能夠說是由key-value聚合的數據集合，即屬性的集合。JS對象主要能夠分爲兩大類，分別是內置對象和宿主對象

• 內置對象: JS內置對象也被定義爲內部類，換句話說就是JavaScript裏面封裝好了的類，內部類大體有：Array，Boolean,RegExp，Date，Math，Number，String，也就是咱們平時看到的 如 new Date();
• 宿主對象: JS所運行的環境提供的對象如：BOM中的Window、DOM中的document

數組(Array)、日期(Date)、null等的數據類型都是 object

這裏也介紹不一樣類型對象toString()方法的返回值

注意：好比 10 與 new Number(10) 是兩個不一樣的值，前者是 Number 類型， 後者是對象類型

再舉個列子好比 new Date 與 Date(),雖然得出結果同樣，但內置對象 Date 做爲構造器new 將產生新的對象,而做爲函數時，則產生字符串，以下所示👇

4.1 Object轉爲String

4.2 Object對象轉Object數組

對象轉數組方式不少，其中包括如下幾種👇

• Object.values(object)：返回一個對象全部可枚舉屬性對應數值組成的數組
• Object.keys(object)： 返回一個對象的自身可枚舉屬性組成的數組
• Object.entries(object)：返回一個給定對象自身可枚舉屬性的鍵值對數組

若是類數組對象或者可遍歷的對象要轉換，還能夠用Array.from()方式，不過前提是object中必須有length屬性，返回的數組長度取決於這個object中length長度，同時object的key值必須是數值

小朋友👦👧你是否有不少問號❓類對象是啥？

類數組對象你能夠看作一種「僞數組」，雖然它沒法調用數組的方法，可是具有length屬性，能夠索引獲取內部項的數據結構

4.3 日期Object轉Number

將日期對象轉換爲數字（時間戳的形式）,能夠經過Number() 或者日期方法 getTime()

4.4 數組Object轉String

經過join或toString()的方法，join()能夠指定分隔符,若是不加參數，則默認使用逗號做爲分隔符，與 toString() 方法轉換操做效果相同

經過[1，2，3，4]初始化與new Array()做用同樣，也是建立了一個對象，新建的對象a.proto == Array.prototype

5 Undefind和Null

二者都是JavaScript語言用來表示"無"的值，且二者有共同點也有不一樣點，共同點在於都只有一個值，Null只有一個值 null,Undefined也只有一個值undefined。不一樣點在於Null 表示爲‘定義了可是值爲空’,而Undefind 表示爲'這裏應該有一個值，可是尚未定義'

要注意的是，若是咱們用typeof來判斷null的類型，會斷定爲 Object 類型，而不是Null類型只是爲何呢？

是由於JavaScript 數據類型在底層都是以二進制的形式表示的，二進制的前三位爲 0 會被 typeof 判斷爲對象類型，而 null 的二進制位剛好都是 0 ，所以，null 被誤判斷爲 Object 類型。此時咱們能夠用上一節談到的經過Object上的 原型上的toString()方法，以下👇 Object.prototype.toString.call(null) //[object Null]來區分

5.1 Undefind和Null轉Number

undefined沒法轉爲數字、而Null被轉換爲0

再看一個例子👇

undefined沒法轉爲數字,第一個調用返回NaN.第二個是null轉爲隱式轉換爲0因此是2 ，第三個是若是傳入的參數是undefined會以默認值爲準，因此是3

5.2 總結

• 不要對一個顯式變量的賦值 undefined，當須要釋放一個對象時，直接賦值爲 null 便可
• == 雙等號中若是兩個值類型不一樣，也有可能相等，undefind == null就是其中一個，包括 1 == '1'，可是若是null與undefined與其餘數相等運算時就不行，由於它們不進行類型轉換（隱式轉換）

6.Symbol

Symbol是ES6新引入的數據類型，表示獨一無二的值，相似於一種標識惟一性的ID，Symbol 函數不一樣的是，直接用new 調用它會拋出錯誤，由於生成的是原始類型值，不是對象，是 Symbol 對象的構造器。下面簡單用一個例子就能告訴你如何獨一無二👇

symbol不能與其餘類型的值進行運算，會報錯（即不能隱式轉換），可是部分能夠顯示轉換爲字符串或者布爾值

7.拓展

7.1 類型判斷方法

由於類型識別中，若是使用 typeof 來判斷數據類型，只能區分基本類型，即 number、string、undefined、boolean、object、function、symbol這幾種，可是對於數組、null、對象這些來講，使用 typeof 都會統一返回 「object」 。這時候就須要用到其它方式👇

經過Object.protptype.toString.call()截取字符串[object...]中間字符串來區分類型，去掉先後符號，好比 "[object Array]"就提取了array來判斷,以前寫的工具庫有定義點我👉

那直接用 Object.prototype.toString(1) 能夠嗎？答案是不行的，由於考慮到爲了每一個對象都能經過，因此才須要以 Function.prototype.call()的形式來調用，傳遞要檢查的對象做爲第一個參數

在舉個例子，看以下👇

爲何Object.prototype和Array.protoType是兩個結果？ 這裏涉及到一些原型鏈的問題，這裏也大概講一下

首先js中對象大多繼承自Object，當在某個對象上調用方法時，會先優先在該對象上進行查找，若是沒找到則會進入對象的原型（也就是.prototype）進行探索，若是仍是沒找到這個方法，一樣的也會進入對象原型的原型進行查找，直到找到或者進入原型鏈的頂端Object.prototype爲止。

因此，好比它調用的是Array.prototype.toString，雖然Array也繼承自Object，但js在Array.prototype上重寫了toString，因此致使結果不一樣，而第三個例子toString(),由於自己調用的是Array.prototype.toString，因此結果是跟第二種方式一致。

總結：只有Object.prototype上的toString才能用來進行復雜數據類型的判斷

樹醬但願將前端的樂趣帶給你們 本文已收錄 github.com/littleTreem… 喜歡就star✨

往期文章

• 前端表單數據那些事
• 前端工程化那些事
• 從0到1開發工具庫
• 從0到1開發簡單腳手架
• 前端Nginx那些事
• 前端運維部署那些事