js比较两个json对象(或数组)是否相等的方法

1、通过JSON.stringfy(obj)来判断两个对象(或数组)转化后的字符串是否相等

可以将两个对象转换成json字符串格式，即利用JSON.stringify(obj)再进行比较。请看下面的例子：

json

const obj = {
     id: 1,
     name: '张三',
     age: 18
}
const objToStr = JSON.stringify(obj)
//'{"id":1,"name":"张三","age":18}'

json array

const obj = [{
     id: 1,
     name: '张三',
     age: 18
},{
     id: 2,
     name: '李四',
     age: 16
}]
const objToStr = JSON.stringify(obj)
//'[{"id":1,"name":"张三","age":18},{"id":2,"name":"李四","age":16}]'

注意：toString()是无法将一个对象转换成字符串的。

优点：用法简单，对于顺序相同的两个对象可以快速进行比较得到结果

缺点：这种方法有限制就是当两个对比的对象中key的顺序不是完全相同时会比较出错

2、递归法深度比较

思路：递归函数封装：输入为【任意类型的两个值】，比较是否相等——先判断数据类型，再做不同类型的比较。

type1: 基础数据类型直接用三等比较

type2: 类型不同返回false

type3: 都是对象则遍历属性比较属性是否相等，因为属性也可以是任意值，所以再调用自身，输入比较的两个属性

流程：

先判断target是不是对象：target不是对象，直接return origin === target，返回恒等的结果（不转化类型）；

判断origin是否也是对象：target是对象，origin不是对象，肯定不相等，return false

遍历对象的所有属性key通过for of+object.keys遍历对象所有自身属性，然后递归比较obj[key]是否相等，因为此时obj[key]类型不明，可能是数组，对象或者基本类型，所以重新调用自己，就会重新开始判断数据类型，再比较

遍历中出现不相等的value，直接return false

遍历结束，所有value都相等，则两对象相等

function compare(origin, target) {
  if (typeof target !== "object") {
    //target不是对象/数组
    return origin === target; //直接返回全等的比较结果
  }

  if (typeof origin !== "object") {
    //origin不是对象/数组
    return false; //直接返回false
  }
  for (let key of Object.keys(target)) {
    //遍历target的所有自身属性的key
    if (!compare(origin[key], target[key])) {
      //递归比较key对应的value，
      //value不等，则两对象不等，结束循环，退出函数，返回false
      return false;
    }
  }
  //遍历结束，所有value都深度比较相等，则两对象相等
  return true;
}

json

const obj1 = {
     id: 1,
     name: '张三',
     age: 18
}
const obj2 = {
     id: 1,
     name: '张三',
     age: 18
}
compare(obj1,obj2)  //true

json array

const obj1 =  [{
     id: 1,
     name: '张三',
     age: 18
},{
     id: 2,
     name: '李四',
     age: 16
}];
const obj2 = [{
     id: 1,
     name: '张三',
     age: 18
},{
     id: 2,
     name: '李四',
     age: 16
}];
const obj3 =  [{
     id: 1,
     name: '张三',
     age: 18
},{
     id: 2,
     name: '李四',
     age: 16
}]
const obj4 = [{
     id: 1,
     name: '张三',
     age: 18
},{
     id: 2,
     name: '李四',
     age: 18 //
}]
compare(obj1,obj2)  //true
compare(obj3,obj4)  //false

经典前端面试题每日更新，欢迎参与讨论，地址：https://github.com/daily-interview/fe-interview。

---

更多angular1/2/4/5、ionic1/2/3、react、vue、微信小程序、nodejs等技术文章、视频教程和开源项目，请关注微信公众号——全栈弄潮儿。

image

脑筋急转弯：

image

生活小窍门

image