詳解如何準確判斷JavaScript中的數(shù)據(jù)類型
一、前言
在JavaScript中，我們經(jīng)常需要判斷數(shù)據(jù)類型以便于正確地處理數(shù)據(jù)。本文將介紹JavaScript中的數(shù)據(jù)類型判斷技術，包括typeof操作符、instanceof操作符、Object.prototype.toString方法以及ES6新增的一些數(shù)據(jù)類型判斷方法。
二、typeof 操作符
操作符typeof用于判斷一個值的數(shù)據(jù)類型，返回的結果是一個字符串。常見的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ù)類型。這是一個歷史遺留問題，不能用來判斷null值。如果要判斷null值，可以使用"==="運算符。 typeof判斷所有引用類型都是輸出object，除了函數(shù)function，用typeof判斷函數(shù)類型輸出的是function。
三、instanceof 操作符
instanceof操作符用于判斷一個對象是否屬于某個類（構造函數(shù)）的實例。它會檢查對象的原型鏈是否包含構造函數(shù)的原型對象。
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) //報錯
console.log(undefined instanceof undefined) //報錯需要注意的是，typeof null返回的是object而不是null，typeof能判斷除了null之外的所有數(shù)據(jù)類型。這是一個歷史遺留問題，不能用來判斷null值。如果要判斷null值，可以使用"==="運算符。 typeof判斷所有引用類型都是輸出object，除了函數(shù)function，用typeof判斷函數(shù)類型輸出的是function。
四、Object.prototype.toString 方法
Object.prototype.toString方法可以返回一個對象的數(shù)據(jù)類型。它比typeof和instanceof更加準確和全面，可以判斷基本數(shù)據(jù)類型和各種對象類型。
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，就會輸出[object Object]，加上后才能準確判斷。我們仔細觀察一下，發(fā)現(xiàn)輸出的結果中并不全是我們需要的信息，我們似乎只需要后半部分。那么怎樣只輸出后半部分呢？
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因代碼過長不便展示，請各位自行加上console.log()。前半部分的[object是固定的，后半部分長度不固定，所以我們這里采用slice(8,-1)，8表示從第八位開始截取，不包括第八位，-1表示從右往左數(shù)除掉一位，也就是去掉右中括號。
五、ES6 新增的數(shù)據(jù)類型判斷方法
ES6新增了一些數(shù)據(jù)類型判斷方法，包括Number.isNaN、Number.isFinite、Array.isArray、Object.is等方法。
1. Number.isNaN
Number.isNaN方法用于判斷一個值是否為NaN，它比全局的isNaN方法更加嚴格，只有在值為NaN時返回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方法用于判斷一個值是否為有限數(shù)值，它在值為Infinity、-Infinity和NaN時返回false，其他情況都返回true。Number.isFinite只能判斷數(shù)值類型的數(shù)據(jù)是否為有限數(shù)值，對于其他數(shù)據(jù)類型返回都是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方法用于判斷一個值是否為數(shù)組類型。
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方法用于比較兩個值是否相等，它比全局的===運算符更加嚴格，可以判斷NaN值和-0和+0的差別，使用Object.is方法能夠更加準確地比較兩個值是否相等。
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 和 "== 、==="
在實際編寫JavaScript程序時，需要注意一些細節(jié)問題，以避免出現(xiàn)不必要的錯誤或者行為不符合預期的情況。以下是一些常見的問題和解決方法。
1. NaN
NaN是Not A Number的縮寫，NaN不是一種數(shù)據(jù)類型，它屬于number類型，NaN是一個特殊的值，與任何值都不相等，包括它自己。因此，判斷一個值是否為NaN需要使用isNaN()函數(shù)。
2. ==（兩個等號）和 ===（三個等號）
在JavaScript中，==和===都是用來比較兩個值是否相等的運算符。它們的主要區(qū)別在于比較的嚴格程度和類型轉換的方式。==（相等運算符）：在進行比較時會進行類型轉換，如果兩個值的類型不同，會將它們轉換為相同的類型再進行比較。===（嚴格相等運算符）：在進行比較時不會進行類型轉換，如果兩個值的類型不同，直接返回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
因為null和undefined都是JavaScript中的特殊值，使用==時被認為是相等的。
需要注意的是，由于==會進行類型轉換，因此可能會出現(xiàn)一些奇怪的結果。
console.log(null == 0); //false，null會被轉換為數(shù)字0
console.log(null < 1); //true，null會被轉換為數(shù)字0
console.log("5" == 5); //true，字符串"5"會被轉換為數(shù)字5
console.log(true == 1); //true，true會被轉換為數(shù)字1需要注意，雖然null會被轉成數(shù)字0，但是null == 0仍然輸出false。 因此，在比較兩個值時，建議使用===，這樣可以避免由于類型轉換等原因導致的錯誤比較。
七、總結
本文介紹了JavaScript中常見的數(shù)據(jù)類型判斷方法，包括typeof操作符、instanceof操作符、Object.prototype.toString方法以及ES6新增的數(shù)據(jù)類型判斷方法。通過這些技術，我們可以準確地判斷數(shù)據(jù)類型，從而正確地處理數(shù)據(jù)。需要根據(jù)具體情況選擇合適的方法來判斷數(shù)據(jù)類型，以便于代碼的可讀性和可維護性。
以上就是詳解如何準確判斷JavaScript中的數(shù)據(jù)類型的詳細內(nèi)容，更多關于判斷JavaScript數(shù)據(jù)類型的資料請關注腳本之家其它相關文章！
相關文章
解決echarts的多個折現(xiàn)數(shù)據(jù)出現(xiàn)坐標和值對不上的問題
這篇文章主要介紹了解決echarts的多個折現(xiàn)數(shù)據(jù)出現(xiàn)坐標和值對不上的問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了小程序bindtap事件與冒泡阻止詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-08-08
數(shù)據(jù)結構中的各種排序方法小結(JS實現(xiàn))
下面小編就為大家?guī)硪黄獢?shù)據(jù)結構中的各種排序方法小結(JS實現(xiàn))。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
實例詳解JavaScript靜態(tài)作用域和動態(tài)作用域
作用域是指程序源代碼中定義變量的區(qū)域,作用域規(guī)定了如何查找變量，也就是確定當前執(zhí)行代碼對變量的訪問權限,這篇文章主要給大家介紹了關于JavaScript靜態(tài)作用域和動態(tài)作用域的相關資料,需要的朋友可以參考下2021-10-10
這篇文章主要介紹了JS彈出窗口插件zDialog簡單用法,結合簡單實例形式分析了zDialog插件彈出窗口的基本使用方法與參數(shù)含義,需要的朋友可以參考下2016-06-06
下面小編就為大家?guī)硪黄猨s通過classname來獲取元素的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起 小編過來看看吧2016-11-11
這篇文章介紹了驗證手機號碼的JS方法，有需要的朋友可以參考一下2013-09-09
js實現(xiàn)輪播圖效果 z-index實現(xiàn)輪播圖
這篇文章主要為大家詳細介紹了js實現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
javascript 實現(xiàn)子父窗體互相傳值的簡單實例
本篇文章主要是對javascript 實現(xiàn)子父窗體互相傳值的簡單實例進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
javascript 通用簡單的table選項卡實現(xiàn)
鑒于UI妹妹每次交付過來的選項卡都夾帶了多多少少的js，而且每遇到選項卡就加一點js，造成垃圾低劣代碼逐漸堆積過多了，一直想做一個通用簡潔的選項卡庫。2010-05-05