JavaScript の楽しい質問: オブジェクトの詳細な比較

JavaScript で 2 つのオブジェクトを比較するのは簡単な作業ではなく、JavaScript 自体はそのような API を提供しません。

「==」演算子を使用して 2 つのオブジェクトを比較したい場合、それは完全に間違っています。

「==」演算子は、左右の変数が同じオブジェクトを指している場合にのみ true を返します。

例えば以下の例では必ずfalseが返されます。

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

では、2 つのオブジェクトを比較する基準は何でしょうか?

1. それらは同じ属性名を持っていますか?

2. それらは同じ属性値を持っていますか? たとえば、上の 2 つのオブジェクト a と b は「name」と「Joe」という属性値を持っています。 「似ている」と言えるでしょう。

つまり、今回の目的は、2つのJSオブジェクトが「似ている」かどうかを判断することです。

上記の 2 つのオブジェクトは非常に単純ですが、オブジェクトが入れ子になっている状況に遭遇すると、複雑になります。

オブジェクトには通常のオブジェクト、関数オブジェクト、日付オブジェクトなど多くの種類があるため、それらを比較するとプログラムの複雑さが増加します。したがって、ここでは通常のオブジェクト ({})、配列のいくつかのケースのみを考慮します。オブジェクト ([]) と単純な基本型 (文字列、数値、ブール値、null、未定義)。

要件が単純化されたとしても、この比較を実行するのは簡単ではありません。以下では、オブジェクトの詳細なトラバースを使用して、オブジェクトの属性名と値を 1 つずつ比較します。

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

上記は JavaScript の興味深い質問の内容です: オブジェクトの詳細な比較 詳細については、PHP 中国語 Web サイト (www.php.cn) に注目してください。