JavaScript中檢測(cè)數(shù)據(jù)類型的四種方法總結(jié)
檢測(cè)數(shù)據(jù)類型1:typeof
其返回結(jié)果都是字符串,字符串中包含了對(duì)應(yīng)的數(shù)據(jù)類型 number/string/boolean/undefined/symbol/object/function
;
局限性:檢測(cè)null
返回的是object
,檢測(cè)其他如數(shù)組、正則等特殊對(duì)象時(shí),返回的結(jié)果都是object
,無法區(qū)分具體類型。
console.log(typeof 12); //=>"number" console.log(typeof null); //=>"object" console.log(typeof []); //=>"object" console.log(typeof /^$/); //=>"object"
檢測(cè)數(shù)據(jù)類型2:instanceof
用于檢測(cè)某個(gè)實(shí)例是否屬于這個(gè)類,其檢測(cè)的底層機(jī)制是所有出現(xiàn)在其原型鏈上的類,檢測(cè)結(jié)果都是true
局限性:由于可以基于__proto__
或者prototype
改動(dòng)原型鏈的動(dòng)向,所以基于instanceof
檢測(cè)出來的結(jié)果并不一定是準(zhǔn)確的。而基本數(shù)據(jù)類型的值,連對(duì)象都不是,更沒有__proto__
,雖說也是所屬類的實(shí)例,在JS中也可以調(diào)取所屬類原型上的方法,但是instanceof
是不認(rèn)的。
console.log(12 instanceof Number); //false console.log(new Number(12) instanceof Number); //true console.log([] instanceof Array); //true console.log([] instanceof Object); //true function Fn() {} Fn.prototype.__proto__ = Array.prototype; let f = new Fn(); console.log(f instanceof Array); //true
檢測(cè)數(shù)據(jù)類型3:constructor
這是實(shí)例所屬類原型上的屬性,指向的是類本身,但其也是可以進(jìn)行修改,與instanceof
類似。
let arr = []; console.log(arr.constructor); //? Array() { [native code] } console.log(arr.constructor === Array); //true let n=12; console.log(n.constructor === Number); //true
檢測(cè)數(shù)據(jù)類型4:Object.prototype.toString.call([value]) / ({}).toString.call([value])
該方法不是用來轉(zhuǎn)換為字符串的,而是返回當(dāng)前實(shí)例所屬類的信息,其返回結(jié)果的格式為[object 所屬類信息]
,即[object Object/Array/RegExp/Date/Function/Null/Undefined/Number/String/Boolean/Symbol...]
。
這種方式基本上沒有什么局限性,是檢測(cè)數(shù)據(jù)類型相對(duì)來說最準(zhǔn)確的方式。
console.log(Object.prototype.toString.call(12)); //[object Number] console.log(Object.prototype.toString.call([])); //[object Array] console.log(Object.prototype.toString.call({})); //[object Object] function fn () {} console.log(({}).toString.call(fn)); //[object Function] console.log(({}).toString.call(/^$/)); //[object RegExp] console.log(({}).toString.call(new Date)); //[object Date]
雖然檢測(cè)數(shù)據(jù)類型4相對(duì)來說最好,但格式稍微繁瑣一些,是不是可以想辦法封裝一個(gè)方法,輸出結(jié)果類似于typeof
那種,直接輸出如number、date、regexp
這種,確實(shí)是有的。
var class2type = {}; var toString = class2type.toString; //=>Object.prototype.toString var hasOwn = class2type.hasOwnProperty; //=>Object.prototype.hasOwnProperty var fnToString = hasOwn.toString; //=>Function.prototype.toString var ObjectFunctionString = fnToString.call(Object); //=>Object.toString() =>"function Object() { [native code] }" "Boolean Number String Function Array Date RegExp Object Error Symbol".split(" ").forEach(function anonymous(item) { class2type["[object " + item + "]"] = item.toLowerCase(); }); console.log(class2type); /* [object Boolean]: "boolean" [object Number]: "number" [object String]: "string" [object Function]: "function" [object Array]: "array" [object Date]: "date" [object RegExp]: "regexp" [object Object]: "object" [object Error]: "error" [object Symbol]: "symbol" */ function toType(obj) { //=>obj may be null / undefined //=>return "null"/"undefined" if (obj == null) { return obj + ""; } return typeof obj === "object" || typeof obj === "function" ? class2type[toString.call(obj)] || "object" : typeof obj; }
這是jQuery
中用來檢測(cè)數(shù)據(jù)的方法,可以達(dá)到我們說的需求。
當(dāng)然,現(xiàn)在公司的項(xiàng)目中用jQuery
的已經(jīng)不多了,面試會(huì)問的就更少了,但是其中的很多方法和思想還是值得我們?nèi)パ芯俊?/p>
到此這篇關(guān)于JavaScript中檢測(cè)數(shù)據(jù)類型的四種方法總結(jié)的文章就介紹到這了,更多相關(guān)JavaScript檢測(cè)數(shù)據(jù)類型內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
聊聊JavaScript中的try...catch使用小技巧
作為一名web前端工程師,JavaScript中的try...catch是我們常用的特性之一,用于處理代碼中可能出現(xiàn)的錯(cuò)誤,本文小編將和大家一起聊聊JavaScript中的try...catch使用小技巧,需要的朋友可以參考下2023-11-11『JavaScript』限制Input只能輸入數(shù)字實(shí)現(xiàn)思路及代碼
一個(gè)文字方塊必須限制只能輸入數(shù)字(或是小數(shù)點(diǎn))并且要支援 IE 和 Firefox,接下來為大家介紹下如何解決這個(gè)需求2013-04-04使用JS模擬錨點(diǎn)跳轉(zhuǎn)的實(shí)例
下面小編就為大家分享一篇使用JS模擬錨點(diǎn)跳轉(zhuǎn)的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02JS獲取dom 對(duì)象 ajax操作 讀寫cookie函數(shù)
一些常用的JS (JONEAjax) 獲取dom 對(duì)象,ajax操作,讀寫cookie類代碼,需要的朋友可以參考下。2009-11-11JavaScript+Canvas實(shí)現(xiàn)彩色圖片轉(zhuǎn)換成黑白圖片的方法分析
這篇文章主要介紹了JavaScript+Canvas實(shí)現(xiàn)彩色圖片轉(zhuǎn)換成黑白圖片的方法,結(jié)合實(shí)例形式分析了javascript結(jié)合HTML5相關(guān)函數(shù)修改頁面圖片元素顯示效果相關(guān)操作技巧,需要的朋友可以參考下2018-07-07JavaScript開發(fā)中需要搞懂的字符編碼總結(jié)
字符集就是字符的集合,字符編碼則代表字符集的實(shí)際編碼規(guī)則,是用于計(jì)算機(jī)解析字符的。本文為大家整理了JavaScript開發(fā)中需要搞懂的字符編碼,希望對(duì)大家有所幫助2023-02-02