如何在javascript中对数据类型进行检测

tangjin

作者

如何在javascript中对数据类型进行检测？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

在javascript中数据类型

如何在javascript中对数据类型进行检测

值类型: 布尔(Boolean)，数值(Number)，字符(String)，空(Null)，未定义(Undefined)

引用类型: 对象(Object)，函数(Function)，数组(Array)，日期(Date)，正则(RegExp)等等。

检测方式之 typeof

console.log(typeofundefined)//'undefined'
console.log(typeofnull)//object
console.log(typeoftrue)//'boolean'
console.log(typeof123)//'number'
console.log(typeofNaN)//'number'
console.log(typeof"abc")//'string'
console.log(typeoffunction(){})//'function'
vararr=[];
console.log(typeof{})//'object'
console.log(typeofarr)//'object'

从上面可以看出来用 typeof 来检测，不严谨。

null 被检测成为了 object, null 值表示一个空对象指针，用typeof操作符检测null值时会返回object的原因, 这是在设计ECMAscript时候存在的一些bug。

同样是js不严谨的一种表现形式。而数组也被检测成为了一个对象，所以用这种方式不严谨。

检测方式之 toString.call()

console.log(toString.call(undefined))//'[objectWindow]''
console.log(toString.call(null))//'[objectWindow]'
console.log(toString.call(true))//'[objectBoolean]'
console.log(toString.call(123))//'[objectNumber]'
console.log(toString.call(NaN))//'[objectNumber]'
console.log(toString.call("abc"))//'[objectString]'
console.log(toString.call(function(){}))//'[objectFunction]'
vararr=[];
console.log(toString.call({}))//'[objectObject]'
console.log(toString.call(arr))//'[objectArray]'

可以看出来出了undefined和null 这两个，其他的检测都还是比较严谨的。

其中toString()函数是window的一个不可枚举函数，继承自Object

还可以写成这样：

window.toString.call('hello');//"[objectString]"
Object.prototype.toString.call('hello');//"[objectString]"

检测方式之 constructor

console.log('haha'.constructor==String);//true
console.log([].constructor===Array);//true
console.log({}.constructor===Object);//true
console.log(true.constructor===Boolean);//true
vara=111;//此处必须要用变量来代表数字，不然会报错，从这也能看出来js是一门不严谨的语言
console.log(a.constructor===Number);//true

我们通过把实例的构造函数指向其他地方，来改变它的constructor，就不安全了，不推荐使用如下代码所示：

varAAA=function(){};//定义一个AAA对象
AAA.prototype={
say:function(){
alert('hello');
}
}
vararr1=newArray();//定义一个数组
arr1.constructor=functionAAA(){};//这里可以改变实例的constructor。
arr1.__proto__=AAA.prototype;//此处改变了原型链
console.log(arr1.constructor);//AAA
console.log(arr1instanceofAAA);//true原型链已经改变，arr1已经不属于Array了。
console.log(arr1instanceofArray);//false
//下面我们来让AAA的原型链连到Array上
AAA.prototype.__proto__=Array.prototype;
console.log(arr1instanceofArray);//true

检测方式之 instanceof

检测是否是某一对象的实例

console.log([]instanceofArray);//true
console.log({}instanceofObject);//true
console.log('haha'instanceofString);//false
console.log(trueinstanceofBoolean);//false
console.log(1instanceofNumber);//false

前面两个是true，后面的全是false 说明了用 A instanceof B 来检测的前提条件必须是A,B都为对象，通过下面的方式就可以看出来了

vara=newNumber(1);
varb=newString('haha');
vart=newBoolean(true);
console.log(ainstanceofNumber);//true
console.log(binstanceofString);//true
console.log(tinstanceofBoolean);//true

此种方式也不安全，后面会有阐述，有关instanceof 和 isPrototypeOf的区别，我们以后再来探讨

还有一种is的方式比如：Array.isArray() 专门用来检测数组

console.log(Array.isArray([]));//true

这个有兼容问题，IE8及其以下版本浏览器不被支持

而jQuery里面也给我们提供了一些解决方案

jQuery.isArray()：是否为数组。
jQuery.isEmptyObject()：是否为空对象（不含可枚举的属性）。
jQuery.isFunction()：是否为函数。
jQuery.isNumeric()：是否为数字。
jQuery.isPlainObject()：是否为使用“{}”或“newObject”生成的对象，而不是浏览器原生提供的对象。
jQuery.isWindow()：是否为window对象。
jQuery.isXMLDoc()：判断一个DOM节点是否处于XML文档之中。

总结

通过以上几种方式，我们知道在不同的时候用不同的检测方式，是一种有效的解决方案。

拓展

在number类型中，还有一种检测是有穷数字的方法叫 isFinite(), 比如任何数字除以0，都为无穷大。Infinity，-Infinity，非数字都会被判为false

console.log(3/0);//Infinity
console.log(-3/0);//-Infinity
console.log(isFinite(3/0));//false
console.log(isFinite(-3/0));//false
console.log(isFinite(NaN));//false
console.log(isFinite('haha'));//false
console.log(isFinite(true));//true在这里true被转换成了数字1
console.log(isFinite(false));//true在这里false被转换成了数字0

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注恰卡编程网行业资讯频道，感谢您对恰卡编程网的支持。

阅读全文

发布于 2021-02-24 07:34:38

javascript