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
网友评论