如何检查JS的两个值是否宽松相等？

你好，我是沐爸，欢迎点赞、收藏和关注。个人知乎

如何检查两个值是否宽松相等？也就是说，如果它们是普通对象，它们的结构是否相同？实际开发或者求职面试时，你或多或少遇到过、听说过。今天我们一起来看下。

思考

想一想，如何让下列数据相等？
情形一：

let arr1 = [1, 2, 3]
let arr2 = [1, 2, 3]

情形二：

let obj1 = { name: 'John', age: 18 }
let obj2 = { age: 18, name: 'John' }

情形三：

let obj1 = { 
    fruits: ['apple', 'banana', 'orange'],
    name: 'John', 
    age: 18 
}
let obj2 = { 
    age: 18, 
    name: 'John',
    fruits: ['apple', 'banana', 'orange']
}

代码实现

我们观察以上三种情形，会发现，它们最大的特点是结构相同，数组的顺序是相同的。以下是代码实现：

// 判断是否是对象
function isObject(obj) {
  return obj !== null && typeof obj === 'object'
}

// 是否宽松相等
function looseEqual(a, b) {
  if (a === b) return true
  
  var isObjectA = isObject(a)
  var isObjectB = isObject(b)
  
  if (isObjectA && isObjectB) {
    try {
      var isArrayA = Array.isArray(a)
      var isArrayB = Array.isArray(b)
      if (isArrayA && isArrayB) {
        return (
          a.length === b.length &&
          a.every(function (e, i) {
            return looseEqual(e, b[i])
          })
        )
      } else if (a instanceof Date && b instanceof Date) {
        return a.getTime() === b.getTime()
      } else if (!isArrayA && !isArrayB) {
        var keysA = Object.keys(a)
        var keysB = Object.keys(b)
        return (
          keysA.length === keysB.length &&
          keysA.every(function (key) {
            return looseEqual(a[key], b[key])
          })
        )
      } else {
        return false
      }
    } catch (e) {
      return false
    }
  } else if (!isObjectA && !isObjectB) {
    return String(a) === String(b)
  } else {
    return false
  }
}

代码解读

1. 严格相等比较：首先，函数尝试使用严格相等运算符（===）来比较两个值。如果两个值严格相等，函数立即返回true。

if (a === b) return true

严格相等存在两种场景：对于原始数据类型（Undefined、Null、Boolean、Number、String、Symbol、BigInt），值相等且类型相同则严格相等。而对于对象类型，只有当它们引用的是内存中的同一个对象时，才被认为是严格相等的。

2. 判断是否为对象：如果两个值不严格相等，函数会进一步判断它们是否都是对象。

var isObjectA = isObject(a)
var isObjectB = isObject(b)

3. 类型判断：(1)如果都是对象，继续判断对象类型；(2)如果都不是对象，转为String字符串后，比较字符串是否相等；(3)如果一个是对象，一个不是对象，则返回fasle。

if (isObjectA && isObjectB) { // 如果都是对象
  // 继续执行
} else if (!isObjectA && !isObjectB) { // 如果都不是对象
  return String(a) === String(b)
} else { // 如果一个是对象，一个不是对象
  return false
}

4. 错误处理：在比较两个对象过程中，如果遇到任何错误（例如，访问一个对象的属性时抛出异常），函数会捕获这个错误并返回false。
5. 对象比较：如果两个值都是对象，函数会进一步判断它们是否是数组、日期对象或其他类型的对象。
   • 数组比较：如果两个值都是数组，函数会比较它们的长度是否相等，然后递归地比较数组中的每个元素是否“松散相等”。

var isArrayA = Array.isArray(a)
var isArrayB = Array.isArray(b)
if (isArrayA && isArrayB) {
  return (
    a.length === b.length &&
    a.every(function (e, i) {
      return looseEqual(e, b[i])
    })
  )
}

• 日期对象比较：如果两个值都是日期对象，函数会比较它们的毫秒数是否相等。

if (a instanceof Date && b instanceof Date) {
  return a.getTime() === b.getTime()
}

• 普通对象比较：如果两个值都是普通对象（都不是数组且都不是日期），函数会比较它们的键的数量是否相等，然后递归地比较每个键对应的值是否“松散相等”。

var keysA = Object.keys(a)
var keysB = Object.keys(b)
return (
  keysA.length === keysB.length &&
  keysA.every(function (key) {
    return looseEqual(a[key], b[key])
  })
)

6. 兜底的情况：如果是对象，但都不是数组，又都不是日期，而且每个键又不松散相等，返回false。

记得点赞，下期再见！