JS判断对象是否发生变化,常用于监听页面表单是否修改并给出保存提示

本文主要封装方法,实现用户离开表单编辑页面时弹出提示框,若表单数据发生变化,则提示用户是否保存当前页面的信息,如图:

封装方法:

/**
 * 比较俩个对象之间的差异,项目中多处用到监听表单数据是否改动,故封装此方法
 * 如果数据改动,则返回新旧对象记录改动字段的新旧值
 *
 * by wang
 * */
export function diffObj(obj1, obj2) {
  function getTypeByObj (obj) {
    return Object.prototype.toString.call(obj).match(/^\[object ([a-zA-Z]*)\]$/)[1];
  }
  function isEmptyObject (obj) {
    for (let key in obj) {
      return false;
    };
    return true;
  }
  if (!obj1 || isEmptyObject(obj1) || !obj2 || isEmptyObject(obj2)) {
    return null;
  }
  let diffRes = {
    old_val: {},
    new_val: {}
  };
  for (let k in obj2) {
    // 判断数据类型是否一致
    if (getTypeByObj(obj2[k]) === getTypeByObj(obj1[k])) {
      // 比较 “Array”和“Object”类型
      if (getTypeByObj(obj2[k]) === 'Array' || getTypeByObj(obj2[k]) === 'Object') {
        const diffData = diffObj(obj1[k], obj2[k]);
        if (!isEmptyObject(diffData)) {
          diffRes.old_val[k] = diffData.old_val;
          diffRes.new_val[k] = diffData.new_val;
        }
      } else if (obj1[k] !== obj2[k]) { // 比较其他类型数据
        diffRes.old_val[k] = obj1[k];
        diffRes.new_val[k] = obj2[k];
      }
    } else {
      if ([undefined, null, ''].includes(obj1[k]) && [undefined, null, ''].includes(obj2[k])) {
        // 这三类数据可视为相等,不做处理
      }else {
        diffRes.old_val[k] = obj1[k];
        diffRes.new_val[k] = obj2[k];
      }
    }
  }
  // 若没有变化,返回null
  if (isEmptyObject(diffRes.old_val) || isEmptyObject(diffRes.new_val)) {
    return null;
  }
  return diffRes;
}

如果返回值为null,则代表没有改变,否则返回改变的属性和值,如图:

脚踏实地行,海阔天空飞~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值