JS中检测数据类型的几种方式及优缺点小结
1、typeof用来检测数据类型的运算符
typeofvalue返回值首先是一个字符串,其次里面包含了对应的数据类型，例如:"number"、"string"、"boolean"、"undefined"、"object"、"function"
局限性:
1)typeofnull->"object"
2)检测的不管是数组还是正则都返回的是"object",所以typeof不能判断一个值是否为数组
console.log(typeof[12,23]);//->"Object"
2、instanceof/constructor
检测某一个实例是否属于某一个类
使用instanceof/constructor可以检测数组和正则
console.log([]instanceofArray);//->true
console.log(/^$/instanceofRegExp);//->true
console.log([]instanceofObject);//->true
console.log([].constructor===Array);//->true
console.log([].constructor===Object);//->false
constructor可以避免instanceof检测数组的时候,用Object也是true的问题
console.log({}.constructor===Object);//true<br>console.log([].constructor===Object);//false
局限性：
1)用instanceof检测的时候,只要当前的这个类在实例的原型链上(可以通过原型链__proto__找到它),检测出来的结果都是true
varoDiv=document.getElementById("div1");
//HTMLDivElement->HTMLElement->Element->Node->EventTarget->Object
console.log(oDivinstanceofHTMLDivElement);//->true
console.log(oDivinstanceofNode);//->true
console.log(oDivinstanceofObject);//->true
2)基本数据类型的值是不能用instanceof来检测的
console.log(1instanceofNumber);//->false
数组创建的两种方式(对象、正则、函数...)
对于引用数据类型来说,我们两种方式创建出来的都是所属类的实例,而且都是对象数据类型的值,是没有区别的
varary=[]; varary=newArray;
对于基本数据类型来说,虽然不管哪一种方式创建出来的都是所属类的一个实例(在类的原型上定义的方法都可以使用),但是字面量方式创建出来的是基本数据类型,而实例方式创建出来的是对象数据类型
varnum1=1;
varnum2=newNumber("1");
console.log(typeofnum1,typeofnum2);//->"number""object"
3)在类的原型继承中,instanceof检测出来的结果其实是不准确的
functionFn(){}
varf=newFn;
console.log(finstanceofArray);//->falsef不是一个数组,它就是一个普通的实例(普通的对象)
虽然Fn继承了Array,但是f没有length和数字索引哪些东西,所以f应该不是数组才对,但是用instanceof检测的结果却是true,因为f虽然不是数组,但是在f的原型链上可以找到Array
functionFn(){
}
Fn.prototype=newArray;//->Fn子类继承了Array这个父类中的属性和方法
varf=newFn;
console.log(finstanceofArray);//->true
3、Object.prototype.toString.call(value)->找到Object原型上的toString方法,让方法执行,并且让方法中的this变为value(value->就是我们要检测数据类型的值)
Object.prototype.toString常用来判断对象值属于哪种内置属性，它返回一个JSON字符串——"[object数据类型]"。
由于许多引用类型都重写了Object继承来的的toStrong方法，所以我们通常使用call或者apply借用Object.prototype.toString函数来判断数据类型。
当然，这样调用的默认前提是Object.prototype.toString没有被重写。
toString:一个方法,转换为字符串数据类型用的方法
每一个数据类型所属类的原型上都有toString方法,例如:Number.prototype/String.prototype/Array.prototype/Function.prototype...
除了Object上的toString,其他类原型上的toString都是把当前的数据值转换为字符串的意思
null和undefined比较的特殊:他们所属类Null/Undefined的原型上也有toString,只不过不让我们用而已,不仅如此其实类的原型都给屏蔽了
HTML元素对象的toString:虽然它的原型链很长,但是在其它类的原型上都没有toString,只有在最底层Object.prototype这上才有
varoDiv=document.getElementById("div1");
oDiv.toString();//->调用的其实也是Object.prototype.toString...
//alert、document.write这两种输出的方式其实都是把要输出的内容先转换为字符串,然后再输出的<br>
alert([]);//->""
alert(true);//->"true"
alert({});//->这个就要调用Object.prototype上的toString了->"[objectObject]"
//定义toString变量是为了简便书写，同时降低作用域链检索的性能损耗
vartoString=Object.prototype.toString;
console.log(toString.call(1));//[objectNumber]
console.log(toString.call(undefined));//[objectUndefined]
console.log(toString.call(null));//[objectNull]
console.log(toString.call(false));//[objectBoolean]
console.log(toString.call("s"));//[objectString]
console.log(toString.call({}));//[objectObject]
console.log(toString.call(/[a]/g));//[objectRegExp]
console.log(toString.call(function(){}));//[objectFunction]
is系列函数的简易实现
在明白数据类型怎么检测后，下面我们来简单实现is系列检测函数。
vardataType={
'[objectNull]':'null',
'[objectUndefined]':'undefiend',
'[objectBoolean]':'boolean',
'[objectNumber]':'number',
'[objectString]':'string',
'[objectFunction]':'function',
'[objectArray]':'array',
'[objectDate]':'date',
'[objectRegExp]':'regexp',
'[objectObject]':'object',
'[objectError]':'error'
},
toString=Object.prototype.toString;
functiontype(obj){
returndataType[toString.call(obj)];
}
//生成is系列函数
functioncreateValidType(){
for(varpindataType){
varobjType=p.slice(8,-1);
(function(objType){
window['is'+objType]=function(obj){
returntype(obj)===objType.toLowerCase();
}
})(objType)
}
}
createValidType();
console.log(isObject({}));//true
console.log(isDate(newDate()));//true
console.log(isBoolean(false));//true
console.log(isString(1));//false
console.log(isError(1));//false
console.log(isError(newError()));//true
console.log(isArray([]));//true
console.log(isArray(1));//false
上面代码里分别实现了isNull、isUndefined、isBoolean、isNumber、isString、isFunction、isArray、isDate、isRegExp、isObject、isError这11个检测函数。同时也实现了type函数，用以检测数据类型。
console.log(type({}));//"object"
console.log(type(newDate()));//"date"
console.log(type(false));//"boolean"
console.log(type(1));//"number"
console.log(type(1));//"number"
console.log(type(newError()));//"error"
console.log(type([]));//"array"
console.log(type(1));//"number"
createValidType函数巧用闭包保存数据状态的特性，批量生成is系列函数。
以上所述是小编给大家介绍的JS中检测数据类型的几种方式及优缺点小结，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！