js判断两个对象是否相等？整个小方法搞定

最新推荐文章于 2024-06-20 11:50:27 发布
最新推荐文章于 2024-06-20 11:50:27 发布
阅读量1.4w 收藏 89
点赞数 50
分类专栏： 整个小方法 文章标签： javascript es6 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25742631/article/details/105581625
版权

前言

作为一个刚入行不久的前端小菜鸡，写博客的原因一方面是为了记录一下自己平时踩的坑，给新入坑的小伙伴提供一个前车之鉴。另一方面则是分享一些自己工作、学习的心得，如果有跑偏的地方，希望能得到大佬们的批评指正，以免“误入歧途”。

大佬们如果不想看废话，请直接到总结看代码。

应用场景

众所周知，js中的Object、Array、Function等复杂数据类型，是无法直接用==和===操作符进行比对的。

  • Object对比
const tar = {
  name:'张三',
  age:12,
  address:'上海市浦东新区'
}
const _tar = {
  name:'张三',
  age:12,
  address:'上海市浦东新区'
}
console.log(tar == _tar);  // false
console.log(tar === _tar); // false
  • Array对比
console.log([1,2,3] === [1,2,3]); // false
console.log([1,2,3] === [1,2,3]); // false

即使我们人眼看上去，这两个对象和数组都一毛一样，但是js还是认为他们两个不相等。这是为啥子呢？

太复杂的咱也讲不出来，简单说一下原理

js的数据类型分为简单数据类型和复杂数据类型。简单数据类型包括：Number、String、Boolean、 undifined、Null等，复杂数据类型包括：Object、Array、function等。

复杂数据类型都会存储在堆内存中，简单数据类型则是存储在栈内存里。我们在定义一个复杂数据类型的时候，会先在堆内存中开辟空间，把数据存进去后，再把内存地址返回给我们所定义的变量。这样看来，我们所进行的对比操作，原来不是值的对比，而是内存地址的对比。


图片来自网络

举个栗子
const tar = {
  name:'张三',
  age:12,
  address:'上海市浦东新区'
}
const _tar = {
  name:'张三',
  age:12,
  address:'上海市浦东新区'
}
// tar和_tar 其实指向的是对象的内存地址，

由于每次创建对象都会新开辟新空间，与之对应的也会产生新内存地址，
所以即使两个对象的属性与属性值都一模一样，地址也是不同的。
其他复杂数据类型也是同样的原理。

搞明白为什么，下面开始上干货。

一个简单的解决方案

既然复杂数据类型无法通过===和==操作符判断，我们如果把它转换成字符串呢？
恰好，js提供了一个方法JSON.stringify，可以将Object和Array转换成JSON字符串。

const tar1 = {
  name:'张三',
  age:12,
  address:'上海市浦东新区'
}
const tar2 = {
  name:'张三',
  age:12,
  address:'上海市浦东新区'
}
const tar3 = {
  name:'张三',
  address:'上海市浦东新区',
  age:13,
}

const _tar1 = JSON.stringify(tar1) 
// {"name":"张三","age":12,"address":"上海市浦东新区"}

const _tar2 = JSON.stringify(tar2)
// {"name":"张三","age":12,"address":"上海市浦东新区"}

const _tar3 = JSON.stringify(tar3)
// {"name":"张三","address":"上海市浦东新区","age":13}

_tar1 === _tar2 //true
_tar1 === _tar2 //false

JSON.stringify([1,2,3]) === JSON.stringify([1,2,3])  //true
JSON.stringify([1,2,3]) === JSON.stringify([1,2,4])  //true

看来很顺利，假如顺序变换一下呢？

const tar1 = {
  name:'张三',
  age:12,
  address:'上海市浦东新区'
}

const tar2 = {
  name:'张三',
  address:'上海市浦东新区',
  age:12,
}

const _tar1 = JSON.stringify(tar1) 
// {"name":"张三","age":12,"address":"上海市浦东新区"}

