JS中如何判断两个对象是否相等

JavaScript对象深度比较
最新推荐文章于 2024-03-08 14:03:00 发布
最新推荐文章于 2024-03-08 14:03:00 发布
阅读量330 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript 前端 开发语言 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/CflfEditor/article/details/133304053
前端开发中，判断两个对象是否相等不能直接用相等运算符，需进行深度比较。本文介绍了一个示例函数，通过递归比较对象属性值来判断相等性，仅比较可枚举属性，不涉及原型链。

在前端开发中，经常需要判断两个对象是否相等。然而，由于对象是引用类型，直接使用相等运算符（== 或 ===）来比较两个对象会判断它们是否指向同一个内存地址，而不是比较它们的属性值。因此，我们需要使用其他方法来判断两个对象是否相等。

一种常见的方法是使用深度比较，即逐个比较两个对象的属性值。下面是一个示例函数，用于判断两个对象是否相等：

function deepEqual(obj1, obj2) {
   
   
  // 判断基本类型的相等性
  if (obj1 === obj2) {
了解本专栏 订阅专栏 解锁全文
判断两个 DOM 节点是否相等的 JavaScript 方法
python_bug262的博客
09-30 409
在 JavaScript 中，要判断两个 DOM 节点是否相等，需要比较它们的属性和子节点。请注意，上述代码假设两个节点的属性和子节点的顺序都是相同的。如果你的需求不同，你可以根据自己的需求对代码进行修改。该函数首先检查节点的类型和名称是否相同。然后，它比较节点的属性，如果属性数量不同或者属性名称或值不同，就返回。这是一个简单的方法来判断两个 DOM 节点是否相等。作为参数，并返回一个布尔值来指示这两个节点是否相等。最后，我们打印结果来判断这两个节点是否相等。的函数，它接受两个 DOM 节点。
前端 项目中 判断两个对象value值是否相等
lzfengquan的博客
10-22 2170
项目中的实例 看上图知道，点击了支付时，验证了选中行的主体信息，不一致就给提示信息，一致就出现弹框（这里弹框没有写） 那么我们就要在循环遍历的基础上，判断选中的行信息的 某个值是否相等。 也就是 判断两个对象内容值是否相等 假设我们已经点击了支付按钮 最主要的是 let Name = [] // 定义一个空的数组，来存放组织名称 for (let n = 0; n < rowsData.length; n++){ Name.push(rowsData[n].settleEntityNa
js中如何判断两个对象是否相等？
热门推荐
官方推荐
09-13 2万+
js中如何判断两个对象是否相等？
JS判断两个对象内容是否相等的方法示例
11-28
本文实例讲述了JS判断两个对象内容是否相等的方法。分享给大家供大家参考，具体如下： 我们知道，如果两个对象即使内容，JavaScript也会判断它们不相等。但是有时候，我们仅仅需要判断两个对象的内容是否相等。那么我们应该如何做到且考虑周全呢？比如说0和-0，null和undefined，是不相等的，NaN和NaN默认是不相等的。我写了一个isEqual方法，考虑到了诸多方面，代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </bo
js 判断两个对象是否相等
sssuuuunnn的博客
05-12 149
网上找了一圈没一个好用的，只能自己写了。
JS 判断两个数组是否全等，以数组对象属性为例 - 附完整示例
m0_48968874的博客
08-28 697
【代码】js 判断两个数组是否全等，以数组对象属性为例。
JS判断两个数组或对象是否相同的方法示例
10-17
这个函数首先检查两个对象是否严格相等，其次判断两个对象是否都是对象类型，并且具有相同的构造函数。然后，它会遍历两个对象的所有自有属性，对每个属性递归地调用`cmp`函数比较属性值。对于对象或数组类型的属性...
js中比较两个对象是否相同的方法示例
10-16
在JavaScript编程中，比较两个对象是否相同是一个常见的需求，尤其是在处理数据结构和算法时。由于对象是通过引用来操作的，因此直接使用比较运算符（比如 == 或 ===）比较两个对象通常不会得到预期的结果。本篇文档...
JavaScript比较两个对象是否相等的方法
01-19
本js代码通过对js对象进行各方面的比较来判断两个对象是否相等 cmp = function( x, y ) { // If both x and y are null or undefined and exactly the same if ( x === y ) { return true; } // If they are not ...
通过JS深度判断两个对象字段相同
10-16
在JavaScript中，要深度判断两个对象的字段是否完全相同，需要编写一个函数，该函数能够递归地检查对象的每一个属性值。文章《通过JS深度判断两个对象字段相同》详细介绍了实现这一功能的方法，并提供了一个名为...
js判断两个对象是否相同的三种方式
良_123的专栏
09-04 3471
js判断两个对象是否相同的三种方式
【JS如何判断两个对象是否相等】
weixin_45655721的博客
03-08 541
判断两个对象是否相等
前端小技巧: 实现一个比较两个对象是否相等的方法
Wang的专栏
12-07 1075
实现两个对象的深度比较，模拟 lodash.isEqual() 写出一个简单的方案, 如果地址不一样，属性一样，则判定相等
js判断两个值是否相等
web_xyk的专栏
07-02 9649
方法：     function looseEqual(a, b) { if (a === b) { return true } var isObject = function (obj) { return obj !== null &amp;&amp; typeof obj === 'object' }; var isObjectA =...
js判断两个对象是否相同的两种方式
moonla3的博客
10-12 3465
js判断两个对象是否相同的三种方式
js判断复杂类型数组或对象是否完全相等
m0_70542915的博客
04-01 612
复杂类型不能直接使用‘===’判断，所以写一个函数判断复杂类型是否相等，不能判断包含function、Date、正则类型的对象或数组。
在js页面匹配两个对象是否相等的通用方法
had__had的博客
09-17 555
这里在js页面匹配两个对象是否相等的通用方法 //匹配两个对象是否相等 matchObject=function(map1,map2){ for(var key in map1){ if(map1[key]!=map2[key]){ return false; } } for(var key in map2){ if(map2[key]!=map1){ ...
对象hash值比较
Java学习的专栏
03-07 1794
        int i = 123;        Integer a = new Integer(i);int b = i;Integer c = new Integer(i);        System.out.println(a == b);        System.out.println(b == c);        System.out.println
JS如何判断两个对象是否相等
郊眠寺
06-01 3159
在日常开发中，判断两个数据是否相等是再常见不过的事，偶然回想起之前刚接触JS的时候，曾被一段代码困扰过，直接上代码来看看吧~~乍一看，这不就两个对象吗，然后判断是否相等，一个 ‘==’ 不就搞定咯。咋还扯出两种方法呢，而且答案还不一样？今天便总结一下如何去判断两个对象是否相等，给以前的自己上一课~~手动滑稽在判断两个值类型的数据是否相等时，便已足够完成任务，但当其遇到引用类型的数据时，就只能灰溜溜的跑了，原因则是因为当两个引用类型的数据在进行比较时，比较的是其在栈中的地址，而不是比较其在堆中的数据（哪怕数据
Vue3 中判断两个对象是否相等的方法
最新发布
08-05
<think>我们正在讨论的是在Vue3中判断两个对象是否相等的问题。在JavaScript中，对象是引用类型，直接比较两个对象（如`obj1 === obj2`）是比较它们的引用（即内存地址）是否相同，而不是它们的内容是否相同。因此，我们需要其他方法来判断两个对象的内容是否相等。 在Vue3中，我们可以使用以下方法： 1. **手动比较**：遍历对象的属性，逐一比较。这种方法适用于简单的对象，但要注意嵌套对象的情况。 2. **使用JSON.stringify**：将两个对象转换成JSON字符串，然后比较字符串是否相等。这种方法简单，但存在局限性（例如，属性顺序改变、函数属性等）。 3. **使用第三方库**：如lodash的`isEqual`方法，这是一个深度比较的方法，可以处理复杂的对象和数组。 考虑到Vue3本身并没有提供专门的方法来比较两个对象是否相等，我们通常使用第三方库或者自己实现深度比较。 下面我们分别展示这三种方法： **方法1：手动比较（浅比较）** 如果对象只有一层，我们可以使用浅比较。例如： ```javascript function shallowEqual(obj1, obj2) { const keys1 = Object.keys(obj1); const keys2 = Object.keys(obj2); if (keys1.length !== keys2.length) { return false; } for (let key of keys1) { if (obj1[key] !== obj2[key]) { return false; } } return true; } ``` **方法2：使用JSON.stringify** ```javascript function isEqual(obj1, obj2) { return JSON.stringify(obj1) === JSON.stringify(obj2); } ``` 注意：这种方法要求对象的属性顺序一致，并且不能包含循环引用。如果对象中有`undefined`、函数或Symbol值，在序列化过程中会被忽略（或转换为`null`），因此可能导致不准确。 **方法3：使用lodash的isEqual方法** 首先安装lodash： ```bash npm install lodash ``` 然后在Vue组件中使用： ```javascript import { isEqual } from 'lodash'; // 使用 if (isEqual(obj1, obj2)) { // 相等 } ``` 在Vue3的响应式系统中，我们有时需要比较两个响应式对象。由于Vue3的响应式对象是通过Proxy包装的，但上述方法（尤其是lodash的`isEqual`）仍然可以正常工作，因为它们比较的是对象的实际值。 另外，Vue3的`reactive`或`ref`创建的响应式对象，我们也可以将其转换为普通对象再进行比较（使用`toRaw`函数），但这通常不是必须的，因为深度比较函数会读取对象的属性值，而Proxy会正常返回这些值。 **总结**：推荐使用lodash的`isEqual`进行深度比较，因为它处理了各种边界情况（如嵌套对象、数组、日期、正则表达式等）且稳定可靠。 下面是一个在Vue3组件中使用的例子： ```vue <script setup> import { reactive } from 'vue'; import { isEqual } from 'lodash'; const obj1 = reactive({ a: 1, b: { c: 2 } }); const obj2 = reactive({ a: 1, b: { c: 2 } }); console.log(isEqual(obj1, obj2)); // true </script> ``` 如果不想引入整个lodash，也可以只安装`lodash.isequal`： ```bash npm install lodash.isequal ``` 然后引入： ```javascript import isEqual from 'lodash.isequal'; ``` 这样，我们就可以在Vue3中方便地判断两个对象是否相等了。</think>在 Vue 3 中判断两个对象是否相等需要特别注意：JavaScript 中对象是引用类型，直接使用 `===` 比较的是内存地址而非内容。以下是完整的解决方案： ### 方法 1：深度比较函数（推荐） ```javascript function deepEqual(obj1, obj2) { // 类型不同 if (typeof obj1 !== typeof obj2) return false // 基本类型直接比较 if (obj1 === obj2 || Number.isNaN(obj1) && Number.isNaN(obj2)) return true // 数组比较 if (Array.isArray(obj1)) { if (!Array.isArray(obj2) || obj1.length !== obj2.length) return false return obj1.every((item, i) => deepEqual(item, obj2[i])) } // 对象比较 if (typeof obj1 === 'object' && obj1 !== null) { const keys1 = Object.keys(obj1) const keys2 = Object.keys(obj2) if (keys1.length !== keys2.length) return false return keys1.every(key => deepEqual(obj1[key], obj2[key])) } return false } ``` ### 方法 2：JSON.stringify（简单对象） ```javascript const isEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b) ``` ⚠️ 局限性： 1. 无法处理`undefined`和函数属性 2. 属性顺序敏感 3. 不能比较循环引用对象 ### 方法 3：使用 Lodash（生产环境推荐） ```bash npm install lodash ``` ```javascript import { isEqual } from 'lodash' // 响应式对象可直接比较 const obj1 = reactive({ a: 1, b: { c: 2 } }) const obj2 = reactive({ a: 1, b: { c: 2 } }) console.log(isEqual(obj1, obj2)) // true ``` ### Vue 3 响应式对象注意事项 1. **直接比较问题**： ```javascript const a = reactive({ x: 1 }) const b = reactive({ x: 1 }) console.log(a === b) // false（比较的是Proxy实例） ``` 2. **解决方案**： ```javascript // 方法1：比较原始值 console.log(isEqual(toRaw(a), toRaw(b))) // 方法2：直接使用lodash（自动解包Proxy） console.log(isEqual(a, b)) ``` ### 性能优化建议 1. 对于浅层对象：使用`Object.keys()` + `every()`组合 ```javascript const shallowEqual = (a, b) => Object.keys(a).length === Object.keys(b).length && Object.keys(a).every(k => a[k] === b[k]) ``` 2. 使用缓存：对频繁比较的对象生成哈希值 ```javascript import { createHash } from 'crypto' const getHash = obj => createHash('md5').update(JSON.stringify(obj)).digest('hex') ``` ### 在 Vue 组件中的使用示例 ```vue <script setup> import { ref, reactive } from 'vue' import { isEqual } from 'lodash' const userA = reactive({ name: 'John', permissions: ['read', 'write'] }) const userB = ref({ ...userA }) watch([userA, userB], ([newA, newB]) => { if (!isEqual(newA, newB)) { console.log('检测到用户数据变化') } }) </script> ``` ### 不同场景推荐方案 | 场景 | 推荐方案 | 原因 | |------|----------|------| | 简单对象 | `JSON.stringify` | 实现简单，无依赖 | | 深层嵌套对象 | Lodash `isEqual` | 处理边界情况完善 | | 高频比较 | 自定义哈希函数 | 性能最优 | | 响应式对象 | Lodash + `toRaw` | 避免Proxy干扰 | > 提示：对于表单状态对比等常见场景，VueUse 库的 [`useEqual`](https://vueuse.org/shared/useEqual/) 工具提供了开箱即用的解决方案。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值