对比两个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。您可以根据实际需求调整这个函数。

相关推荐
只会cv的前端攻城狮6 分钟前
动态组件架构设计:从配置到事件驱动全链路解析
前端·vue.js
飞天狗7 分钟前
Next.js 16 App Router 实战:服务端组件与流式渲染
前端·next.js
OpenTiny社区12 分钟前
TinyEngine 2.11版本发布:AI 进一步融入画布,Vue 工程可一键转DSL
前端·vue.js·github
小雪_Snow26 分钟前
JavaScript 中的三种常用事件
开发语言·前端·javascript
Hyyy29 分钟前
Electron-Vite是什么,和Vite有什么区别
前端·面试
蓝胖子酱42 分钟前
在 Electron 中用 electron-store 实现加密存储与自定义格式文件
前端·javascript·数据库
虚焦像素_1 小时前
海康 Web 插件版接入指南:用法与注意事项
前端
虚焦像素_1 小时前
海康 Web 无插件版接入指南:用法与注意事项
前端
To_OC2 小时前
LC 22 括号生成:刷完这道题,我终于搞懂回溯剪枝了
javascript·算法·leetcode
aaron2 小时前
前端演进史:当你没留意时,前端发生了什么
前端