JS中比较两个数组或两个对象是否相等方法实例

一、问题

在js中是不能直接用“==”或者“===”来计算两个数组是否相等的，那么就需要对数组的值进行比较；

二、次解决方案

对于比较两个数组次要的方法有如下几种，为什么说是次要解决方案呢？因为它不能真正称之为对两个数组的对比。

1. 把两个数组转化为字符串的形式比较，如下：

a. 当两个数组元素类型相同，顺序相同时，直接判断是否相等，结果不相等；转化为字符串后，结果相等；

var a=[1, 2, 3, 4];
var b = a.slice(); 
console.log(a);
console.log(b); 
console.log(a == b);
console.log(JSON.stringify(a) == JSON.stringify(b));

运行结果：

 

 

2.当两个数组元素类型不同，顺序相同时，用toString()转化为字符串，结果相等；用stringify转化为字符串，结果不相等；

var a=[1, 2, 3, 4]; 
var b = ['1', 2, 3, 4]; 
console.log(a); 
console.log(b); 
console.log(a.toString() == b.toString());
console.log(JSON.stringify(a) == JSON.stringify(b));

运行结果如下：

 

 

3. 当两个数组不相同时，先排序，再转化为Json字符串比较，结果相等： 

var a = [1, 2, 3, 4]; 
var b = [4, 2, 3, 1]; 
console.log(a.sort()); 
console.log(b.sort());
console.log(JSON.stringify(a.sort()) == JSON.stringify(b.sort()));

运行结果：

 

 4.当数组包含Object时，先排序，再进行比较，结果相等：

var a=[{"x":"abc"}, 2, 3, 4]; 
var b = [4, 2, 3, {"x":"abc"}]; 
console.log(a.sort()); 
console.log(b.sort()); 
console.log(JSON.stringify(a.sort()) == JSON.stringify(b.sort()));

运行结果：

 

 

从以上可以看出：　　

1. 如果两个数组元素类型相同，顺序相同时，用stringify转化为字符串后进行比较；

2. 如果两个数组元素类型相同，顺序不相同时，排序后，用stringify转化为字符串再进行比较；

3.两个数组元素类型不同时，用stringify转化为字符串后进行比较，数组不相等；用toString()转化为字符串后进行比较，数组相等;

JS深度比较两个对象/数组是否相等

/**
 * 深度比较两个对象是否相等
 * @type {{compare: compareObj.compare, isObject: (function(*=): boolean), isArray: (function(*=): boolean)}}
 */
var compareObj = {
    // 比较两个对象是否相等
    compare: function(oldData, newData) {
        // 类型为基本类型时,如果相同,则返回true
        if (oldData === newData) return true;
        if (
            compareObj.isObject(oldData) &&
            compareObj.isObject(newData) &&
            Object.keys(oldData).length === Object.keys(newData).length
        ) {
            // 类型为对象并且元素个数相同
            // 遍历所有对象中所有属性,判断元素是否相同
            for (const key in oldData) {
                if (oldData.hasOwnProperty(key)) {
                    if (!compareObj.compare(oldData[key], newData[key])) {
                        // 对象中具有不相同属性 返回false
                        return false;
                    }
                }
            }
        } else if (
            compareObj.isArray(oldData) &&
            compareObj.isArray(oldData) &&
            oldData.length === newData.length
        ) {
            // 附加代码 对数组统一排序
            oldData = oldData.sort();
            newData = newData.sort();
            // 附加代码 对数组统一排序

            // 类型为数组并且数组长度相同
            for (let i = 0, length = oldData.length; i < length; i++) {
                if (!compareObj.compare(oldData[i], newData[i])) {
                    // 如果数组元素中具有不相同元素,返回false
                    return false;
                }
            }
        } else {
            // 其它类型,均返回false
            return false;
        }
        // 走到这里,说明数组或者对象中所有元素都相同,返回true
        return true;
    },
    // 判断此类型是否是Array类型
    isObject: function(obj) {
        return Object.prototype.toString.call(obj) === "[object Object]";
    },
    // 判断此对象是否是Object类型
    isArray: function(arr) {
        return Object.prototype.toString.call(arr) === "[object Array]";
    },
};
// 案例一
const ret = compareObj.compare({
    a: "aa",
    b: "bb",
    c: [3, "1", "2"],
    d: {
        age: [19, 20, 21],
        name: [
            ["aaa", "ccc", "bbb"], "jack", "rose", "siri"
        ],
    },
    aa: null,
    bb: undefined,
    cc: "",
    dd: 0,
    // ee: NaN,
    ff: false,
}, {
    c: ["1", "2", 3],
    b: "bb",
    d: {
        name: ["rose", "siri", "jack", ["aaa", "bbb", "ccc"]],
        age: [19, 20, 21],
    },
    a: "aa",
    aa: null,
    bb: undefined,
    cc: "",
    dd: 0,
    // ee: NaN,
    ff: false,
});
console.log(ret); // => true
// 案例二
const ret1 = compareObj.compare(
    [
        [2, 1, 3], {
            a: "aa",
            b: "bb",
            c: [3, "1", "2"],
            d: {
                age: [19, 20, 21],
                name: [
                    ["aaa", "ccc", "bbb"], "jack", "rose", "siri"
                ],
            },
            aa: null,
            bb: undefined,
            cc: "",
            dd: 0,
            // ee: NaN,
            ff: false,
        }
    ],
    [{
            c: ["1", "2", 3],
            b: "bb",
            d: {
                name: ["rose", "siri", "jack", ["aaa", "bbb", "ccc"]],
                age: [19, 20, 21],
            },
            a: "aa",
            aa: null,
            bb: undefined,
            cc: "",
            dd: 0,
            // ee: NaN,
            ff: false,
        },
        [1, 2, 3]
    ]
);
console.log(ret1); // => true