摘要:深度比较两个对象写在前面近日遇到的一个需求需要比较两个对象,对象的属性类型相同,属性的值相同,就认为是两个对象是相同的,唯恐自己写的方法不够精炼,因此找到了解决办法,特此记下。
深度比较两个javaScript对象 1、写在前面
近日遇到的一个需求需要比较两个对象,对象的属性类型相同,属性的值相同,就认为是两个对象是相同的,唯恐自己写的方法不够精炼,因此google找到了解决办法,特此记下。 方法出处:http://stackoverflow.com/questions/1068834/object-comparison-in-javascript2、方法一:Object.toJSON()或 JSON.stringify()
此方法简单,适用于当两个对象的属性顺序相同的时候。
var user1 = {name : "nerd", org: "dev"}; var user2 = {name : "nerd", org: "dev"}; var eq = user1 == user2; alert(eq); // gives false // var eq1 = Object.toJSON(user1) == Object.toJSON(user2); var eq1 = JSON.stringify(user1) === JSON.stringify(user2) alert(eq1); // gives true3、方法二、深度比较两个对象(推荐)
深度比较两个对象,当对象的属性类型相同且属性的值相同(对象的顺序可以不一样),两个对象就相等。
function deepCompare(x, y) { var i, l, leftChain, rightChain; function compare2Objects(x, y) { var p; // remember that NaN === NaN returns false // and isNaN(undefined) returns true if (isNaN(x) && isNaN(y) && typeof x === "number" && typeof y === "number") { return true; } // Compare primitives and functions. // Check if both arguments link to the same object. // Especially useful on the step where we compare prototypes if (x === y) { return true; } // Works in case when functions are created in constructor. // Comparing dates is a common scenario. Another built-ins? // We can even handle functions passed across iframes if ((typeof x === "function" && typeof y === "function") || (x instanceof Date && y instanceof Date) || (x instanceof RegExp && y instanceof RegExp) || (x instanceof String && y instanceof String) || (x instanceof Number && y instanceof Number)) { return x.toString() === y.toString(); } // At last checking prototypes as good as we can if (!(x instanceof Object && y instanceof Object)) { return false; } if (x.isPrototypeOf(y) || y.isPrototypeOf(x)) { return false; } if (x.constructor !== y.constructor) { return false; } if (x.prototype !== y.prototype) { return false; } // Check for infinitive linking loops if (leftChain.indexOf(x) > -1 || rightChain.indexOf(y) > -1) { return false; } // Quick checking of one object being a subset of another. // todo: cache the structure of arguments[0] for performance for (p in y) { if (y.hasOwnProperty(p) !== x.hasOwnProperty(p)) { return false; } else if (typeof y[p] !== typeof x[p]) { return false; } } for (p in x) { if (y.hasOwnProperty(p) !== x.hasOwnProperty(p)) { return false; } else if (typeof y[p] !== typeof x[p]) { return false; } switch (typeof(x[p])) { case "object": case "function": leftChain.push(x); rightChain.push(y); if (!compare2Objects(x[p], y[p])) { return false; } leftChain.pop(); rightChain.pop(); break; default: if (x[p] !== y[p]) { return false; } break; } } return true; } if (arguments.length < 1) { return true; //Die silently? Don"t know how to handle such case, please help... // throw "Need two or more arguments to compare"; } for (i = 1, l = arguments.length; i < l; i++) { leftChain = []; //Todo: this can be cached rightChain = []; if (!compare2Objects(arguments[0], arguments[i])) { return false; } } return true; }
可以把方法compare2Objects修改成自己想要的条件,比如说不限制属性的类型,只要属性的值相等就认为两个object相等。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/81322.html
摘要:虚拟原理流程简单概括有三点用模拟树,并渲染这个树比较新老树,得到比较的差异对象把差异对象应用到渲染的树。下面是流程图下面我们用代码一步步去实现一个流程图用模拟树并渲染到页面上其实虚拟,就是用对象结构的一种映射,下面我们一步步实现这个过程。 背景 大家都知道,在网页中浏览器资源开销最大便是DOM节点了,DOM很慢并且非常庞大,网页性能问题大多数都是有JavaScript修改DOM所引起的...
摘要:本文所实现的完整代码存放在。这就是所谓的算法。两个树的完全的算法是一个时间复杂度为的问题。如果有差异的话就记录到一个对象里面。如和的不同,会被所替代。这牵涉到两个列表的对比算法,需要另外起一个小节来讨论。 作者:戴嘉华 转载请注明出处并保留原文链接( https://github.com/livoras/blog/issues/13 )和作者信息。 目录: 1 前言 2 对前端应用状...
摘要:另外,由于篇幅有限,本篇的重点在于二叉树的常见算法以及实现。常见的二叉树实现代码之前写过相关的文章,是关于如何创建及遍历二叉树的,这里不再赘述。同时我们注意到,在二叉树深度比较大的时候,我们光是比较左右是不够的。 本篇为复习过程中遇到过的总结,同时也给准备面试的同学一份参考。另外,由于篇幅有限,本篇的重点在于二叉树的常见算法以及实现。 常见的二叉树实现代码 之前写过相关的文章,是关于如...
摘要:对象详解对象深度剖析,深度理解对象这算是酝酿很久的一篇文章了。用空构造函数设置类名每个对象都共享相同属性每个对象共享一个方法版本,省内存。 js对象详解(JavaScript对象深度剖析,深度理解js对象) 这算是酝酿很久的一篇文章了。 JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕。 平时发的文章基本都是开发中遇到的问题和对...
摘要:忍者级别的函数操作对于什么是匿名函数,这里就不做过多介绍了。我们需要知道的是,对于而言,匿名函数是一个很重要且具有逻辑性的特性。通常,匿名函数的使用情况是创建一个供以后使用的函数。 JS 中的递归 递归, 递归基础, 斐波那契数列, 使用递归方式深拷贝, 自定义事件添加 这一次,彻底弄懂 JavaScript 执行机制 本文的目的就是要保证你彻底弄懂javascript的执行机制,如果...
阅读 1496·2021-10-11 10:59
阅读 1857·2021-09-09 11:36
阅读 1368·2019-08-30 15:55
阅读 1322·2019-08-29 11:20
阅读 3057·2019-08-26 13:39
阅读 1458·2019-08-26 13:37
阅读 1951·2019-08-26 12:11
阅读 1313·2019-08-23 14:28