javascript的对象内容对比

vue是这样对比的

function looseEqual (a, b) {
if (a === b) return true
const isObjectA = isObject(a)
const isObjectB = isObject(b)
if (isObjectA && isObjectB) {
try {
const isArrayA = Array.isArray(a)
const isArrayB = Array.isArray(b)
if (isArrayA && isArrayB) {
return a.length === b.length && a.every((e, i) => {
return looseEqual(e, b[i])
})
} else if (a instanceof Date && b instanceof Date) {
return a.getTime() === b.getTime()
} else if (!isArrayA && !isArrayB) {
const keysA = Object.keys(a)
const keysB = Object.keys(b)
return keysA.length === keysB.length && keysA.every(key => {
return looseEqual(a[key], b[key])
})
} else {
/* istanbul ignore next */
return false
}
} catch (e) {
/* istanbul ignore next */
return false
}
} else if (!isObjectA && !isObjectB) {
return String(a) === String(b)
} else {
return false
}
}

function isObject (obj) {

return obj !== null && typeof obj === 'object'
}

原生js是这样对比的

function ObjectContrast(objA,objB){
　　let flag = true
　　for(let i in objA){
　　　　if(Date.prototype.isPrototypeOf(objA[i]) || Date.prototype.isPrototypeOf(objB[i])){
　　　　　　objA[i] = new Date(objA[i]).Format("yyyy-MM-dd");
　　　　　　objB[i] = new Date(objB[i]).Format("yyyy-MM-dd");
　　　　}
　　　　if(Array.prototype.isPrototypeOf(objA[i]) || Array.prototype.isPrototypeOf(objB[i])){
　　　　　　continue;
　　　　}
　　　　if(objA[i] != objB[i]){
　　　　　　flag = false
　　　　}
　　}
　　return flag
}

//除此之外ObjectContrast也可以传第三个参数（数组）为规定，验证两个对象那些属性需要作对比，

//在其for循环内,首先验证数组是否为空（如果为空则比对全部），如果不为空，再验证 i 是否存在于这个数组（数组.indexOf（i））

//如果存在，再进行对比。

原生js还有这样对比的

function ObjectContrast(objA,objB){

　　let ObjectA = Object.keys(objA);

　　let ObjectB = Object.keys(objB);

　　if(ObjectA.length !== ObjectB.length){

　　　　return false;

　　}else if(ObjectA.length ===0&& ObjectB.length===0){

　　　　return true;

　　}else{

　　　　return !ObjectA.some((v,i)=>{

　　　　　　return ObjectA[v] !== ObjectB[v] 

　　　　})

　　}

}

这里还有一些别的有意思的方法

 

1、数组对比：https://www.cnblogs.com/kukudelaomao/p/7093181.html

JS怎么比较两个数组是否有完全相同的元素？
Javascript不能直接用==或者===来判断两个数组是否相等，无论是相等还是全等都不行，以下两行JS代码都会返回false

<script type="text/javascript">
　　alert([]==[]);
　　alert([]===[]);
</script>

要判断JS中的两个数组是否相同，需要先将数组转换为字符串，再作比较。以下两行代码将返回true

<script type="text/javascript">
　　alert([].toString()== [].toString());
　　alert([].toString()===[].toString());
</script>

JS要比较两个数组是否有相同的元素，即两个数组所有元素都相同，但元素的顺序不一定一致。只就需要先将数组进行排序，再比较两个数组是否相等。

试比较以下两行代码：

<script type="text/javascript">
　　alert([1,2,3].toString()== [3,2,1].toString());
　　alert([1,2,3].sort().toString()== [3,2,1].sort().toString());
</script>

2、对象对比：https://www.jianshu.com/p/90ed8b728975

① 方法一：通过JSON.stringfy(obj)来判断两个对象转后的字符串是否相等

优点：用法简单，对于顺序相同的两个对象可以快速进行比较得到结果
缺点：这种方法有限制就是当两个对比的对象中key的顺序不是完全相同时会比较出错

② 方法二：

// 对Object扩展一个方法chargeObjectEqual
Object.prototype.chargeObjectEqual = function(obj){
    // 当前Object对象
    var propsCurr = Object.getOwnPropertyNames(this);
    // 要比较的另外一个Object对象
    var propsCompare = Object.getOwnPropertyNames(obj);
    if (propsCurr.length != propsCompare.length) {
        return false;
    }
    for (var i = 0,max = propsCurr.length; i < max; i++) {
        var propName = propsCurr[i];
        if (this[propName] !== obj[propName]) {
            return false;
        }
    }
    return true;
}

getOwnPropertyNames该方法可以将Object对象的第一层key获取到并返回一个由第一层key组成的数组。

优点：相对方法一进行了优化，可以应对不同顺序的Object进行比较，不用担心顺序不同而对比出错
缺点：从方法中可以看到只能获取到第一层的key组成的数组，当对象是复合对象时无法进行多层对象的比较

③ 方法三：

    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;
    }

深度对比两个对象是否完全相等，可以封装成一个组件方便随时调用。

作者：木A木
链接：https://www.jianshu.com/p/90ed8b728975
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。