如何比较(差异)两个对象

如何比较(差异)两个对象

javascript 中的对象比较

javascript 中的对象比较看似复杂。虽然比较数字和字符串等原始值很简单,但比较对象可能会导致意想不到的结果。让我们探索不同的对象比较方法,并构建一个强大的解决方案来检测对象之间的变化。

直接比较的陷阱

当开发人员第一次遇到 javascript 中的对象比较时,他们经常尝试这样的操作:

const user1 = { name: "john", age: 30 };const user2 = { name: "john", age: 30 };console.log(user1 === user2); // false

登录后复制

令人惊讶的是,即使两个对象具有相同的内容,这也会返回 false。发生这种情况是因为 javascript 比较的是对象引用,而不是它们的值。两个对象都指向内存中的不同位置。

简单的比较方法

1. json.stringify

比较对象的快速方法是使用 json.stringify:

const areequal = (obj1, obj2) =>   json.stringify(obj1) === json.stringify(obj2);console.log(areequal(user1, user2)); // true

登录后复制

虽然这适用于简单的情况,但它有局限性:

不处理函数属性的顺序很重要无法处理循环引用不提供有关不同之处的信息

2. 构建更好的对象差异

让我们创建一个更复杂的解决方案,不仅可以检测差异,还可以告诉我们发生了什么变化:

function getobjectdiff(original, current) {  const changes = {};  // check current object's properties  for (const [key, value] of object.entries(current)) {    if (!(key in original)) {      changes[key] = {        oldvalue: undefined,        newvalue: value      };      continue;    }    const originalvalue = original[key];    const currentvalue = value;    // handle different types of comparisons    if (      originalvalue !== currentvalue &&      string(originalvalue) !== string(currentvalue) &&      json.stringify(originalvalue) !== json.stringify(currentvalue)    ) {      changes[key] = {        oldvalue: originalvalue,        newvalue: currentvalue      };    }  }  // check for removed properties  for (const key of object.keys(original)) {    if (!(key in current)) {      changes[key] = {        oldvalue: original[key],        newvalue: undefined      };    }  }  return object.keys(changes).length === 0 ? null : changes;}

登录后复制

此实现:

当对象相同时返回 null处理类型强制(例如,“30”与 30)检测添加和删除的属性提供详细的变更信息

实际应用

这种类型的对象比较对于以下情况特别有用:

表单更改跟踪:检测表单中哪些字段发生了更改

const originalForm = { name: "John", email: "john@example.com" };const currentForm = { name: "John", email: "john.doe@example.com" };console.log(getObjectDiff(originalForm, currentForm));// Output: { email: { oldValue: "john@example.com", newValue: "john.doe@example.com" } }

登录后复制状态管理:跟踪应用程序状态的哪些部分发生了变化api 更新:确定在 patch 请求中发送哪些字段审核日志记录:记录对数据所做的特定更改

边缘情况(您可能需要加倍努力)

嵌套对象:深度比较与浅度比较数组:顺序敏感性和参考比较类型强制:字符串与数字比较特殊值:未定义、null、nan性能:深度比较对于大型对象来说可能会很昂贵

ps:这是一个 github 要点,用于比较和获取两个对象之间的差异的简单函数:

以上就是如何比较(差异)两个对象的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2662504.html

(0)
上一篇 2025年3月7日 11:13:40
下一篇 2025年3月2日 04:04:48

AD推荐 黄金广告位招租... 更多推荐

相关推荐

发表回复

登录后才能评论