黑马程序员技术交流社区

标题: 【西安校区】 javascript常见数据类型判断 [打印本页]

---

作者: 逆风TO    时间: 2019-11-27 15:03
标题: 【西安校区】 javascript常见数据类型判断
1、typeof
类型判断在web开发中有非常广泛的应用。说到类型判断，首先会想到的是typeof，引用《JavaScript权威指南》中对typeof的介绍：

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

在ES6前，JavaScript共有六种数据类型：

Boolean、Number、String、Undefined、Null、Object

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

boolean、number、string、undefined、object、object

可以看到，以上结果都是小写的表示类型的字符串，Null 和 Undefined 类型都会返回 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方法被调用的时候，下面步骤会被执行：

如果 this 值是 undefined，就返回 [object Undefined]
如果 this 的值是 null，就返回 [object Null]
让 O 成为 ToObject(this) 的结果
让 class 成为 O 的内部属性 [[Class]]的值
最后返回由 "[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

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2