const _tar2 = JSON.stringify(tar2)
// {"name":"张三","address":"上海市浦东新区","age":12}

_tar1===_tar2  // false

JSON.stringify([1,2,3]) === JSON.stringify([1,3,2]) // false

看来属性位置的变化，会影响JSON.stringify的转换结果，导致我们的判断出现了失误。

讲道理，数组内元素顺序变化，也应该理解为数组已经发生了改变，毕竟元素下标变了嘛。所以针对于数组的判断还是没有翻车滴！

所以我们现在碰到的第一个问题就是：如何保证两个对象的属性排列顺序是一致的呢？
实现的方法有很多，整一个我认为最简单的办法吧。

利用Object.assign的复制特性，将对比对象的属性值复制到源对象的属性上，这样生成的新对象就可以保证是按照源对象的顺序排列的。

const tar1 = {
  name:'张三',
  age:12,
  address:'上海市浦东新区'
}

const tar2 = {
  name:'张三',
  address:'上海市浦东新区',
  age:13,
}

JSON.stringify(Object.assign(tar1,tar1)
// { name: '张三', age: 13, address: '上海市浦东新区' }

// 展开操作符也可以达到一样的效果
JSON.stringify(Object.assign({...tar1,...tar1})
// { name: '张三', age: 13, address: '上海市浦东新区' }

这样我们就可以定义一个方法来使用啦！

const tar1 = {
  name:'张三',
  age:12,
  address:'上海市浦东新区'
}
const tar2 = {
  name:'张三',
  address:'上海市浦东新区',
  age:12,
}
const tar3 = {
  name:'张三',
  address:'上海市浦东新区',
  age:13,
}
function isObjectChanged(source, comparison) {
  const _source = JSON.stringify(source)
  const _comparison = JSON.stringify({...source,...comparison})
  return _source !== _comparison
}

isObjectChanged(tar1,tar2)  //false
isObjectChanged(tar1,tar3)  //true

这样是不是就完美的解决了我们的问题呢？

对于简单结构的对象，这个方法确实已经能满足需求了。假如对象中还嵌套对象呢？

const tar1 = {
  name:'张三',
  age:12,
  address:'上海市浦东新区',
  children:{
    age:12,
    name:'李四',
    address:'上海市黄浦区',
  }
}
const tar2 = {
  name:'张三',
  age:12,
  address:'上海市浦东新区',
  children:{
    name:'李四',
    age:12,
    address:'上海市黄浦区',
  }
}
const tar3 = {
  age:12,
  name:'张三',
  address:'上海市浦东新区',
  children:{
    age:12,
    name:'李四',
    address:'上海市黄浦区',
  }
}


isObjectChanged(tar1,tar2)  //true
isObjectChanged(tar1,tar3)  //false

看，只要内部对象的顺序一改变，咱们的方法就又挂掉了。这样看来这个方法无法适用于存在复杂数据类型属性值的对象。

稍微复杂点的解决方案

对于存在嵌套结构的对象，我们就应该引入递归和类型判断系统了。

国际惯例三步走：

  1. 遍历对象
  2. 简单数据类型直接用===比对，如果false则直接return
  3. 复杂数据类型，进入递归

判断数据类型由于方法很多，也不是本篇的重点，所以不展开来讲，只放一个我喜欢用的方法，大家可以随意取用。

// 判断数据类型
function getDataType(data) {
  const temp = Object.prototype.toString.call(data);
  const type = temp.match(/\b\w+\b/g);
  return (type.length < 2) ? 'Undefined' : type[1];
}

有了类型判断方法后，我们就可以开始写新方法啦！

function isObjectChanged(source, comparison) {
  let isChanged = false
  for (let key in source) {
    // 由于Object和Array都属于我们要特殊判断的数据类型，所以要提前做一下判断
    if (getDataType(source[key]) === 'Object' || getDataType(source[key]) === 'Array') {
      // 由于isChanged默认值就是false,所以我们只在isObjectChanged返回true的时候改变状态
      if (isObjectChanged(source[key], comparison[key])) {
        isChanged = true
      }
    } else if (source[key] !== comparison[key]) {
      isChanged = true
    }
  }
  return isChanged
}

测试一下

const tar1 = {
  name: '张三',
  age: 12,
  address: '上海市浦东新区',
  array: [1, 2, 3],
  children: {
    age: 12,
    name: '李四',
    address: '上海市黄浦区',
  }
}
const tar2 = {
  name: '张三',
  age: 12,
  address: '上海市浦东新区',
  array: [1, 2, 3, 4],
  children: {
    name: '李四',
    age: 12,
    address: '上海市黄浦区',
  }
}
const tar3 = {
  age: 12,
  name: '张三',
  address: '上海市浦东新区',
  array: [1, 2, 3],
  children: {
    age: 13,
    name: '李四',
    address: '上海市黄浦区',
  }
}
const tar4 = {
  age: 12,
  name: '张三',
  address: '上海市浦东新区',
  array: [2, 3, 1],
  children: {
    name: '李四',
    age: 12,
    address: '上海市黄浦区',
  }
}
isObjectChanged(tar1, tar2) //false
isObjectChanged(tar1, tar3) //true
isObjectChanged(tar1, tar4) //true

目前看起来一切都如我们所愿，即使带上Array我们都不怕。
真的没问题了吗？我们加大难度再来测试一下。

const tar1 = {
  name: '张三',
  age: 12,
  address: '上海市浦东新区',
  array: [1, 2, 3],
  children: {
    age: 12,
    name: '李四',
    address: '上海市黄浦区',
  }
}
const tar2 = {
  name: '张三',
  age: 12,
  address: '上海市浦东新区',
  array: [1, 2, 3, 4],
  children: {
    age: 12,
    name: '李四',
    address: '上海市黄浦区',
    array: [1, 2, 3, 4],
  }
}
isObjectChanged(tar1, tar2) // false

什么情况？这么明显的区别却在我们的方法里直接被忽视了？这是为啥呢？

原来我们在判断的时候，只根据源数据的属性来进行判断，如果是对比数据包含了源数据，且对比数据与源数据重合的部分都没有发生改变，那我们的方法就好像被别人遮住了一部分视野，再怎么对比都对比不出来啦。

仔细审视一下我们的代码，其中还有一个缺陷： 我们这个方法的目的就是为了判断是否存在变化，假如存在变化就可以立即返回结果，而不需要再傻傻的把循环跑完。

那么我们就继续优化吧！

function isObjectChanged(source, comparison) {

 
  // 由于'Object','Array'都属于可遍历的数据类型，所以我们提前定义好判断方法，方便调用
  const iterable = (data) => ['Object', 'Array'].includes(getDataType(data));

  // 如果源数据不是可遍历数据，直接抛错，主要用于判断首次传入的值是否符合判断判断标准。
  if (!iterable(source)) {
    throw new Error(`source should be a Object or Array , but got ${getDataType(source)}`);
  }

  // 如果数据类型不一致，说明数据已经发生变化，可以直接return结果
  if (getDataType(source) !== getDataType(comparison)) {
    return true;
  }

  // 提取源数据的所有属性名
  const sourceKeys = Object.keys(source);

  // 将对比数据合并到源数据，并提取所有属性名。
  // 在这里进行对象合并，首先是要保证 对比数据>=源数据，好处一：后边遍历的遍历过程就不用做缺省判断了。
  const comparisonKeys = Object.keys({...source, ...comparison});

  // 好处二：如果属性数量不一致说明数据必然发生了变化，可以直接return结果
  if (sourceKeys.length !== comparisonKeys.length) {
    return true;
  }

  // 这里遍历使用some，some的特性一旦找到符合条件的值，则会立即return，不会进行无意义的遍历。完美符合我们当前的需求

  return comparisonKeys.some(key => {
    // 如果源数据属于可遍历数据类型，则递归调用
    if (iterable(source[key])) {
      return isObjectChanged(source[key], comparison[key]);
    } else {
      return source[key] !== comparison[key];
    }
  });
}

嗯~~ 一看代码量就知道很稳，直接上大招测试！

const tar1 = {
  name: '张三',
  age: 12,
  address: '上海市浦东新区',
  array: [1, 2, 3],
  children: {
    age: 12,
    name: '李四',
    address: '上海市黄浦区',
  }
}
const tar2 = {
  name: '张三',
  age: 12,
  array: [1, 2, 3],
  address: '上海市浦东新区',
  children: {
    age: 12,
    address: '上海市黄浦区',
    name: '李四',
  }
}
const tar3 = {
  name: '张三',
  age: 12,
  array: [1, 3, 2],
  address: '上海市浦东新区',
  children: {
    age: 12,
    address: '上海市黄浦区',
    name: '李四',
  }
}
const tar4 = {
  name: '张三',
  sex: '女',
  address: '上海市浦东新区',
  array: [1, 2, 3, 4],
  children: {
    age: 12,
    name: '李四',
    address: '上海市黄浦区',
    array: [1, 2, 3, 4],
  }
}
const tar5 = {
  name: '张三',
  age: 12,
  address: '上海市浦东新区',
  array: [1, 2, 3, 4],
  children: {
    age: 12,
    name: '李四',
    address: '上海市黄浦区',
    array: [1, 2, 3, 4],
  }
}
isObjectChanged(tar1, tar2)  //false
isObjectChanged(tar1, tar3)  //true
isObjectChanged(tar1, tar4)  //true
isObjectChanged(tar1, tar5)  //true

完美~ 所有变化都被我们的方法给判断出来了！

总结

我这个方法并不是最好的实现方式，在这里也是希望能够抛砖引玉，有什么问题希望各位大牛批评指正，第一次写，可能有点啰嗦，希望大家见谅。

下面直接帖代码

简单方法（针对于无嵌套情况）
function isObjectChanged(source, comparison) {
  const _source = JSON.stringify(source)
  const _comparison = JSON.stringify({...source,...comparison})
  return _source !== _comparison
}
almost最佳方案（无惧挑战，目前还没发现判断失误的情况）
// 判断数据类型
function getDataType(data) {
  const temp = Object.prototype.toString.call(data);
  const type = temp.match(/\b\w+\b/g);
  return (type.length < 2) ? 'Undefined' : type[1];
}

// 判断两个对象是否相等
function isObjectChanged(source, comparison) {
  const iterable = (data) => ['Object', 'Array'].includes(getDataType(data));
  if (!iterable(source)) {
    throw new Error(`source should be a Object or Array , but got ${getDataType(source)}`);
  }

  if (getDataType(source) !== getDataType(comparison)) {
    return true;
  }

  const sourceKeys = Object.keys(source);

  const comparisonKeys = Object.keys({...source, ...comparison});

  if (sourceKeys.length !== comparisonKeys.length) {
    return true;
  }

  return comparisonKeys.some(key => {
    if (iterable(source[key])) {
      return isObjectChanged(source[key], comparison[key]);
    } else {
      return source[key] !== comparison[key];
    }
  });
}

如果大家的项目中允许改动原型链，甚至可以把这个方法挂载到Object原型链中，方便调用。

function isObjectChanged() {
// 如果嫌麻烦可以直接把判断数据类型的方法放入函数内部，
  function getDataType(data) {
    const temp = Object.prototype.toString.call(data);
    const type = temp.match(/\b\w+\b/g);
    return (type.length < 2) ? 'Undefined' : type[1];
  }
  // 下面放入源代码
  ...
}
// 挂载原型链上
Object.prototype.isObjectChanged = isObjectChanged

// 在项目各处都可以随时调用
Object.isObjectChanged(tar1, tar2)

不过现在一般不提倡修改内置对象的原型链，特别eslint比较规范的项目，一般都会配置no-extend-native，这种情况建议大家新增一个公共类，把常用Object对象配置进去，作为公共工具来使用，这样调用起来也非常方便。

class ObjectUtils{
  getDataType(data) {
    const temp = Object.prototype.toString.call(data);
    const type = temp.match(/\b\w+\b/g);
    return (type.length < 2) ? 'Undefined' : type[1];
  }
  iterable(data){
    return ['Object', 'Array'].includes(this.getDataType(data));
  }
  isObjectChangedSimple(source, comparison){
    const _source = JSON.stringify(source)
    const _comparison = JSON.stringify({...source,...comparison})
    return _source !== _comparison
  }
  isObjectChanged(source, comparison) {
    if (!this.iterable(source)) {
      throw new Error(`source should be a Object or Array , but got ${this.getDataType(source)}`);
    }
    if (this.getDataType(source) !== this.getDataType(comparison)) {
      return true;
    }
    const sourceKeys = Object.keys(source);
    const comparisonKeys = Object.keys({...source, ...comparison});
    if (sourceKeys.length !== comparisonKeys.length) {
      return true;
    }
    return comparisonKeys.some(key => {
      if (this.iterable(source[key])) {
        return this.isObjectChanged(source[key], comparison[key]);
      } else {
        return source[key] !== comparison[key];
      }
    });
  }
}
ObjectUtils.isObjectChanged(tar1, tar2)
ObjectUtils.isObjectChangedSimple(tar1, tar2)
CraiG_z
关注
  • 50
    点赞
  • 踩
  • 89
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
js判断两个对象是否相等---2种方式
JiangLittleBai的博客
09-30 2836
1、JSON.stringify(obj) 这种方法，简单易实现。 但有一个缺点：当对象里key值的顺序不一致时，比较就会出问题了。并且在JSON.stringify()时，一些特殊类型的值，比如undefined，Date，RegExp等会丢失或者变形。 var obj1={ name:111, age:222, dis:[1,2,3,4], info:{ like:"hx", ar
js判断两个对象是否相等
莉兹Liz的博客
10-25 254
有两个对象obj1和obj2 let obj1 = { a = 1 } let obj2 = { a = 1 } 比较obj1和obj2： obj1 == obj2 //false obj1 === obj2 //false obj1和obj2不是同一个指针对象，因此不相等。 下面是比较他们的正确方法： 方法一 比较两个对象的名和键值，都相同，那么两个对象相等。 isObjectV...
js判断两个对象是否相同的三种方式
良_123的专栏
09-04 2974
js判断两个对象是否相同的三种方式
两个空对象相等吗，为什么？
最新发布
Candy_672328094的博客
06-20 132
两个空对象在 JavaScript 中用==或===比较时不相等，因为它们引用了不同的内存位置。只有当两个变量引用同一个对象实例时，它们才会被认为是相等的。
JS如何判断两个对象是否相等
郊眠寺
06-01 2955
在日常开发中，判断两个数据是否相等是再常见不过的事，偶然回想起之前刚接触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比较俩个对象是否相等
codingLeader的博客
03-02 5630
js 比较对象；es5比较俩个对象
JavaScript 中，如何判断两个对象是否相等？
zhangyubababa的博客
10-15 718
JavaScript 中，如何判断两个对象是否相等？
javascript 对象比较是否属于同一类型对象。
qq_33490514的博客
12-21 982
js属于动态类型语言，那么我们如何判断 A实例是否和 b对象实例属于同一类型呢？比如 array === array ，Error === Error，自定义类的实例比较 等等对象类型判断。如果只用 typeof 肯定是不行的。因为不管 array 还是 object、error、或自定义实例类型都是返回 object 。其实我们可以通过对象实例都原型比较是否属于同一个对象类型。 Object.getPrototypeOf(obj) 方法返回指定对象的原型（内部[[Prototype]]属性的值）。所以.
JavaScript比较两个对象是否相等的方法
01-19
本文实例讲述了JavaScript比较两个对象是否相等的方法。分享给大家供大家参考。具体如下： 在Python中可以通过cmp()内建函数来比较两个对象所包涵的数据是否相等（数组、序列、字典）。但是在javascript语言中并没有...
js判断两个日期是否相等的方法
10-26
大家一定遇到过这样的情况，有两个日期对象，然后需要判断他们是否相等，下面来说下判断的方法
如何在 JavaScript 中比较两个对象
web00_11的博客
08-13 2614
比较方法 使用 == 或 === 对两个不同却具有相同属性及属性值的对象进行比较，他们的结果却不会相等。这是因为等号比较的是他们的引用（内存地址），而不是基本类型 为了测试两个对象在结构上是否相等，需要一个辅助函数。 他将遍历每个对象的所有属性，然后测试他们是否具有相同的值，嵌套对象也需如此。当然，也可以使用参数来控制是否对原型链进行比较 注意：此代码只对普通对象、数组、函数、日期和基本类型的数据结构进行对比 function isDeepEqual(obj1, obj2, testPrototype.
在JS中如何判断两个对象是否相等
weixin_47199717的博客
09-25 1507
在上面的例子中， Object.is(obj1, obj2) 返回 false ，因为 obj1 和 obj2 是两个不同的对象，而 Object.is(obj1, obj3) 返回 true ，因为 obj1 和 obj3 引用了同一个对象。在上面的例子中， obj1 和 obj2 的属性值相同，但它们是不同的对象，因此它们的 === 比较返回 false。如果你只是需要比较两个对象的属性是否相等（不比较引用地址），你可以使用循环或 Object.keys 方法来获取对象属性的列表，并比较它们的值。
JavaScript中 如何判断两个对象是否相等？
热门推荐
lookingForw_4585的博客
07-29 1万+
JavaScript中 如何判断两个对象是否相等？ object类型作为JavaScript中的基本数据类型，也是实际前端开发中经常使用的一种数据类型。 对于数字（Number）、字符串（String）、Boolean类型等数据，判断其是否相等，使用 === 全等于符合即可判断。但是对于object类型的数据，进行判断时就需要多做一些处理。 常见的判断方法有： 方法一：   使用 JSON.stringify()方法，将对象转化为字符串。然后使用 “===” 判断即可： let obj1 = { a
JS之比较两个对象是否相同
一片天空
08-24 7230
① 方法一：通过JSON.stringify(obj)来判断两个对象转后的字符串是否相等 优点：用法简单，对于顺序相同的两个对象可以快速进行比较得到结果缺点：这种方法有限制就是当两个对比的对象中key的顺序不是完全相同时会比较出错 ② 方法二： 较为简单的方法，如下 //比较2个对象是否相同 function isObjEqual(o1,o2){ var props1 = Object.getOwnPropertyNames(o1); var props2 = Object.getOwn
【JS】JS判断两个对象是否相等
owo_ovo的博客
10-05 473
js判断两个对象是否相等
js判断两个对象是否相等的方法csdn
04-29
js判断两个对象是否相等的方法有很多种，下面列举几种常用的方法： 1. 使用JSON.stringify()方法将两个对象转化为JSON字符串比较是否相同，这种方法的局限性是如果对象中含有函数等特殊属性，则无法正确比较。 2. 循环遍历两个对象的所有属性，判断属性名和属性值是否相同，但这种方法的缺点是需要非常复杂的代码来处理不同类型的对象，还容易漏掉某些属性。 3. 使用库函数lodash的isEqual方法比较两个对象是否相等，该方法可以避免上述方法的局限性，但需要引入外部依赖库。 总的来说，判断两个对象是否相等是一个比较复杂的问题，需要根据实际情况选择相应的方法。如果对象中无特殊属性，可以使用JSON.stringify方法进行比较，否则可以使用lodash库的isEqual方法，也可以编写自定义的比较函数。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值