视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
javascript中的数据类型检测方法详解
2020-11-27 21:52:39 责编:小采
文档

本文实例讲述了javascript中的数据类型检测方法。分享给大家供大家参考,具体如下:

在javascript中数据类型

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

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

检测方式之 typeof

console.log(typeof undefined)//'undefined'
console.log(typeof null) // object
console.log(typeof true) //'boolean'
console.log(typeof 123) //'number'
console.log(typeof NaN) //'number'
console.log(typeof "abc") //'string'
console.log(typeof function() {}) //'function'
var arr=[];
console.log(typeof {}) //'object'
console.log(typeof arr)//'object'

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

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

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

检测方式之 toString.call()

console.log(toString.call(undefined) ) // '[object Window]''
console.log(toString.call(null) ) // '[object Window]'
console.log(toString.call(true) ) // '[object Boolean]'
console.log(toString.call(123) ) // '[object Number]'
console.log(toString.call(NaN) ) // '[object Number]'
console.log(toString.call("abc") ) // '[object String]'
console.log(toString.call(function() {})) // '[object Function]'
var arr=[];
console.log(toString.call({}) ) // '[object Object]'
console.log(toString.call(arr) ) // '[object Array]'

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

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

还可以写成这样:

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

检测方式之 constructor

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

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

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

检测方式之 instanceof

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

console.log([] instanceof Array); // true
console.log({} instanceof Object); // true
console.log('haha' instanceof String); // false
console.log(true instanceof Boolean); // false
console.log(1 instanceof Number); // false

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

var a = new Number(1);
var b = new String('haha');
var t = new Boolean(true);
console.log(a instanceof Number); // true
console.log(b instanceof String); // true
console.log(t instanceof Boolean); // true

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

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

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

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

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

jQuery.isArray():是否为数组。
jQuery.isEmptyObject():是否为空对象(不含可枚举的属性)。
jQuery.isFunction():是否为函数。
jQuery.isNumeric():是否为数字。
jQuery.isPlainObject():是否为使用“{}”或“new Object”生成的对象,而不是浏览器原生提供的对象。
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

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

下载本文
显示全文
专题