[JavaScript知识库] 对vue源码中 looseEqual 进行解读

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 对vue源码中 looseEqual 进行解读 -> 正文阅读

[JavaScript知识库]对vue源码中 looseEqual 进行解读

/**
 * 判断 obj 是不是引用数据类型   
 * @param {*} obj 
 * @returns false: 简单数据类型;  true: 引用数据类型
 */
function isObject (obj) {
  return obj !== null && typeof obj === 'object'
}
/**
 * 判断 a, b 是否基本相等  
 * @param {*} (a, b)
 * @returns 
 */
function looseEqual (a, b) {
  /*
    + a === b
      + 1. a与b是简单数据类型: a 与 b 的值相等
      + 2. a与b是引用数据类型: a 与 b 是同一个地址
  */
  if (a === b) { return true }
  /*
    + isObjectA: true: 是引用数据类型, false: 不是
    + isObjectB: true: 是引用数据类型, false: 不是
  */
  var isObjectA = isObject(a);
  var isObjectB = isObject(b);
  if (isObjectA && isObjectB) {/* 如果 a 与 b 都是引用数据类型 */
    try {
      var isArrayA = Array.isArray(a);
      var isArrayB = Array.isArray(b);
      if (isArrayA && isArrayB) { /* 如果 a 与 b 都是数组 */
        return a.length === b.length && a.every(function (e, i) { /* a与b数组长度相等, 并且 递归对比数组里元素是否基本相等 */
          return looseEqual(e, b[i])
        })
      } else if (a instanceof Date && b instanceof Date) {/* 如果 a 与 b 都是日期数据类型 */
        return a.getTime() === b.getTime() /* 对比其时间戳是否相等 */
      } else if (!isArrayA && !isArrayB) { /* a与b 不是数组也不是日期对象 */
        /*
          + keysA: a的属性集合(Symbol属性除外)
          + keysB: b的属性集合(Symbol属性除外)
        */
        var keysA = Object.keys(a);
        var keysB = Object.keys(b);
        return keysA.length === keysB.length && keysA.every(function (key) { /* a与b的属性数组长度相等, 并且 递归对比属性数组里元素是否基本相等 */
          return looseEqual(a[key], b[key])
        })
      } else {
        return false
      }
    } catch (e) {
      return false
    }
  } else if (!isObjectA && !isObjectB) {/* 如果 a 与 b 都是简单数据类型值 */
    return String(a) === String(b)
  } else {
    return false
  }
}