JS中檢測(cè)數(shù)據(jù)類型的幾種方式及優(yōu)缺點(diǎn)小結(jié)
1、typeof 用來(lái)檢測(cè)數(shù)據(jù)類型的運(yùn)算符
typeof value 返回值首先是一個(gè)字符串,其次里面包含了對(duì)應(yīng)的數(shù)據(jù)類型,例如:"number"、"string"、"boolean"、"undefined"、"object"、"function"
局限性:
1)typeof null ->"object"
2)檢測(cè)的不管是數(shù)組還是正則都返回的是"object",所以typeof不能判斷一個(gè)值是否為數(shù)組
console.log(typeof [12, 23]);//->"Object"
2、instanceof/constructor
檢測(cè)某一個(gè)實(shí)例是否屬于某一個(gè)類
使用instanceof/constructor可以檢測(cè)數(shù)組和正則
console.log([] instanceof Array);//->true console.log(/^$/ instanceof RegExp);//->true console.log([] instanceof Object);//->true console.log([].constructor === Array);//->true console.log([].constructor === Object);//->false constructor可以避免instanceof檢測(cè)數(shù)組的時(shí)候,用Object也是true的問(wèn)題 console.log({}.constructor === Object);//true<br>console.log([].constructor === Object);//false
局限性:
1)用instanceof檢測(cè)的時(shí)候,只要當(dāng)前的這個(gè)類在實(shí)例的原型鏈上(可以通過(guò)原型鏈__proto__找到它),檢測(cè)出來(lái)的結(jié)果都是true
var oDiv = document.getElementById("div1"); //HTMLDivElement->HTMLElement->Element->Node->EventTarget->Object console.log(oDiv instanceof HTMLDivElement);//->true console.log(oDiv instanceof Node);//->true console.log(oDiv instanceof Object);//->true
2)基本數(shù)據(jù)類型的值是不能用instanceof來(lái)檢測(cè)的
console.log(1 instanceof Number);//->false
數(shù)組創(chuàng)建的兩種方式(對(duì)象、正則、函數(shù)...)
對(duì)于引用數(shù)據(jù)類型來(lái)說(shuō),我們兩種方式創(chuàng)建出來(lái)的都是所屬類的實(shí)例,而且都是對(duì)象數(shù)據(jù)類型的值,是沒有區(qū)別的
var ary = []; var ary = new Array;
對(duì)于基本數(shù)據(jù)類型來(lái)說(shuō),雖然不管哪一種方式創(chuàng)建出來(lái)的都是所屬類的一個(gè)實(shí)例(在類的原型上定義的方法都可以使用),但是字面量方式創(chuàng)建出來(lái)的是基本數(shù)據(jù)類型,而實(shí)例方式創(chuàng)建出來(lái)的是對(duì)象數(shù)據(jù)類型
var num1 = 1; var num2 = new Number("1"); console.log(typeof num1,typeof num2);//->"number" "object"
3)在類的原型繼承中,instanceof檢測(cè)出來(lái)的結(jié)果其實(shí)是不準(zhǔn)確的
function Fn() {} var f = new Fn; console.log(f instanceof Array);//->false f不是一個(gè)數(shù)組,它就是一個(gè)普通的實(shí)例(普通的對(duì)象)
雖然Fn繼承了Array,但是f沒有l(wèi)ength和數(shù)字索引哪些東西,所以f應(yīng)該不是數(shù)組才對(duì),但是用instanceof檢測(cè)的結(jié)果卻是true,因?yàn)閒雖然不是數(shù)組,但是在f的原型鏈上可以找到Array
function Fn() { } Fn.prototype = new Array;//->Fn子類繼承了Array這個(gè)父類中的屬性和方法 var f = new Fn; console.log(f instanceof Array);//->true
3、Object.prototype.toString.call(value) ->找到Object原型上的toString方法,讓方法執(zhí)行,并且讓方法中的this變?yōu)関alue(value->就是我們要檢測(cè)數(shù)據(jù)類型的值)
Object.prototype.toString常用來(lái)判斷對(duì)象值屬于哪種內(nèi)置屬性,它返回一個(gè)JSON字符串——"[object 數(shù)據(jù)類型]"。
由于許多引用類型都重寫了Object繼承來(lái)的的toStrong方法,所以我們通常使用call或者apply借用Object.prototype.toString函數(shù)來(lái)判斷數(shù)據(jù)類型。
當(dāng)然,這樣調(diào)用的默認(rèn)前提是Object.prototype.toString沒有被重寫。
toString:一個(gè)方法,轉(zhuǎn)換為字符串?dāng)?shù)據(jù)類型用的方法
每一個(gè)數(shù)據(jù)類型所屬類的原型上都有toString方法,例如:Number.prototype/String.prototype/Array.prototype/Function.prototype...
除了Object上的toString,其他類原型上的toString都是把當(dāng)前的數(shù)據(jù)值轉(zhuǎn)換為字符串的意思
null和undefined比較的特殊:他們所屬類Null/Undefined的原型上也有toString,只不過(guò)不讓我們用而已,不僅如此其實(shí)類的原型都給屏蔽了
HTML元素對(duì)象的toString:雖然它的原型鏈很長(zhǎng),但是在其它類的原型上都沒有toString,只有在最底層Object.prototype這上才有
var oDiv = document.getElementById("div1"); oDiv.toString(); //->調(diào)用的其實(shí)也是Object.prototype.toString... //alert、document.write 這兩種輸出的方式其實(shí)都是把要輸出的內(nèi)容先轉(zhuǎn)換為字符串,然后再輸出的<br> alert([]); //->"" alert(true); //->"true" alert({}); //->這個(gè)就要調(diào)用Object.prototype上的toString了 ->"[object Object]" //定義toString變量是為了簡(jiǎn)便書寫,同時(shí)降低作用域鏈檢索的性能損耗 var toString = Object.prototype.toString; console.log(toString.call(1));//[object Number] console.log(toString.call(undefined));//[object Undefined] console.log(toString.call(null));//[object Null] console.log(toString.call(false));//[object Boolean] console.log(toString.call("s"));//[object String] console.log(toString.call({}));//[object Object] console.log(toString.call(/[a]/g));//[object RegExp] console.log(toString.call(function(){}));//[object Function]
is系列函數(shù)的簡(jiǎn)易實(shí)現(xiàn)
在明白數(shù)據(jù)類型怎么檢測(cè)后,下面我們來(lái)簡(jiǎn)單實(shí)現(xiàn)is系列檢測(cè)函數(shù)。
var dataType = { '[object Null]' : 'null', '[object Undefined]' : 'undefiend', '[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' }, toString = Object.prototype.toString; function type(obj) { return dataType[toString.call(obj)]; } //生成is系列函數(shù) function createValidType() { for(var p in dataType) { var objType = p.slice(8, -1); (function(objType) { window['is' + objType] = function(obj) { return type(obj) === objType.toLowerCase(); } })(objType) } } createValidType(); console.log(isObject({}));//true console.log(isDate(new Date()));//true console.log(isBoolean(false));//true console.log(isString(1));//false console.log(isError(1));//false console.log(isError(new Error()));//true console.log(isArray([]));//true console.log(isArray(1));//false
上面代碼里分別實(shí)現(xiàn)了isNull、isUndefined、isBoolean、isNumber、isString、isFunction、isArray、isDate、isRegExp、isObject、isError這11個(gè)檢測(cè)函數(shù)。同時(shí)也實(shí)現(xiàn)了type函數(shù),用以檢測(cè)數(shù)據(jù)類型。
console.log(type({}));//"object" console.log(type(new Date()));//"date" console.log(type(false));//"boolean" console.log(type(1));//"number" console.log(type(1));//"number" console.log(type(new Error()));//"error" console.log(type([]));//"array" console.log(type(1));//"number"
createValidType函數(shù)巧用閉包保存數(shù)據(jù)狀態(tài)的特性,批量生成is系列函數(shù)。
以上所述是小編給大家介紹的JS中檢測(cè)數(shù)據(jù)類型的幾種方式及優(yōu)缺點(diǎn)小結(jié),希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- 淺談javascript的數(shù)據(jù)類型檢測(cè)
- 關(guān)于JS數(shù)據(jù)類型檢測(cè)的多種方式總結(jié)
- js數(shù)據(jù)類型檢測(cè)總結(jié)
- JavaScript中檢測(cè)數(shù)據(jù)類型的四種方法
- javascript基本數(shù)據(jù)類型及類型檢測(cè)常用方法小結(jié)
- 在javaScript中檢測(cè)數(shù)據(jù)類型的幾種方式小結(jié)
- JavaScript數(shù)據(jù)類型檢測(cè)代碼分享
- js學(xué)習(xí)總結(jié)_基于數(shù)據(jù)類型檢測(cè)的四種方式(必看)
- JS數(shù)組索引檢測(cè)中的數(shù)據(jù)類型問(wèn)題詳解
- js中各種數(shù)據(jù)類型檢測(cè)和判定的實(shí)戰(zhàn)示例
相關(guān)文章
深度剖析JavaScript作用域從局部到全局一網(wǎng)打盡
這篇文章主要為大家介紹了JavaScript作用域的深度剖析,從局部到全局一網(wǎng)打盡,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05深入解析ECMAScript?2023?中的新數(shù)組方法
ECMAScript?是一種標(biāo)準(zhǔn)化的腳本語(yǔ)言,它是?JavaScript?的規(guī)范。ECMAScript?2023?是?JavaScript?編程語(yǔ)言的更新,旨在帶來(lái)改進(jìn)并使?JavaScript?程序可預(yù)測(cè)和可維護(hù),這篇文章主要介紹了探索?ECMAScript?2023?中的新數(shù)組方法,需要的朋友可以參考下2023-12-12JavaScript函數(shù)重載操作實(shí)例淺析
這篇文章主要介紹了JavaScript函數(shù)重載操作,結(jié)合一次面試經(jīng)歷分析了JavaScript函數(shù)重載相關(guān)原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-05-05一個(gè)簡(jiǎn)單的JavaScript數(shù)據(jù)緩存系統(tǒng)實(shí)現(xiàn)代碼
數(shù)據(jù)緩存系統(tǒng),主要是將一些可復(fù)用的數(shù)據(jù)臨時(shí)存放一下,放下數(shù)據(jù)后面的再次調(diào)用。2010-10-10調(diào)整小數(shù)的格式保留小數(shù)點(diǎn)后兩位
調(diào)整小數(shù)的格式,如保留小數(shù)點(diǎn)后兩位等等在開發(fā)過(guò)程中經(jīng)常會(huì)遇到,下面本文搜集了一些不錯(cuò)的實(shí)現(xiàn)方法與分享2014-05-05js實(shí)現(xiàn)點(diǎn)擊添加一個(gè)input節(jié)點(diǎn)
本文給大家分享的是一段點(diǎn)擊自動(dòng)添加inpu節(jié)點(diǎn)的代碼,非常的簡(jiǎn)單實(shí)用,這里推薦給大家。2014-12-12JavaScript new對(duì)象的四個(gè)過(guò)程實(shí)例淺析
這篇文章主要介紹了JavaScript new對(duì)象的四個(gè)過(guò)程,結(jié)合實(shí)例形式簡(jiǎn)單分析了javascript面向?qū)ο蟪绦蛟O(shè)計(jì)中new對(duì)象的四個(gè)過(guò)程相關(guān)原理與實(shí)現(xiàn)方法,需要的朋友可以參考下2018-07-07微信小程序?qū)崿F(xiàn)表單驗(yàn)證提交功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)表單驗(yàn)證提交功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07