判断两个参数是否相等

2018-07-19

摘要：学习冴羽的博客判断两个参数是否相等

什么是“相等”

原本只要===返回true就认为两者相等，但现在的相等是：
1.NaN与NaN相等
2.[1]与[1]相等
3.{value: 1}与{value: 1}相等
4.1与new Number(1)相等
5.’0’与new String(‘0’)相等
6.true与new Boolean(trun)相等
7.复杂对象具体看下面的讲解

+0与-0

产生+0与-0的原因：js采用了IEEE_754浮点数表示法，这种二进制表示法最高位是符号位（0表示正，1表示负），剩下的表示大小。对于边界值0来说无论是0开头的0000（+0）还是1开头的1000（-0）都表示0，因而有正负零的区别

Math.round(-0.1) // -0
+0 === 0 // true
-0 === 0 // true
+0 === -0 // true
(-0).toString() // '0'
(0).toString() // '0'

1 / +0 // Infinity
1 / -0 // -Infinity
1 / 0 // Infinity

利用正负无穷来判断正负零

functionequal(a, b){
  if(a === b) {
    return a !== 0 || 1 / a === 1 / b;
  }
  return false;
}

NaN

利用NaN不等于自身的特性判断NaN

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

初级equal函数

functionequal(a, b) {
  // 判断基本类型的一般值是否相等，并区别正负零
  if(a === b) {
    return a !== 0 || 1 / a === 1 / b;
  }
  // 判断NaN
  if(a !== a) {
    return b !== b;
  }
  // 将有一项为null的也排除，确保typeof返回object的都是对象
  if (a == null || b == null) {
    return false;
  }
  // 能到达这里说明a、b至少有一个不是基本类型 
  var type = typeof a;
  // 如果a既不是函数也不是对象那就肯定是基本类型，那么b只有是a的包装对象时才有可能相等
  if(type !== 'function' && type !== 'object' && typeof b !== 'object') {
    return false;
  }
  // 复杂的对象使用deepEqual函数进行深度比较
  return deepEqual(a, b);
}

至此，参数都是简单类型的相等判断已经搞定

包装对象、Date对象和RegExp对象

对于这三种对象来说，利用隐式转换来判断是否相等，但是有个特殊的包装对象Number(NaN)，它的判断方法与NaN一致

var toString = Object.prototype.toString;
function deepEqual(a, b) {
  var className = toString.call(a);
  // 判断两者的class属性是否相同
  if(className !== toString.call(b)) {
    return false;
  }
  switch (className) {
    case '[object RegExp]':
    case '[object String]':
        // 转换为字符串
        return '' + a === '' + b;
    case '[object Number]':
        // 判断NaN
        if (+a !== +a) {
          return +b !== +b;
        }
        // 判断正负零
        return +a === 0 ? 1 / +a === 1 / b : +a === +b;
    case '[object Date]':
    case '[object Boolean]':
        // 转换为数字（时间戳、0或1）
        return +a === +b;
  }
}

构造函数实例

对于不同构造函数下的实例返回false

var toString = Object.prototype.toString;
function isFunction(obj) {
  return toString.call(obj) === '[object Function]';
}
function deepEqual(a, b) {
  var className = toString.call(a);
  var areArray = className === '[object Array]';
  ...
  // 不是数组
  if(!areArray) {
    // 排除是function的情况
    if(typeof a != 'object' || typeof b != 'object') {
      return false;
    }
    var aCtor = a.constructor, bCtor = b.constructor;
    // aCtor、bCtor都存在并且不是Object构造函数的情况下，如果两者不相同，那么实例a、b就不相等
    // Object instanceof Object -> true 区别是否为Object构造函数，constructor判断是否为实例
    if(aCtor !== bCtor && !(isFunction(aCtor) && aCtor instanceof aCtor && isFunction(bCtor) && bCtor instanceof bCtor) && ('constructor' in a && 'constructor' in b)){
      return false;
    }
  }
}

数组与对象

简单的数组与对象递归遍历一遍判断每一项是否相等

function deepEqual(a, b) {
  ...
  var areArray = className === '[object Array]';
  ...
  var length = a.length
  if(areArray) {
    if(length !== b.length) {
      return false;
    }
    while(length--) {
      if(!equal(a[length], b[length])) {
        return false
      }
    }
  } else {
    var keys = Object.keys(a), key;
    length = keys.length;
    if(Object.keys(b).length !== length) {
      return false;
    }
    whild(length--) {
      key = keys[length];
      if(!(b.hasOwnProperty(key) && equal(a[key], b[key]))) {
        return false;
      }
    }
  }
  return true;
}

