JavaScript Fun Question: Deep Comparison of Objects

Comparing two objects in JavaScript is not an easy task, and it does not provide such an API itself.

If you want to use the "==" operator to compare two objects, you are totally wrong.

The "==" operator will return true only when the variables on the left and right point to the same object.

For example, in the following example, false will definitely be returned.

var a = { name: 'Joe' };  
var b = { name: 'Joe' };  
a == b;  //-> false

So what is the standard for comparing two objects?

1. Do they have the same attribute name?

2. Do they have the same attribute value?

For example, the two objects a and b above have both The attribute name of "name" has the attribute value of "Joe", so it can be said that they are "similar".

In other words, our purpose this time is to determine whether two JS objects are "similar".

The above two objects are very simple. If we encounter the situation of nested objects, it will become complicated.

Because there are many types of objects, such as regular objects, function objects, and date objects, comparing them will increase the complexity of the program. Therefore, we only consider a few cases here: ordinary objects ({} ), array objects ([]) and simple primitive types (string, number, boolean, null, undefined).

Even if the requirements are simplified, it is not easy to accomplish this comparison. Below I use a deep traversal of objects to compare the attribute names and values ​​of the objects one by one.

function deepCompare(o1, o2) {  
    //标识是否相似  
    var flag = true;  
      
    var traverse = function(o1,o2){  
        //如果至少有一个不是对象  
        if(!(o1 instanceof Object) || !(o2 instanceof Object)){  
            if(o1 !== o2){  
                flag = false;  
            }  
            return;  
        }  
        //如果两个对象的属性数量不一致  
        //比如：  
        //a:{name:"Jack",age:22}  
        //b:{name:"Jack"}  
        if(Object.keys(o1).length != Object.keys(o2).length){  
            flag = false;  
        }  
        //若有不同之处，尽早结束递归  
        if(flag){  
            //深度遍历对象  
            for(var i in o1){  
                //若都是对象，继续递归  
                if(typeof o1[i] === "object" && typeof o2[i] === "object"){  
                    traverse(o1[i],o2[i]);  
                }//若都不是对象，则比较值  
                else if(typeof o1[i] !== "object" && typeof o2[i] !== "object"){  
                    if(o1[i] !== o2[i]){  
                        flag = false;;  
                    }  
                }//一个是对象，一个不是对象，肯定不相似  
                else{  
                    flag = false;  
                }  
            }  
        }  
    };  
      
    traverse(o1,o2);  
      
    return flag;  
};

The above is the content of JavaScript interesting questions: in-depth comparison of objects. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!