Better

Ethan的博客,欢迎访问交流

JavaScript之数据类型判断

类型判断在 web 开发中有非常广泛的应用,编码过程中对数据进行类型判断对于提高代码的可用性有很重要的意义,这里详细理解在JavaScript中是如何进行各种判断的。

typeof

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

在 ES6 前,JavaScript 共六种数据类型,分别是:

Undefined、Null、Boolean、Number、String、Object

然而当我们使用 typeof 对这些数据类型的值进行操作的时候,返回的结果却不是一一对应,分别是:

undefined、object、boolean、number、string、object

注意以上都是小写的字符串。Null 和 Object 类型都返回了 object 字符串。

尽管不能一一对应,但是 typeof 却能检测出函数类型function

所以 typeof 能检测出六种类型的值,但是,除此之外 Object 下还有很多细分的类型呐,如 Array、Function、Date、RegExp、Error 等。如果依旧使用typeof去检测的话,通通返回的是object,因此typeof针对object类型的细分就显得无能为力啦。

Obejct.prototype.toString

通过规范,我们至少知道了调用 Object.prototype.toString 会返回一个由 "[object " 和 class 和 "]" 组成的字符串,而 class 是要判断的对象的内部属性。

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

type api

var class2type = {};

// 生成class2type映射
"Boolean Number String Function Array Date RegExp Object Error".split(" ").map(function(item, index) {
    class2type["[object " + item + "]"] = item.toLowerCase();
})

function type(obj) {
    // 一箭双雕,因为IE6中,null和undefined,Object.toString返回[object Object],因此我们直接转字符返回
    if (obj == null) {
        return obj + "";
    }
    return typeof obj === "object" || typeof obj === "function" ?
        class2type[Object.prototype.toString.call(obj)] || "object" :
        typeof obj;
}

instanceof

个人觉得instanceof也是一个十分重要的运算符,但是它使用起来有缺陷,并不能用来的得到指定对象的数据类型,仅仅只能判断是否属于指定类型,比如a instanceof Array。

plainObject

plainObject 来自于 jQuery,可以翻译成纯粹的对象,所谓"纯粹的对象",就是该对象是通过 "{}" 或 "new Object" 创建的,该对象含有零个或者多个键值对。

之所以要判断是不是 plainObject,是为了跟其他的 JavaScript对象如 null,数组,宿主对象(documents)等作区分,因为这些用 typeof 都会返回object。

除了 {} 和 new Object 创建的之外,jQuery 认为一个没有原型的对象也是一个纯粹的对象。

// 上节中写 type 函数时,用来存放 toString 映射结果的对象
var class2type = {};

// 相当于 Object.prototype.toString
var toString = class2type.toString;

// 相当于 Object.prototype.hasOwnProperty
var hasOwn = class2type.hasOwnProperty;

function isPlainObject(obj) {
    var proto, Ctor;

    // 排除掉明显不是obj的以及一些宿主对象如Window
    if (!obj || toString.call(obj) !== "[object Object]") {
        return false;
    }

    /**
     * getPrototypeOf es5 方法,获取 obj 的原型
     * 以 new Object 创建的对象为例的话
     * obj.__proto__ === Object.prototype
     */
    proto = Object.getPrototypeOf(obj);

    // 没有原型的对象是纯粹的,Object.create(null) 就在这里返回 true
    if (!proto) {
        return true;
    }

    /**
     * 以下判断通过 new Object 方式创建的对象
     * 判断 proto 是否有 constructor 属性,如果有就让 Ctor 的值为 proto.constructor
     * 如果是 Object 函数创建的对象,Ctor 在这里就等于 Object 构造函数
     */
    Ctor = hasOwn.call(proto, "constructor") && proto.constructor;

    // 在这里判断 Ctor 构造函数是不是 Object 构造函数,用于区分自定义构造函数和 Object 构造函数
    return typeof Ctor === "function" && hasOwn.toString.call(Ctor) === hasOwn.toString.call(Object);
}
function Person(name) {
    this.name = name;
}

console.log(isPlainObject({})) // true

console.log(isPlainObject(new Object)) // true

console.log(isPlainObject(Object.create(null))); // true

console.log(isPlainObject(Object.assign({a: 1}, {b: 2}))); // true

console.log(isPlainObject(new Person('yayu'))); // false

console.log(isPlainObject(Object.create({}))); // false 没有constructor属性

上面为什么最后一个为false呢,因为没有constructor属性,create方法可以实现类似继承的效果,因此创建的对象会先指向参数,同时create的模拟实现如下:

Object.create = function( o ) {
    function f(){}
    f.prototype = o;
    return new f;
};

EmptyObject

function isEmptyObject( obj ) {
        var name;
        for ( name in obj ) {
            return false;
        }
        return true;
}

Window对象

Window 对象作为客户端 JavaScript 的全局对象,它有一个 window 属性指向自身。

function isWindow( obj ) {
    return obj != null && obj === obj.window;
}

isArrayLike

jQuery源码如下:

function isArrayLike(obj) {
    // obj 必须有 length属性
    var length = !!obj && "length" in obj && obj.length;
    var typeRes = type(obj);
    // 排除掉函数和 Window 对象
    if (typeRes === "function" || isWindow(obj)) {
        return false;
    }
    return typeRes === "array" || length === 0 ||
        typeof length === "number" && length > 0 && (length - 1) in obj;
}

查看源代码发现类数组必须满足三个条件之一:

  • 是数组
  • 长度为 0
  • lengths 属性是大于 0 的数组,并且obj[length - 1]必须存在

这里有个问题,为什么第三个只要求最后一个元素存在呢?看看下面声明数组元素的个数:

var a=[1,,]//length=2
var b=[,,1]//length=3
var c=[,1,]//length=2
var d=[,1,2,]//length=3

因为在数组中,可以用逗号直接跳过元素(如果是最后一个元素跳过则直接忽略不计),我们认为该元素是不存在的,类数组对象中也就不用写这个元素,但是最后一个元素是一定要写的,要不然 length 的长度就不会是最后一个元素的 key 值加 1

isElement

判断是不是DOM元素

isElement = function(obj) {
    return !!(obj && obj.nodeType === 1);
};

大神引路



留言

瑶哈哈
2017-07-27 23:19

沙发