资讯专栏INFORMATION COLUMN

深度比较两个javaScript对象

go4it / 2176人阅读

摘要:深度比较两个对象写在前面近日遇到的一个需求需要比较两个对象,对象的属性类型相同,属性的值相同,就认为是两个对象是相同的,唯恐自己写的方法不够精炼,因此找到了解决办法,特此记下。

深度比较两个javaScript对象 1、写在前面
近日遇到的一个需求需要比较两个对象,对象的属性类型相同,属性的值相同,就认为是两个对象是相同的,唯恐自己写的方法不够精炼,因此google找到了解决办法,特此记下。
方法出处:http://stackoverflow.com/questions/1068834/object-comparison-in-javascript
2、方法一: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 true
3、方法二、深度比较两个对象(推荐)
深度比较两个对象,当对象的属性类型相同且属性的值相同(对象的顺序可以不一样),两个对象就相等。
    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节点了,DOM很慢并且非常庞大,网页性能问题大多数都是有JavaScript修改DOM所引起的...

    charles_paul 评论0 收藏0
  • 深度剖析:如何实现一个 Virtual DOM 算法

    摘要:本文所实现的完整代码存放在。这就是所谓的算法。两个树的完全的算法是一个时间复杂度为的问题。如果有差异的话就记录到一个对象里面。如和的不同,会被所替代。这牵涉到两个列表的对比算法,需要另外起一个小节来讨论。 作者:戴嘉华 转载请注明出处并保留原文链接( https://github.com/livoras/blog/issues/13 )和作者信息。 目录: 1 前言 2 对前端应用状...

    vvpvvp 评论0 收藏0
  • 使用JavaScript完成二叉树的一些基本操作

    摘要:另外,由于篇幅有限,本篇的重点在于二叉树的常见算法以及实现。常见的二叉树实现代码之前写过相关的文章,是关于如何创建及遍历二叉树的,这里不再赘述。同时我们注意到,在二叉树深度比较大的时候,我们光是比较左右是不够的。 本篇为复习过程中遇到过的总结,同时也给准备面试的同学一份参考。另外,由于篇幅有限,本篇的重点在于二叉树的常见算法以及实现。 常见的二叉树实现代码 之前写过相关的文章,是关于如...

    YPHP 评论0 收藏0
  • js对象详解(JavaScript对象深度剖析,深度理解js对象)

    摘要:对象详解对象深度剖析,深度理解对象这算是酝酿很久的一篇文章了。用空构造函数设置类名每个对象都共享相同属性每个对象共享一个方法版本,省内存。 js对象详解(JavaScript对象深度剖析,深度理解js对象) 这算是酝酿很久的一篇文章了。 JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕。 平时发的文章基本都是开发中遇到的问题和对...

    CatalpaFlat 评论0 收藏0
  • JavasScript重难点知识

    摘要:忍者级别的函数操作对于什么是匿名函数,这里就不做过多介绍了。我们需要知道的是,对于而言,匿名函数是一个很重要且具有逻辑性的特性。通常,匿名函数的使用情况是创建一个供以后使用的函数。 JS 中的递归 递归, 递归基础, 斐波那契数列, 使用递归方式深拷贝, 自定义事件添加 这一次,彻底弄懂 JavaScript 执行机制 本文的目的就是要保证你彻底弄懂javascript的执行机制,如果...

    forsigner 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<