深度比較兩個(gè)javaScript對(duì)象

go4it 發(fā)布于2019-08-20 13:56 / 2395人閱讀

摘要：深度比較兩個(gè)對(duì)象寫(xiě)在前面近日遇到的一個(gè)需求需要比較兩個(gè)對(duì)象，對(duì)象的屬性類(lèi)型相同，屬性的值相同，就認(rèn)為是兩個(gè)對(duì)象是相同的，唯恐自己寫(xiě)的方法不夠精煉，因此找到了解決辦法，特此記下。

深度比較兩個(gè)javaScript對(duì)象 1、寫(xiě)在前面

近日遇到的一個(gè)需求需要比較兩個(gè)對(duì)象，對(duì)象的屬性類(lèi)型相同，屬性的值相同，就認(rèn)為是兩個(gè)對(duì)象是相同的，唯恐自己寫(xiě)的方法不夠精煉，因此google找到了解決辦法，特此記下。
方法出處：http://stackoverflow.com/questions/1068834/object-comparison-in-javascript

2、方法一：Object.toJSON（）或 JSON.stringify()

此方法簡(jiǎn)單，適用于當(dāng)兩個(gè)對(duì)象的屬性順序相同的時(shí)候。

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、方法二、深度比較兩個(gè)對(duì)象（推薦）

深度比較兩個(gè)對(duì)象，當(dāng)對(duì)象的屬性類(lèi)型相同且屬性的值相同（對(duì)象的順序可以不一樣），兩個(gè)對(duì)象就相等。

    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修改成自己想要的條件，比如說(shuō)不限制屬性的類(lèi)型，只要屬性的值相等就認(rèn)為兩個(gè)object相等。