JavaScript 的數(shù)據(jù)類型檢測是我們平時(shí)開發(fā)中經(jīng)常會(huì)遇到的場景,小到基本數(shù)據(jù)類型大至各種引用數(shù)據(jù)類型的檢測醉锅,都是我們需要掌握的知識(shí)點(diǎn)逃贝。本章會(huì)詳細(xì)講解 JavaScript 中各種不同數(shù)據(jù)類型的檢測方法以及最后會(huì)實(shí)現(xiàn)一個(gè)數(shù)據(jù)類型檢測的終極方法。
紅寶石書告訴我們宋距,JavaScript 中的數(shù)據(jù)類型有 Undefined、Null、Boolean、Number沪摄、String、Object壶唤,其中前五種是基本類型,而 Object 是引用類型棕所。實(shí)際上闸盔,Object 中還包含了其它更為具體的引用類型,如 Array琳省、Function迎吵、Date、RegExp针贬、Error击费、Arguments 等。
在本章的敘述中桦他,我都會(huì)以上述 12 種數(shù)據(jù)類型為基礎(chǔ)來說明不同的檢測方式(實(shí)際上 JavaScript 中數(shù)據(jù)類型不止 12 種蔫巩,其它數(shù)據(jù)類型我們鮮少碰到,所以在此就不多做贅述啦)快压。
我們通常用來檢測數(shù)據(jù)類型的方法圆仔,分別是 typeof 和 Object.prototype.toString,讓我們仔細(xì)來看看這兩個(gè)方法蔫劣。
我們通常用來檢測數(shù)據(jù)類型的方法坪郭,分別是
typeof
Object.protype.toString.call()
1.typeof 操作符
typeof關(guān)鍵字返回的值都是字符串
適用場景:可以判斷基本數(shù)據(jù)類型,但null除外,不能判斷引用數(shù)據(jù)類型但function除外
var und=undefined;
var nul=null;
var boo=true;
var num=1;
var str='xys'
var obj=new Object();
var arr=[1,2,3];
var fun=function(){}
var date=new Date();
var reg = /a/g;
var err=new Error()
var arg;
(function getArg(){
arg=arguments;
})();
console.log(typeof und); // undefined
console.log(typeof nul); // object
console.log(typeof boo); // boolean
console.log(typeof num); // number
console.log(typeof str); // string
console.log(typeof obj); // object
console.log(typeof arr); // object
console.log(typeof fun); // function
console.log(typeof date); // object
console.log(typeof reg); // object
console.log(typeof err); // object
console.log(typeof arg); // object
可以看到脉幢,使用 typeof 方法來檢測數(shù)據(jù)類型截粗,基本類型大部分都能被準(zhǔn)確檢測并返回正確的字符串(除了 Null 類型信姓,其返回 object 字符串),而引用類型大部分都不能夠被準(zhǔn)確檢測(除了 Function 類型能夠準(zhǔn)確返回 function 字符串外绸罗,其它的都返回了 object 字符串)。
由此可得豆瘫,typeof 方法并不能夠完全精準(zhǔn)地檢測出上述 JavaScript 中的 12 中數(shù)據(jù)類型珊蟀。
2.Object.prototype.toString.call()
ES5 規(guī)范中是這么描述 Object.prototype.toString 的:
可以知道,Object.prototype.toString 最終會(huì)返回形式如 [object,class] 的字符串外驱,class 指代的是其檢測出的數(shù)據(jù)類型育灸,這個(gè)是我們判斷數(shù)據(jù)類型的關(guān)鍵。
同樣的昵宇,讓我們來看下使用 Object.prototype.toString 來檢測上述列舉到的 12 種數(shù)據(jù)類型都會(huì)返回什么樣的結(jié)果:
var toString=Object.prototype.toString;
console.log(toString.call(und)); // [object Undefined]
console.log(toString.call(nul)); // [object Null]
console.log(toString.call(boo)); // [object Boolean]
console.log(toString.call(num)); // [object Number]
console.log(toString.call(str)); // [object String]
console.log(toString.call(obj)); // [object Object]
console.log(toString.call(arr)); // [object Array]
console.log(toString.call(fun)); // [object Function]
console.log(toString.call(date)); // [object Date]
console.log(toString.call(reg)); // [object RegExp]
console.log(toString.call(err)); // [object Error]
console.log(toString.call(arg)); // [object Arguments]
可以看到磅崭,Object.prototype.toString 返回的 [object,class] 字符串中,class 準(zhǔn)確的表示了各個(gè)數(shù)據(jù)的類型瓦哎,與 typeof 不同的是砸喻,class 所代表的數(shù)據(jù)類型字符串首字母是大寫的,而不像 typeof 返回的是小寫字符串蒋譬。
數(shù)據(jù)類型檢測終極方法
/**
* @desc 數(shù)據(jù)類型檢測
* @param obj 待檢測的數(shù)據(jù)
* @return {String} 類型字符串
*/
function type(obj) {
return typeof obj !== "object" ? typeof obj : Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
}
數(shù)據(jù)類型的單獨(dú)檢測
有時(shí)我們希望直接判斷一個(gè)數(shù)據(jù)是否是某個(gè)類型割岛,那么我們可以單獨(dú)實(shí)現(xiàn)這些判斷某個(gè)數(shù)據(jù)類型的函數(shù),這里直接給出各個(gè)函數(shù)的實(shí)現(xiàn)代碼犯助,需要的童鞋可以直接使用癣漆。
/**
* @desc 是否是 Undefined 類型檢測
* @param obj 待檢測的數(shù)據(jù)
* @return {Boolean} 布爾值
*/
function isUndefined(obj) {
return obj === void 0;
}
/**
* @desc 是否是 Null 類型檢測
* @param obj 待檢測的數(shù)據(jù)
* @return {Boolean} 布爾值
*/
function isNull(obj) {
return obj === null;
}
/**
* @desc 是否是 Boolean 類型檢測
* @param obj 待檢測的數(shù)據(jù)
* @return {Boolean} 布爾值
*/
function isBoolean(obj) {
return typeof(obj) === 'boolean';
}
/**
* @desc 是否是 Number 類型檢測
* @param obj 待檢測的數(shù)據(jù)
* @return {Boolean} 布爾值
*/
function isNumber(obj) {
return typeof(obj) === 'number';
}
/**
* @desc 是否是 String 類型檢測
* @param obj 待檢測的數(shù)據(jù)
* @return {Boolean} 布爾值
*/
function isString(obj) {
return typeof(obj) === 'string';
}
/**
* @desc 是否是 Object 類型檢測
* @param obj 待檢測的數(shù)據(jù)
* @return {Boolean} 布爾值
*/
function isObject(obj) {
return Object.prototype.toString.call(obj) === '[object Object]';
}
/**
* @desc 是否是 Array 類型檢測
* @param obj 待檢測的數(shù)據(jù)
* @return {Boolean} 布爾值
*/
function isArray(obj){
return Array.isArray?Array.isArray(obj):Object.prototype.toString.call(obj) === '[object Array]';
}
/**
* @desc 是否是 Function 類型檢測
* @param obj 待檢測的數(shù)據(jù)
* @return {Boolean} 布爾值
*/
function isFunction(obj){
return typeof(obj) === 'function';
}
/**
* @desc 是否是 Date 類型檢測
* @param obj 待檢測的數(shù)據(jù)
* @return {Boolean} 布爾值
*/
function isDate(obj){
return Object.prototype.toString.call(obj) === '[object Date]';
}
/**
* @desc 是否是 RegExp 類型檢測
* @param obj 待檢測的數(shù)據(jù)
* @return {Boolean} 布爾值
*/
function isRegExp(obj){
return Object.prototype.toString.call(obj) === '[object RegExp]';
}
/**
* @desc 是否是 Error 類型檢測
* @param obj 待檢測的數(shù)據(jù)
* @return {Boolean} 布爾值
*/
function isError(obj){
return Object.prototype.toString.call(obj) === '[object Error]';
}
/**
* @desc 是否是 Arguments 類型檢測
* @param obj 待檢測的數(shù)據(jù)
* @return {Boolean} 布爾值
*/
function isArguments(obj){
return Object.prototype.toString.call(obj) === '[object Arguments]';
}
作者:淘淘笙悅
鏈接:https://juejin.cn/post/6844903682018902029
來源:稀土掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)剂买,非商業(yè)轉(zhuǎn)載請注明出處惠爽。