对比两个json对象有那几个字段被修改,并返回有改动的字段内容

如果您想比较两个 JSON 对象,找出哪些字段发生了变化,并返回发生变化的字段及其新的值,您可以编写一个函数来递归比较对象。以下是一个 TypeScript 示例:

javascript 复制代码
type JSONValue = string | number | boolean | null | JsonObject | JsonArray;
interface JsonObject {
  [key: string]: JSONValue;
}
type JsonArray = JSONValue[];

function compareObjects(obj1: JsonObject, obj2: JsonObject): JsonObject {
  const changedFields: JsonObject = {};

  for (const key in obj1) {
    if (obj1.hasOwnProperty(key)) {
      const value1 = obj1[key];
      const value2 = obj2[key];

      if (isObject(value1) && isObject(value2)) {
        // 递归比较嵌套的对象
        const nestedChanges = compareObjects(value1, value2);
        if (Object.keys(nestedChanges).length > 0) {
          changedFields[key] = nestedChanges;
        }
      } else if (!isEqual(value1, value2)) {
        // 如果值不相等,记录变化
        changedFields[key] = value2;
      }
    }
  }

  // 检查 obj2 中新增的字段
  for (const key in obj2) {
    if (obj2.hasOwnProperty(key) && !obj1.hasOwnProperty(key)) {
      changedFields[key] = obj2[key];
    }
  }

  return changedFields;
}

// 判断是否为对象
function isObject(value: any): value is JsonObject {
  return typeof value === 'object' && value !== null && !Array.isArray(value);
}

// 判断两个值是否相等
function isEqual(value1: JSONValue, value2: JSONValue): boolean {
  if (isObject(value1) && isObject(value2)) {
    return compareObjects(value1, value2).length === 0;
  }
  return value1 === value2;
}

// 示例
const json1: JsonObject = { a: 1, b: { c: 2, d: 3 } };
const json2: JsonObject = { a: 1, b: { c: 5, d: 3 }, e: 'newField' };

const changes = compareObjects(json1, json2);
console.log(changes);

这个函数 compareObjects 将递归比较两个对象,并返回发生变化的字段及其新值。在示例中,changes 对象将包含 { b: { c: 5 }, e: 'newField' },表示字段 b 中的 c 值发生了变化,以及新添加了字段 e。您可以根据实际需求调整这个函数。

相关推荐
大前端爱好者1 小时前
React 19 新特性详解
前端
随云6321 小时前
WebGL编程指南之着色器语言GLSL ES(入门GLSL ES这篇就够了)
前端·webgl
寻找09之夏2 小时前
【Vue3实战】:用导航守卫拦截未保存的编辑,提升用户体验
前端·vue.js
非著名架构师2 小时前
js混淆的方式方法
开发语言·javascript·ecmascript
多多米10053 小时前
初学Vue(2)
前端·javascript·vue.js
敏编程3 小时前
网页前端开发之Javascript入门篇(5/9):函数
开发语言·javascript
柏箱3 小时前
PHP基本语法总结
开发语言·前端·html·php
新缸中之脑3 小时前
Llama 3.2 安卓手机安装教程
前端·人工智能·算法
hmz8563 小时前
最新网课搜题答案查询小程序源码/题库多接口微信小程序源码+自带流量主
前端·微信小程序·小程序
看到请催我学习3 小时前
内存缓存和硬盘缓存
开发语言·前端·javascript·vue.js·缓存·ecmascript