Better

Ethan的博客,欢迎访问交流

JavaScript判断对象相等

如何判断对象完全相等呢?这里的需要不是简单的===为true就是相等,而是有点类似Java的equals方法。

重定义相等

  • NaN 和 NaN 是相等
  • [1] 和 [1] 是相等
  • {value: 1} 和 {value: 1} 是相等
  • 1 和 new Number(1) 是相等
  • 'Curly' 和 new String('Curly') 是相等
  • true 和 new Boolean(true) 是相等

特殊情况

+0 与 -0

如果 a === b 的结果为 true, 那么 a 和 b 就是相等的吗?一般情况下,当然是这样的,但是有一个特殊的例子,就是 +0 和 -0。

// 相同处

// 表现1
console.log(+0 === -0); // true

// 表现2
(-0).toString() // '0'
(+0).toString() // '0'

// 表现3
-0 < +0 // false
+0 < -0 // false

// 即便如此,依旧是不同的
1 / +0 // Infinity
1 / -0 // -Infinity

1 / +0 === 1 / -0 // false

也许你会好奇为什么要有 +0 和 -0 呢?

这是因为 JavaScript 采用了IEEE_754 浮点数表示法(几乎所有现代编程语言所采用),这是一种二进制表示法,按照这个标准,最高位是符号位(0 代表正,1 代表负),剩下的用于表示大小。而对于零这个边界值 ,1000(-0) 和 0000(0)都是表示 0 ,这才有了正负零的区别。

那么如何在 === 结果为 true 的时候,区别 0 和 -0 得出正确的结果呢?

function eq(a, b){
    // 如果相等,不能直接返回true,还需要考虑+0、-0的情况
    if (a === b) return a !== 0 || 1 / a === 1 / b;
    return false;
}

NaN

我们需要判断NaN是相等的,那么我们该如何判断呢,看下面的代码,是不是惊醒了。

function eq(a, b) {
    if (a !== a) return b !== b;
}

第一版本代码

用来过滤掉简单的类型比较,复杂的对象使用 deepEq 函数进行处理。

function eq(a, b) {
    // === 结果为 true 的区别出 +0 和 -0
    if (a === b) return a !== 0 || 1 / a === 1 / b;
    // typeof null 的结果为 object ,这里做判断,是为了让有 null 的情况尽早退出函数
    if (a == null || b == null) return false;
    // 判断 NaN
    if (a !== a) return b !== b;
    // 判断参数 a 类型,如果是基本类型,流程走到了这里,就可以判断出两着不相等,在这里可以直接返回 false
    var type = typeof a;
    if (type !== 'function' && type !== 'object' && typeof b != 'object') return false;
    // 更复杂的对象使用 deepEq 函数进行深度比较
    return deepEq(a, b);
};

基本类型和对应封装类的比较

使用隐式类型转换,因为基本类型的封装类型调用Object.prototype.toString方法后返回的值是一样的,比如基本类型字符串和New String()返回的都是[object String]。那么如何进一步判断呢,就需要用到隐式类型转换啦。因此我们可以写一部分deepEq函数树下:

var toString = Object.prototype.toString;

function deepEq(a, b) {
    var className = toString.call(a);
    if (className !== toString.call(b)) return false;

    switch (className) {
        case '[object RegExp]':
        case '[object String]':
            return '' + a === '' + b;
        case '[object Number]':
            // 比较特别,判断是不是NaN和+0、-0
            if (+a !== +a) return +b !== +b;
            return +a === 0 ? 1 / +a === 1 / b : +a === +b;
      case '[object Date]':
      case '[object Boolean]':
            return +a === +b;
    }

    // 其他判断
}

构造函数

存在一种情况就是构造函数不一样,但是JSON格式结果是一样的情况。为了做出区分,我们认为是不同的对象。

如果两个对象所属的构造函数对象不同,两个对象就一定不相等吗?有一种特殊情况就是通过Object.create(null)创建的对象是没有原型的,这个要怎么处理呢?但是在实际应用中,只要他们有着相同的键值对,我们依然认为是相等。

