首頁 > web前端 > js教程 > JavaScript趣題:深度比較對象

JavaScript趣題:深度比較對象

黄舟
發布: 2017-01-22 14:38:09
原創
1690 人瀏覽過

在JavaScript中比較兩個物件不是件輕鬆的活兒,而且它本身並沒有提供這樣的API。

如果你想用"=="運算子來比較兩個對象,那就大錯特錯了。

"=="運算子只有在左右兩邊的變數指向同一個物件的時候,才會回傳true。

譬如如下的例子,就一定會回傳false。

var a = { name: 'Joe' };  
var b = { name: 'Joe' };  
a == b;  //-> false
登入後複製

那麼咋們比較兩個物件的標準是什麼呢?

1.它們是否有同樣的屬性名

2.它們是否有同樣的屬性值

比如上面的a,b兩個對象,它們都有為「name」的屬性名,都有為「Joe 」的屬性值,所以就可以說,它們是「相似的」。

換句話說,我們此次的目的,是判斷,兩個JS物件是否是「相似的」。

上面的兩個物件都很簡單,如果我們遇到物件嵌套物件的情況,就會變得複雜起來。

因為對象的類型有很多種,比如正則對象,函數對象,日期對象,對它們的比較會增加程序複雜程度,因此,在這裡我們只考慮幾種情況:普通對象({}),數組對象([])和簡單基本類型(string,number,boolean,null,undefined)。

即使簡化了需求,完成這個比較相似也不是件容易的事兒,在下面我用到了深度遍歷對象,逐一比較對象的屬性名和值。

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中文網(m.sbmmt.com)!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板