詳解JavaScript數(shù)據(jù)類型和判斷方法
前言
JavaScript 中目前有 7 種基本(原始primitives
)數(shù)據(jù)類型 Undefined
, Null
,Boolean
, Number
, String
,BigInt
,Symbol
,以及一種引用類型 Object
,Object
中又包括 Function
,Date
,JSON
,RegExp
等,除了 7 種原始類型,其他的所有能夠用 new
實(shí)例化的內(nèi)置類型都是 Object
構(gòu)造的。
數(shù)據(jù)類型
對于數(shù)據(jù)了類型我們可以通過 typeof
運(yùn)算符來判斷,具體結(jié)果看下圖。
原始類型中兩個比較特殊的就是 Undefined
和 Null
,他們兩個類型都只有一個值就是 undefined
和 null
。
Undefined
undefined
一般表示我們未對變量進(jìn)行初始化。使用 typeof
操作符的時候,如果是未聲明變量,同樣也會返回 undefined
,再比如未設(shè)置返回值的函數(shù)執(zhí)行的結(jié)果是 undefined
,未設(shè)置的參數(shù)也會被默認(rèn)為 undefined
。最后還有一點(diǎn)需要注意的是,undefined
并不是 js 的保留字,并且是全局對象的一個屬性,在瀏覽器環(huán)境中就是 window.undefined
。當(dāng)在局部環(huán)境中,我們是可以自己給 undefined
屬性賦值的,也就是重寫 undefined
,所以為了確保我們使用的 undefined
是未被重寫的,我們可以使用 void 0
來代替。
Null
null
可以簡單理解為一個未被創(chuàng)建的對象,比如我們使用 document.getElementById
并沒有找到對應(yīng)元素的時候就會返回 null
。null
和 undefined
有一些區(qū)別,在轉(zhuǎn)換為 Number
的時候,null
會轉(zhuǎn)換為 0
而 undefined
會轉(zhuǎn)換為 NaN
,執(zhí)行 typeof
運(yùn)算的時候,undefined
返回 undefined
而 null
返回 object
。使用 ==
判斷兩者相等會返回 true
,所以為了防止誤判一般我們使用全等 ===
。null
是所有對象原型鏈的終點(diǎn),Object.prototype.__proto__ === null
。
關(guān)于 null
的使用,當(dāng)我們聲明一個變量是用來存儲對象我們可以先賦值為 null,當(dāng)一個對象不再需要的時候,我們可以設(shè)置為 null
解除這個引用。
Symbol 和 BigInt
這兩個都是 ES6 新增的原始數(shù)據(jù)類型,Symbol
類型的數(shù)據(jù)通過 Symbol()
方法的執(zhí)行產(chǎn)生,不過需要注意的是 Symbol
不能作為構(gòu)造函數(shù),每個從 Symbol()
返回的 symbol
值都是唯一的。一個 symbol
值能作為對象屬性的標(biāo)識符;這是該數(shù)據(jù)類型僅有的目的。
而 BigInt 則是為了精確表示超出雙精度浮點(diǎn)數(shù)的最大安全表示范圍的大數(shù)而新增的基本數(shù)據(jù)類型。
判斷數(shù)據(jù)類型的方法
typeof 運(yùn)算符
最簡單的判斷數(shù)據(jù)類型的方法是 typeof 運(yùn)算符,返回值為字符串。typeof 的缺點(diǎn)是除了 Function 以外的其他所有對象的返回值都是 object (null 的返回值也是 object),如果我們需要區(qū)分不同的對象,就無法使用 typeof。
instanceof 運(yùn)算符
instanceof
運(yùn)算符是檢測構(gòu)造函數(shù)的原型是否出現(xiàn)在某個對象的原型鏈上。通過 instanceof
運(yùn)算符我們可以實(shí)現(xiàn)對 Object
類型的細(xì)分,確定屬于哪種對象。但是 instanceof
的缺點(diǎn)是只能對對象進(jìn)行檢測,對于基本數(shù)據(jù)類型的實(shí)例無法檢測(字面量無法檢測,但是通過基本包裝類型的構(gòu)造函數(shù)創(chuàng)建的基本類型可以進(jìn)行檢測)。
constructor 屬性
利用實(shí)例的 constructor
屬性來輔助判斷實(shí)例的數(shù)據(jù)類型也是一種手段。一般來說,實(shí)例本身是沒有 constructor
屬性的,我們所看到的屬性都是 實(shí)例.__proto__.constructor
,換言之也就是實(shí)例的構(gòu)造函數(shù),這種方式對基本數(shù)據(jù)類型也是有效的。這種方法的一個比較大的問題是 constructor
屬性是個不受保護(hù)的屬性,隨時可能被更改,我們既可以給實(shí)例增加 constructor
屬性,也可以修改構(gòu)造函數(shù)的 prototype
的引用,也可以直接修改原型的 constructor
屬性。
Object.prototype.toString.call()
這是最安全準(zhǔn)確的檢測數(shù)據(jù)類型的方法,每一種數(shù)據(jù)類型的構(gòu)造函數(shù)的原型上都有 toString
方法,但是除了 Object.prototype
上的 toString
是用來返回當(dāng)前實(shí)例所屬類的信息(檢測數(shù)據(jù)類型的),其余的都是轉(zhuǎn)換為字符串的。該方法可以準(zhǔn)確檢測所有內(nèi)置類型。自定義類型的返回值為 Object Object
let toString = Object.prototype.toString //=>Object.prototype.toString console.log(toString.call(10)); //=>"[object Number]" console.log(toString.call(NaN)); //=>"[object Number]" console.log(toString.call("xxx")); //=>"[object String]" console.log(toString.call(true)); //=>"[object Boolean]" console.log(toString.call(null)); //=>"[object Null]" console.log(toString.call(undefined)); //=>"[object Undefined]" console.log(toString.call(Symbol())); //=>"[object Symbol]" console.log(toString.call(BigInt(10))); //=>"[object BigInt]" console.log(toString.call({xxx:'xxx'})); //=>"[object Object]" console.log(toString.call([10,20])); //=>"[object Array]" console.log(toString.call(/^\d+$/)); //=>"[object RegExp]" console.log(toString.call(function(){})); //=>"[object Function]"
以上就是詳解JavaScript數(shù)據(jù)類型和判斷方法的詳細(xì)內(nèi)容,更多關(guān)于JavaScript數(shù)據(jù)類型和判斷方法的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JavaScript實(shí)現(xiàn)頁面動態(tài)驗(yàn)證碼的實(shí)現(xiàn)示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)頁面動態(tài)驗(yàn)證碼的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03ES5 模擬 ES6 的 Symbol 實(shí)現(xiàn)私有成員功能示例
這篇文章主要介紹了ES5 模擬 ES6 的 Symbol 實(shí)現(xiàn)私有成員功能,結(jié)合實(shí)例形式分析了ES5 模擬 ES6 的 Symbol 實(shí)現(xiàn)私有成員功能相關(guān)原理、實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下2020-05-05解決前端接收 type:"application/octet-stream" 格
前端接收 type: “application/octet-stream“ 格式的數(shù)據(jù)并下載,還有后端既返回octet-stream還返回JSON數(shù)據(jù)時的處理方法,今天給大家分享前端接收 type:"application/octet-stream" 格式的數(shù)據(jù)并下載(解決后端返回不唯一問題)的解決方案,感興趣的朋友一起看看吧2023-12-12JS實(shí)現(xiàn)帶提示的星級評分效果完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)帶提示的星級評分效果,以完整實(shí)例形式較為詳細(xì)的分析了JavaScript響應(yīng)鼠標(biāo)事件動態(tài)變換頁面元素樣式的相關(guān)技巧,非常簡單實(shí)用的代碼,需要的朋友可以參考下2015-10-10原生JS實(shí)現(xiàn)Ajax跨域請求flask響應(yīng)內(nèi)容
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)Ajax跨域請求flask響應(yīng)內(nèi)容,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-10-10