javascript常见数据类型判断

1、typeof

类型判断在web开发中有非常广泛的应用。说到类型判断,首先会想到的是typeof,引用《JavaScript权威指南》中对typeof的介绍:

typeof是一元操作符,放在其单个操作数的前面,操作数可以是任意类型。返回值为表示操作数类型的一个字符串。

ES6前,JavaScript共有六种数据类型:

Boolean、Number、String、Undefined、Null、Object

当我们使用typeof对这些类型进行操作的时候,返回的结果并不是一一对应的:

boolean、number、string、undefined、object、object

可以看到,以上结果都是小写的表示类型的字符串,NullUndefined 类型都会返回 object 字符串
尽管不能一一对应,但是typeof却能检测出函数类型:

function fun1() { }
console.log(typeof fun1); // function

所以typeof能检测出六种类型的值,但是除此之外Object下还有很多细分的类型,比如:Array、Function、Date、RegExp、Error等。
如果使用typeof去检测这些类型,如:

var date = new Date();
console.log(typeof date); // object
var error = new Error();       
console.log(typeof error); // object

返回的都是object,所以有没有更好的方法可以去区分呢?

2、Object.prototype.toString

当然有,那就是利用Object.prototype.toString
引用ES5的规范讲解一下这个函数,当toString方法被调用的时候,下面步骤会被执行:

  1. 如果 this 值是 undefined,就返回 [object Undefined]
  2. 如果 this 的值是 null,就返回 [object Null]
  3. 让 O 成为 ToObject(this) 的结果
  4. 让 class 成为 O 的内部属性 [[Class]]的值
  5. 最后返回由 "[object " 和 class 和 “]” 三个部分组成的字符串

通过规范,可以知道调用Object.prototype.toString会返回一个由"[object " 和 class 和 “]” 组成的字符串,而 class 是要判断的对象的内部属性。举个例子:

console.log(Object.prototype.toString.call(undefined)) // [object Undefined]
console.log(Object.prototype.toString.call(null)) // [object Null]
var date = new Date();
console.log(Object.prototype.toString.call(date)) // [object Date]

由此我们可以看到这个 class 值就是识别对象类型的关键!

有了Object.prototype.toString ,我们就可以写一个自己的typeTest函数帮助我们以后识别各种常用类型的值了。代码如下:

function typeTest(obj){
	var class2type = {};
	// 生成class2type映射
	'Boolean Number String Date Array RegExp Function Object Error'.split(' ').map(function(item){
		class2type['[object '+ item + ']'] = item.toLowerCase();
	});
	//在 IE6 中,null 和 undefined 会被 Object.prototype.toString 识别成 [object Object]
	//所以undefined和null直接返回字符串
	if(obj == null){
		return obj+'';
	}
	//如果是基加粗样式本类型,就使用 typeof,引用类型就使用 toString
	return typeof obj === 'object' || typeof obj === 'function' ?
	 class2type[Object.prototype.toString.call(obj)] || 'object' : typeof obj;
}

console.log(typeTest(false));//boolean
console.log(typeTest(1));//number
console.log(typeTest('1'));//string        
console.log(typeTest(new Date()));//date
console.log(typeTest([1]));//array
console.log(typeTest(/d/g));//regexp
console.log(typeTest(typeTest));//function
console.log(typeTest({}));//object
console.log(typeTest(new Error()));//error

3、isEmptyObject:判断是否是空对象

function isEmptyObject(obj) {
    var name;
    for (name in obj) {
        return false;
    }
    return true;
}
console.log(isEmptyObject({}));//true
console.log(isEmptyObject({'name':'lisa'}));//false

4、isWindow:判断是否是Window对象

Window 对象作为客户端 JavaScript 的全局对象,它有一个 window 属性指向自身,我们可以利用这个特性判断是否是 Window 对象。

  function isWindow(obj) {
    return obj != null && obj === obj.window;
}
console.log(isWindow(window));//true
console.log(isWindow({}));//false
console.log(isWindow(undefined));//false  

5、isElement:判断是否是DOM元素

function isElement(obj) {
    return !!(obj&&obj.nodeType === 1);
}
console.log(isElement({}));//false
console.log(isElement(document.createElement('ul')));//true
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值