循环引用

有这样一种情况，对象里（多级嵌套）的一个属性指向它自己

a = {abc: null};
b = {abc: null};
a.abc = a;
b.abc = b;
equal(a, b) // 无限循环

underscore的方法是多传递两个参数——aStack和bStack，用来储存a和b递归比较过程中嵌套的对象，先判断一下是否为循环引用，不是循环引用的情况下再进行判断是否相等

var a, b;
a = { foo: { b: { foo: { c: { foo: null } } } } };
b = { foo: { b: { foo: { c: { foo: null } } } } };
a.foo.b.foo.c.foo = a;
b.foo.b.foo.c.foo = b;
function equal(a, b, aStack, bStack) {
    ...
    return deepEqual(a, b, aStack, bStack)
}
function deepEqual(a, b, aStack, bStack) {
  aStack = aStack || [];
  bStack = bStack || [];
  var length = aStack.length;
  //  判断a、b是否为循环引用
  while(length--) {
    if(aStack[length] === a) {
      return bStack[length] === b;
    }
  }
  // 不是循环引用，将a、b对象添加到aStack和bStack中
  aStack.push(a);
  bStack.push(b);
  // 遍历a、b属性值，判断是否相等
  var keys = Object.keys(a);
  var key;
  length = keys.length;
  while (length--) {
    key = keys[length]
    // 如果a、b有哪一项属性不相等，返回false，说明两者不相等；返回true则继续判断剩下的属性
    if (!eq(a[key], b[key], aStack, bStack)) {
      return false;
    }
  }
  // 程序执行到这里说明当前的a、b没有循环引用，从aStack、bStack中删除a、b
  aStack.pop();
  bStack.pop();
  return true;
}

最终的 equal 函数

var toString = Object.prototype.toString;
function isFunction(obj) {
  return toString.call(obj) === '[object Function]';
}
function equal(a, b, aStack, bStack) {
  // 判断基本类型的一般值是否相等，并区别正负零
  if(a === b) {
    return a !== 0 || 1 / a === 1 / b;
  }

  // 判断NaN
  if(a !== a) {
    return b !== b;
  }

  // 将有一项为null的也排除，确保typeof返回object的都是对象
  if (a == null || b == null) {
    return false;
  }

  // 能到达这里说明a、b至少有一个不是基本类型 
  var type = typeof a;
  // 如果a既不是函数也不是对象那就肯定是基本类型，那么b只有是a的包装对象时才有可能相等
  if(type !== 'function' && type !== 'object' && typeof b !== 'object') {
    return false;
  }

  // 复杂的对象使用deepEqual函数进行深度比较
  return deepEqual(a, b, aStack, bStack);
}
function deepEqual(a, b, aStack, bStack) {
  var className = toString.call(a);
  // 判断两者的[[class]]属性是否相同
  if(className !== toString.call(b)) {
    return false;
  }
  switch (className) {
    case '[object RegExp]':
    case '[object String]':
        // 转换为字符串
        return '' + a === '' + b;
    case '[object Number]':
        // 判断NaN
        if (+a !== +a) {
          return +b !== +b;
        }
        // 判断正负零
        return +a === 0 ? 1 / +a === 1 / b : +a === +b;
    case '[object Date]':
    case '[object Boolean]':
        // 转换为数字（时间戳、0或1）
        return +a === +b;
  }

  var areArray = className === '[object Array]';
  // 不是数组
  if(!areArray) {
    // 排除是function的情况
    if(typeof a != 'object' || typeof b != 'object') {
      return false;
    }
    var aCtor = a.constructor, bCtor = b.constructor;
    // aCtor、bCtor都存在并且不是Object构造函数的情况下，如果两者不相同，那么实例a、b就不相等
    // Object instanceof Object -> true 区别是否为Object构造函数，constructor判断是否为实例
    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 = a.length
  if(areArray) {
    if(length !== b.length) {
      return false;
    }
    while(length--) {
      if(!equal(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) && equal(a[key], b[key], aStack, bStack))) {
        return false;
      }
    }
  }
  // 程序执行到这里说明当前的a、b没有循环引用，从aStack、bStack中删除a、b
  aStack.pop();
  bStack.pop();
  return true;
}