function isFunction(obj) {
    return toString.call(obj) === '[object Function]'
}
function deepEq(a, b) {
    // 接着上面的内容
    var areArrays = className === '[object Array]';
    // 不是数组
    if (!areArrays) {
        // 过滤掉两个函数的情况
        if (typeof a != 'object' || typeof b != 'object') return false;
        var aCtor = a.constructor, bCtor = b.constructor;
        // aCtor 和 bCtor 必须都存在并且都不是 Object 构造函数的情况下,aCtor 不等于 bCtor, 那这两个对象就真的不相等啦
        // 说实话,这个判断有点猛,解释一下aCtor instanceof aCtor相等的情况下,表示是Object构造函数
        if (aCtor !== bCtor && !(isFunction(aCtor) && aCtor instanceof aCtor && isFunction(bCtor) && bCtor instanceof bCtor) && ('constructor' in a && 'constructor' in b)) {
            return false;
        }
    }
    // 下面还有好多判断
}

数组相等

数组和对象的判断比较简单简单,递归遍历即可。

function deepEq(a, b) {
    // 再接着上面的内容
    if (areArrays) {
        length = a.length;
        if (length !== b.length) return false;

        while (length--) {
            if (!eq(a[length], b[length])) return false;
         }
    } 
    else {
        var keys = Object.keys(a), key;
        length = keys.length;
        if (Object.keys(b).length !== length) return false;

        while (length--) {
            key = keys[length];
            if (!(b.hasOwnProperty(key) && eq(a[key], b[key]))) return false;
        }
    }
    return true;

}

循环引用

什么情况下会出现循环引用。例子如下:

a = {abc: null};
b = {abc: null};
a.abc = a;
b.abc = b;

如果不处理这种情况,我们的代码会一直处于死循环。

该如何解决这个问题呢?underscore 的思路是 eq 的时候,多传递两个参数为 aStack 和 bStack,用来储存 a 和 b 递归比较过程中的 a 和 b 的值。执行递归前检查是否存在循环引用。

最终代码

没事看看,加深理解

var toString = Object.prototype.toString;

function isFunction(obj) {
    return toString.call(obj) === '[object Function]'
}

function eq(a, b, aStack, bStack) {
    // === 结果为 true 的区别出 +0 和 -0
    if (a === b) return a !== 0 || 1 / a === 1 / b;
    // typeof null 的结果为 object ,这里做判断,是为了让有 null 的情况尽早退出函数
    if (a == null || b == null) return false;
    // 判断 NaN
    if (a !== a) return b !== b;
    // 判断参数 a 类型,如果是基本类型,在这里可以直接返回 false
    var type = typeof a;
    if (type !== 'function' && type !== 'object' && typeof b != 'object') return false;
    // 更复杂的对象使用 deepEq 函数进行深度比较
    return deepEq(a, b, aStack, bStack);
};

function deepEq(a, b, aStack, bStack) {
    // a 和 b 的内部属性 [[class]] 相同时 返回 true
    var className = toString.call(a);
    if (className !== toString.call(b)) return false;
    switch (className) {
        case '[object RegExp]':
        case '[object String]':
            return '' + a === '' + b;
        case '[object Number]':
            if (+a !== +a) return +b !== +b;
            return +a === 0 ? 1 / +a === 1 / b : +a === +b;
        case '[object Date]':
        case '[object Boolean]':
            return +a === +b;
    }
    var areArrays = className === '[object Array]';
    // 不是数组
    if (!areArrays) {
        // 过滤掉两个函数的情况
        if (typeof a != 'object' || typeof b != 'object') return false;
        var aCtor = a.constructor,
            bCtor = b.constructor;
        // aCtor 和 bCtor 必须都存在并且都不是 Object 构造函数的情况下,aCtor 不等于 bCtor, 那这两个对象就真的不相等啦
        if (aCtor !== bCtor && !(isFunction(aCtor) && aCtor instanceof aCtor && isFunction(bCtor) && bCtor instanceof bCtor) && ('constructor' in a && 'constructor' in b)) {
            return false;
        }
    }
    aStack = aStack || [];
    bStack = bStack || [];
    var length = aStack.length;
    // 检查是否有循环引用的部分
    while (length--) {
        if (aStack[length] === a) {
            return bStack[length] === b;
        }
    }
    aStack.push(a);
    bStack.push(b);
    // 数组判断
    if (areArrays) {
        length = a.length;
        if (length !== b.length) return false;

        while (length--) {
            if (!eq(a[length], b[length], aStack, bStack)) return false;
        }
    }
    // 对象判断
    else {
        var keys = Object.keys(a),
            key;
        length = keys.length;
        if (Object.keys(b).length !== length) return false;
        while (length--) {
            key = keys[length];
            if (!(b.hasOwnProperty(key) && eq(a[key], b[key], aStack, bStack))) return false;
        }
    }
    aStack.pop();
    bStack.pop();
    return true;

来源

判断两个对象相等



留言