>  기사  >  웹 프론트엔드  >  JavaScript 재미있는 질문: 객체의 심층 비교

JavaScript 재미있는 질문: 객체의 심층 비교

黄舟
黄舟원래의
2017-01-22 14:38:091667검색

자바스크립트에서 두 개체를 비교하는 것은 쉬운 작업이 아니며 이러한 API 자체를 제공하지도 않습니다.

"==" 연산자를 사용하여 두 개체를 비교하려는 경우 잘못된 것입니다.

"==" 연산자는 왼쪽 변수와 오른쪽 변수가 동일한 객체를 가리키는 경우에만 true를 반환합니다.

예를 들어 다음 예에서는 false가 반드시 반환됩니다.

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

그럼 두 물체를 비교하는 기준은 무엇일까요?

1. 속성 이름이 같은지

2. 속성 값이 같은지

예를 들어 위의 두 개체 a와 b는 모두 "name"이라는 속성명은 "Joe"라는 속성값을 가지므로 "유사하다"고 할 수 있다.

즉, 이번에 우리의 목적은 두 JS 객체가 "유사"한지 확인하는 것입니다.

위의 두 개체는 매우 간단합니다. 중첩된 개체가 발생하면 복잡해집니다.

일반 객체, 함수 객체, 날짜 객체 등 객체 유형이 많기 때문에 이를 비교하면 프로그램의 복잡성이 증가하므로 여기서는 몇 가지 경우만 고려합니다. 일반 객체({ } ), 배열 객체([]) 및 단순 기본 유형(문자열, 숫자, 부울, null, 정의되지 않음).

요구사항이 단순화되더라도 이러한 유사성을 달성하는 것은 쉽지 않습니다. 아래에서는 개체의 심층 순회를 사용하여 개체의 속성 이름과 값을 하나씩 비교합니다.

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 중국어 웹사이트(www.php.cn)를 참고하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.