詳解如何準(zhǔn)確判斷JavaScript中的數(shù)據(jù)類(lèi)型
一、前言
在JavaScript中，我們經(jīng)常需要判斷數(shù)據(jù)類(lèi)型以便于正確地處理數(shù)據(jù)。本文將介紹JavaScript中的數(shù)據(jù)類(lèi)型判斷技術(shù)，包括typeof操作符、instanceof操作符、Object.prototype.toString方法以及ES6新增的一些數(shù)據(jù)類(lèi)型判斷方法。
二、typeof 操作符
操作符typeof用于判斷一個(gè)值的數(shù)據(jù)類(lèi)型，返回的結(jié)果是一個(gè)字符串。常見(jiàn)的typeof返回值包括"`number"、"string"、"boolean"、"undefined"、"object"和"function"。
console.log(typeof 'hello'); //輸出: string
console.log(typeof('hello')); //輸出: string
console.log(typeof 666); //輸出: number
console.log(typeof(666)); //輸出: number
console.log(typeof true); //輸出: boolean
console.log(NaN); //輸出: NaN
console.log(typeof NaN); //輸出: number
console.log(typeof undefined); //輸出: undefined
console.log(typeof new Date()); //輸出: object
console.log(typeof null); //輸出: object
console.log(typeof []); //輸出: object
console.log(typeof {}); //輸出: object
console.log(typeof function() {}); //輸出: function需要注意的是，typeof null返回的是object而不是null，typeof能判斷除了null之外的所有數(shù)據(jù)類(lèi)型。這是一個(gè)歷史遺留問(wèn)題，不能用來(lái)判斷null值。如果要判斷null值，可以使用"==="運(yùn)算符。 typeof判斷所有引用類(lèi)型都是輸出object，除了函數(shù)function，用typeof判斷函數(shù)類(lèi)型輸出的是function。
三、instanceof 操作符
instanceof操作符用于判斷一個(gè)對(duì)象是否屬于某個(gè)類(lèi)（構(gòu)造函數(shù)）的實(shí)例。它會(huì)檢查對(duì)象的原型鏈?zhǔn)欠癜瑯?gòu)造函數(shù)的原型對(duì)象。
console.log("hello world" instanceof String) //false
console.log(new String("hello world") instanceof String) //true
console.log(666 instanceof Number) //false
console.log(new Number(666) instanceof Number) //true
console.log(true instanceof Boolean) //false
console.log([] instanceof Array) //true
console.log({} instanceof Object) //true
console.log(null instanceof null) //報(bào)錯(cuò)
console.log(undefined instanceof undefined) //報(bào)錯(cuò)需要注意的是，typeof null返回的是object而不是null，typeof能判斷除了null之外的所有數(shù)據(jù)類(lèi)型。這是一個(gè)歷史遺留問(wèn)題，不能用來(lái)判斷null值。如果要判斷null值，可以使用"==="運(yùn)算符。 typeof判斷所有引用類(lèi)型都是輸出object，除了函數(shù)function，用typeof判斷函數(shù)類(lèi)型輸出的是function。
四、Object.prototype.toString 方法
Object.prototype.toString方法可以返回一個(gè)對(duì)象的數(shù)據(jù)類(lèi)型。它比typeof和instanceof更加準(zhǔn)確和全面，可以判斷基本數(shù)據(jù)類(lèi)型和各種對(duì)象類(lèi)型。
console.log(Object.prototype.toString(undefined)); //[object Object]
console.log(Object.prototype.toString(666)); //[object Object]
console.log(Object.prototype.toString.call(undefined))//[object Undefined]
console.log(Object.prototype.toString.call(null)); //[object Null]
console.log(Object.prototype.toString.call(666)); //[object Number]
console.log(Object.prototype.toString.call('abc')); //[object String]
console.log(Object.prototype.toString.call(NaN)); //[object Number]
console.log(Object.prototype.toString.call([1,2,3])); //[object Array]
console.log(Object.prototype.toString.call({a:1,b:2}))//[object Object]
console.log(Object.prototype.toString.call(function(){}))//[object Function]
console.log(Object.prototype.toString.call(new Date()))//[object Date]
console.log(Object.prototype.toString.call(arguments)) //[object Arguments]需要注意的是，如果不加上call，就會(huì)輸出[object Object]，加上后才能準(zhǔn)確判斷。我們仔細(xì)觀察一下，發(fā)現(xiàn)輸出的結(jié)果中并不全是我們需要的信息，我們似乎只需要后半部分。那么怎樣只輸出后半部分呢？
Object.prototype.toString(undefined).slice(8,-1) //Object
Object.prototype.toString(666).slice(8,-1) //Object
Object.prototype.toString({}).slice(8,-1) //Object
Object.prototype.toString.call(undefined).slice(8,-1) //Undefined
Object.prototype.toString.call(null).slice(8,-1) //Null
Object.prototype.toString.call(666).slice(8,-1) //Number
Object.prototype.toString.call('abc').slice(8,-1) //String
Object.prototype.toString.call(NaN).slice(8,-1) //Number
Object.prototype.toString.call([1,2,3]).slice(8,-1) //Array
Object.prototype.toString.call({a:1,b:2}).slice(8,-1) //Object
Object.prototype.toString.call(function () {}).slice(8,-1) //Function
Object.prototype.toString.call(new Date()).slice(8,-1) //Date因代碼過(guò)長(zhǎng)不便展示，請(qǐng)各位自行加上console.log()。前半部分的[object是固定的，后半部分長(zhǎng)度不固定，所以我們這里采用slice(8,-1)，8表示從第八位開(kāi)始截取，不包括第八位，-1表示從右往左數(shù)除掉一位，也就是去掉右中括號(hào)。
五、ES6 新增的數(shù)據(jù)類(lèi)型判斷方法
ES6新增了一些數(shù)據(jù)類(lèi)型判斷方法，包括Number.isNaN、Number.isFinite、Array.isArray、Object.is等方法。
1. Number.isNaN
Number.isNaN方法用于判斷一個(gè)值是否為NaN，它比全局的isNaN方法更加嚴(yán)格，只有在值為NaN時(shí)返回true，其他情況都返回false。
console.log(Number.isNaN(NaN)); //true
console.log(Number.isNaN(42)); //false
console.log(Number.isNaN("hello world"));//false
console.log(Number.isNaN(undefined)); //false
console.log(Number.isNaN(null)); //false2. Number.isFinite
Number.isFinite方法用于判斷一個(gè)值是否為有限數(shù)值，它在值為Infinity、-Infinity和NaN時(shí)返回false，其他情況都返回true。Number.isFinite只能判斷數(shù)值類(lèi)型的數(shù)據(jù)是否為有限數(shù)值，對(duì)于其他數(shù)據(jù)類(lèi)型返回都是false。
console.log(Number.isFinite(0)); //true
console.log(Number.isFinite(-16)); //true
console.log(Number.isFinite(42)); //true
console.log(Number.isFinite(Infinity)); //false
console.log(Number.isFinite(-Infinity)); //false
console.log(Number.isFinite(NaN)); //false
console.log(Number.isFinite("hello world"));//false
console.log(Number.isFinite(undefined)); //false
console.log(Number.isFinite(null)); //false
console.log(Number.isFinite(true)); //false3. Array.isArray
Array.isArray方法用于判斷一個(gè)值是否為數(shù)組類(lèi)型。
console.log(Array.isArray([])); //true
console.log(Array.isArray([1, 2, 3])); //true
console.log(Array.isArray({})); //false
console.log(Array.isArray("hello world"));//false
console.log(Array.isArray(undefined)); //false
console.log(Array.isArray(null)); //false4. Object.is
Object.is方法用于比較兩個(gè)值是否相等，它比全局的===運(yùn)算符更加嚴(yán)格，可以判斷NaN值和-0和+0的差別，使用Object.is方法能夠更加準(zhǔn)確地比較兩個(gè)值是否相等。
console.log(Object.is(42, 42)); //true
console.log(Object.is("hello world", "hello world"));//true
console.log(Object.is(NaN, NaN)); //true
console.log(Object.is(+0, -0)); //false
console.log(Object.is('666', 666)); //false
console.log(Object.is(true, 1)); //false
console.log(Object.is(true, 'true')); //false六、NaN 和 "== 、==="
在實(shí)際編寫(xiě)JavaScript程序時(shí)，需要注意一些細(xì)節(jié)問(wèn)題，以避免出現(xiàn)不必要的錯(cuò)誤或者行為不符合預(yù)期的情況。以下是一些常見(jiàn)的問(wèn)題和解決方法。
1. NaN
NaN是Not A Number的縮寫(xiě)，NaN不是一種數(shù)據(jù)類(lèi)型，它屬于number類(lèi)型，NaN是一個(gè)特殊的值，與任何值都不相等，包括它自己。因此，判斷一個(gè)值是否為NaN需要使用isNaN()函數(shù)。
2. ==（兩個(gè)等號(hào)）和 ===（三個(gè)等號(hào)）
在JavaScript中，==和===都是用來(lái)比較兩個(gè)值是否相等的運(yùn)算符。它們的主要區(qū)別在于比較的嚴(yán)格程度和類(lèi)型轉(zhuǎn)換的方式。==（相等運(yùn)算符）：在進(jìn)行比較時(shí)會(huì)進(jìn)行類(lèi)型轉(zhuǎn)換，如果兩個(gè)值的類(lèi)型不同，會(huì)將它們轉(zhuǎn)換為相同的類(lèi)型再進(jìn)行比較。===（嚴(yán)格相等運(yùn)算符）：在進(jìn)行比較時(shí)不會(huì)進(jìn)行類(lèi)型轉(zhuǎn)換，如果兩個(gè)值的類(lèi)型不同，直接返回false。
console.log(1 == "1"); //true console.log(1 === "1"); //false console.log(0 == false); //true console.log(0 === false); //false console.log(null == undefined); //true， console.log(null === undefined);//false
因?yàn)?code>null和undefined都是JavaScript中的特殊值，使用==時(shí)被認(rèn)為是相等的。
需要注意的是，由于==會(huì)進(jìn)行類(lèi)型轉(zhuǎn)換，因此可能會(huì)出現(xiàn)一些奇怪的結(jié)果。
console.log(null == 0); //false，null會(huì)被轉(zhuǎn)換為數(shù)字0
console.log(null < 1); //true，null會(huì)被轉(zhuǎn)換為數(shù)字0
console.log("5" == 5); //true，字符串"5"會(huì)被轉(zhuǎn)換為數(shù)字5
console.log(true == 1); //true，true會(huì)被轉(zhuǎn)換為數(shù)字1需要注意，雖然null會(huì)被轉(zhuǎn)成數(shù)字0，但是null == 0仍然輸出false。 因此，在比較兩個(gè)值時(shí)，建議使用===，這樣可以避免由于類(lèi)型轉(zhuǎn)換等原因?qū)е碌腻e(cuò)誤比較。
七、總結(jié)
本文介紹了JavaScript中常見(jiàn)的數(shù)據(jù)類(lèi)型判斷方法，包括typeof操作符、instanceof操作符、Object.prototype.toString方法以及ES6新增的數(shù)據(jù)類(lèi)型判斷方法。通過(guò)這些技術(shù)，我們可以準(zhǔn)確地判斷數(shù)據(jù)類(lèi)型，從而正確地處理數(shù)據(jù)。需要根據(jù)具體情況選擇合適的方法來(lái)判斷數(shù)據(jù)類(lèi)型，以便于代碼的可讀性和可維護(hù)性。
以上就是詳解如何準(zhǔn)確判斷JavaScript中的數(shù)據(jù)類(lèi)型的詳細(xì)內(nèi)容，更多關(guān)于判斷JavaScript數(shù)據(jù)類(lèi)型的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
JS圖片懶加載技術(shù)實(shí)現(xiàn)過(guò)程解析
這篇文章主要介紹了JS圖片懶加載技術(shù)實(shí)現(xiàn)過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
這篇文章主要介紹了JS控制表單提交的方法,可實(shí)現(xiàn)基于javascript提交表單信息的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了js壓縮利器2007-02-02
mockjs,json-server一起搭建前端通用的數(shù)據(jù)模擬框架教程
下面小編就為大家分享一篇mockjs,json-server一起搭建前端通用的數(shù)據(jù)模擬框架教程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
基于javascript數(shù)組實(shí)現(xiàn)圖片輪播
這篇文章主要為大家詳細(xì)介紹了基于javascript數(shù)組實(shí)現(xiàn)圖片輪播的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-05-05
適用于javascript開(kāi)發(fā)者的Processing.js入門(mén)教程
這篇文章主要介紹了適用于javascript開(kāi)發(fā)者的Processing.js入門(mén)教程，感興趣的小伙伴們可以參考一下2016-02-02
基于JavaScript實(shí)現(xiàn)圖片點(diǎn)擊彈出窗口而不是保存
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)圖片點(diǎn)擊彈出窗口而不是保存的相關(guān)資料,需要的朋友可以參考下2016-02-02
JS實(shí)現(xiàn)HTML頁(yè)面中動(dòng)態(tài)顯示當(dāng)前時(shí)間完整示例
這篇文章主要介紹了JS實(shí)現(xiàn)HTML頁(yè)面中動(dòng)態(tài)顯示當(dāng)前時(shí)間,結(jié)合完整實(shí)例形式分析了JavaScript使用時(shí)間函數(shù)setTimeout及clearTimeout動(dòng)態(tài)顯示當(dāng)前時(shí)間相關(guān)操作技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2018-07-07
詳解微信小程序工程化探索之webpack實(shí)戰(zhàn)
這篇文章主要介紹了詳解微信小程序工程化探索之webpack實(shí)戰(zhàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
原生JS實(shí)現(xiàn)匯率轉(zhuǎn)換功能代碼實(shí)例
這篇文章主要介紹了原生JS實(shí)現(xiàn)匯率轉(zhuǎn)換功能代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05