JavaScript 判斷數(shù)據(jù)類型的4種方法
本文提供四種方法判斷js數(shù)據(jù)類型，這里記錄了它們之間的差異，分別是 typeof 運算符、instanceof 運算符、constructor 屬性、Object.prototype.toString 方法。
一、使用 typeof 判斷數(shù)據(jù)類型
console.log('測試 Number ->', typeof 1); // number
console.log('測試 Boolean ->', typeof true); // boolean
console.log('測試 String ->', typeof ''); // string
console.log('測試 null ->', typeof null); // object
console.log('測試 undefined ->', typeof undefined); // undefined
console.log('測試 NaN ->', typeof NaN); // number
console.log('測試 function ->', typeof function () { }); // function
console.log('測試 Object ->', typeof {}); // object
console.log('測試 Array ->', typeof []); // object
console.log('測試 Date ->', typeof new Date()); // object
console.log('測試 Error ->', typeof new Error()); // object
console.log('測試 RegExp ->', typeof new RegExp()); // object
console.log('測試 Symbol ->', typeof Symbol()); // symbol
console.log('測試 Map ->', typeof new Map()); // object
console.log('測試 Set ->', typeof new Set()); // object
控制臺輸出如下：
測試 Number -> number
測試 Boolean -> boolean
測試 String -> string
測試 null -> object
測試 undefined -> undefined
測試 NaN -> number
測試 function -> function
測試 Object -> object
測試 Array -> object
測試 Date -> object
測試 Error -> object
測試 RegExp -> object
測試 Symbol -> symbol
測試 Map -> object
測試 Set -> object
總結(jié)：
1、typeof只能判斷:
- String(返回string),
- Number(返回number),
- Boolean(返回boolean),
- undefined(返回undefined),
- function(返回function),
- Symbol(返回symbol)
2、對于new構(gòu)造出來的都是返回object
3、對于Object和Array都是返回object
二、使用 instanceof 判斷數(shù)據(jù)類型
console.log('測試 Number ->', 1 instanceof Number); // false
console.log('測試 Boolean ->', true instanceof Boolean); // false
console.log('測試 String ->', '' instanceof String); // false
// console.log('測試 null ->', null instanceof null); // TypeError: Cannot read property 'constructor' of null
// console.log('測試 undefined ->', undefined instanceof undefined); // TypeError: Cannot read property 'constructor' of undefined
console.log('測試 NaN ->', NaN instanceof Number); // false
console.log('測試 function ->', function () { } instanceof Function); // true
console.log('測試 Object ->', {} instanceof Object); // true
console.log('測試 Array ->', [] instanceof Array); // true
console.log('測試 Date ->', new Date() instanceof Date); // true
console.log('測試 Error ->', new Error() instanceof Error); // true
console.log('測試 RegExp ->', new RegExp() instanceof RegExp); // true
console.log('測試 Symbol ->', Symbol() instanceof Symbol); // false
console.log('測試 Map ->', new Map() instanceof Map); // true
console.log('測試 Set ->', new Set() instanceof Set); // true
console.log('測試 new Number ->', new Number(1) instanceof Number); // true
console.log('測試 new Boolean ->', new Boolean(true) instanceof Boolean); // true
console.log('測試 new String ->', new String('') instanceof String); // true
控制臺輸出如下：
測試 Number -> false
測試 Boolean -> false
測試 String -> false
測試 NaN -> false
測試 function -> true
測試 Object -> true
測試 Array -> true
測試 Date -> true
測試 Error -> true
測試 RegExp -> true
測試 Symbol -> false
測試 Map -> true
測試 Set -> true
測試 new Number -> true
測試 new Boolean -> true
測試 new String -> true
總結(jié)：
1、不能判斷 null,undefined
2、基本數(shù)據(jù)類型 Number,String,Boolean 不能被判斷
3、instanceof 用來判斷對象是否為某一數(shù)據(jù)類型的實例，
上例中1,true,''不是實例，所以判斷為false
三、使用 constructor 判斷數(shù)據(jù)類型
console.log('測試 Number ->', (1).constructor === Number); // true
console.log('測試 Boolean ->', true.constructor === Boolean); // true
console.log('測試 String ->', ''.constructor === String); // true
// console.log('測試 null ->', null.constructor === null); // TypeError: Cannot read property 'constructor' of null
// console.log('測試 undefined ->', undefined.constructor); // TypeError: Cannot read property 'constructor' of undefined
console.log('測試 NaN ->', NaN.constructor === Number); // true 注意:NaN和infinity一樣是Number類型的一個特殊值
console.log('測試 function ->', function () { }.constructor === Function); // true
console.log('測試 Object ->', {}.constructor === Object); // true
console.log('測試 Array ->', [].constructor === Array); // true
console.log('測試 Date ->', new Date().constructor === Date); // true
console.log('測試 Error ->', new Error().constructor === Error); // true
console.log('測試 RegExp ->', new RegExp().constructor === RegExp); // true
console.log('測試 Symbol ->', Symbol().constructor === Symbol); // true
console.log('測試 Map ->', new Map().constructor === Map); // true
console.log('測試 Set ->', new Set().constructor === Set); // true
控制臺輸出如下：
測試 Number -> true
測試 Boolean -> true
測試 String -> true
測試 NaN -> true
測試 function -> true
測試 Object -> true
測試 Array -> true
測試 Date -> true
測試 Error -> true
測試 RegExp -> true
測試 Symbol -> true
測試 Map -> true
測試 Set -> true
總結(jié)：
不能判斷null,undefined,其它的都可以
四、使用 Object.prototype.toString 判斷數(shù)據(jù)類型
console.log('測試 Number ->', Object.prototype.toString.call(1)); // [object Number]
console.log('測試 Boolean ->', Object.prototype.toString.call(true)); // [object Boolean]
console.log('測試 String ->', Object.prototype.toString.call('')); // [object String]
console.log('測試 null ->', Object.prototype.toString.call(null)); // [object Null]
console.log('測試 undefined ->', Object.prototype.toString.call(undefined)); // [object Undefined]
console.log('測試 NaN ->', Object.prototype.toString.call(NaN)); // [object Number]
console.log('測試 function ->', Object.prototype.toString.call(function () { })); // [object Function]
console.log('測試 Object ->', Object.prototype.toString.call({})); // [object Object]
console.log('測試 Array ->', Object.prototype.toString.call([])); // [object Array]
console.log('測試 Date ->', Object.prototype.toString.call(new Date())); // [object Date]
console.log('測試 Error ->', Object.prototype.toString.call(new Error())); // [object Error]
console.log('測試 RegExp ->', Object.prototype.toString.call(new RegExp())); // [object RegExp]
console.log('測試 Symbol ->', Object.prototype.toString.call(Symbol())); // [object Symbol]
console.log('測試 Map ->', Object.prototype.toString.call(new Map())); // [object Map]
console.log('測試 Set ->', Object.prototype.toString.call(new Set())); // [object Set]
控制臺輸出如下：
測試 Number -> [object Number]
測試 Boolean -> [object Boolean]
測試 String -> [object String]
測試 null -> [object Null]
測試 undefined -> [object Undefined]
測試 NaN -> [object Number]
測試 function -> [object Function]
測試 Object -> [object Object]
測試 Array -> [object Array]
測試 Date -> [object Date]
測試 Error -> [object Error]
測試 RegExp -> [object RegExp]
測試 Symbol -> [object Symbol]
測試 Map -> [object Map]
測試 Set -> [object Set]
總結(jié)：
目前最完美的判斷數(shù)據(jù)類型的方法
結(jié)語：以上為筆者的測試和總結(jié)。如有誤或不完整地方，歡迎各位老鐵指正。
以上就是JavaScript 判斷數(shù)據(jù)類型的4種方法的詳細(xì)內(nèi)容，更多關(guān)于JavaScript判斷數(shù)據(jù)類型的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
也說JavaScript中String類的replace函數(shù)
最近讀了sharpxiajun的博文《javascript筆記--String類replace函數(shù)的一些事》，感覺寫的很好，很有幫助。2011-09-09
D3.js實現(xiàn)簡潔實用的動態(tài)儀表盤的示例
本篇文章主要介紹了D3.js實現(xiàn)簡潔實用的動態(tài)儀表盤的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
JS實現(xiàn)動態(tài)添加DOM節(jié)點和事件的方法示例
這篇文章主要介紹了JS實現(xiàn)動態(tài)添加DOM節(jié)點和事件的方法,涉及javascript事件響應(yīng)及針對頁面dom元素節(jié)點與屬性的動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2017-04-04
最近萌生了用ECMAScript6寫一個輪播圖的想法，以前就知道ECMAScript6，但是一直沒有學(xué)，現(xiàn)在終于下決心學(xué)了，本篇文章會總結(jié)在實踐中用到的ES6的知識。2016-08-08
JavaScript中Object基礎(chǔ)內(nèi)部方法圖
本篇文章通過一張詳細(xì)的JavaScript中Object基礎(chǔ)內(nèi)部方法圖介紹了其基本用法，需要的朋友參考下。2018-02-02
js在客戶端驗證密碼強(qiáng)度，兼容FireFox和IE
js在客戶端驗證密碼強(qiáng)度，兼容FireFox和IE...2007-05-05
這篇文章主要介紹了詳解redux異步操作實踐，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
學(xué)習(xí)javascript面向?qū)ο?掌握創(chuàng)建對象的9種方式
這篇文章主要為大家介紹了創(chuàng)建對象的9種方式，幫助大家更好地學(xué)習(xí)javascript面向?qū)ο?，感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要為大家詳細(xì)介紹了微信小程序云開發(fā)如何使用npm安裝依賴，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
JavaScript Event事件學(xué)習(xí)第一章 Event介紹
Events是每一個JavaScript程序核心。什么是事件處理，它有什么問題和怎樣寫出跨瀏覽器的代碼，我將在這一章做一個概述。我也會提供一些有精彩的關(guān)于事件處理程序的細(xì)節(jié)的文章。2010-02-02