JavaScript 재미있는 질문: 객체의 심층 비교
자바스크립트에서 두 개체를 비교하는 것은 쉬운 작업이 아니며 이러한 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)를 참고하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











기사는 JavaScript 라이브러리 작성, 게시 및 유지 관리, 계획, 개발, 테스트, 문서 및 홍보 전략에 중점을 둡니다.

이 기사는 브라우저에서 JavaScript 성능을 최적화하기위한 전략에 대해 설명하고 실행 시간을 줄이고 페이지로드 속도에 미치는 영향을 최소화하는 데 중점을 둡니다.

프론트 엔드 개발시 프론트 엔드 열지대 티켓 인쇄를위한 자주 묻는 질문과 솔루션, 티켓 인쇄는 일반적인 요구 사항입니다. 그러나 많은 개발자들이 구현하고 있습니다 ...

이 기사는 브라우저 개발자 도구를 사용하여 효과적인 JavaScript 디버깅, 중단 점 설정, 콘솔 사용 및 성능 분석에 중점을 둡니다.

이 기사는 Java의 컬렉션 프레임 워크의 효과적인 사용을 탐구합니다. 데이터 구조, 성능 요구 및 스레드 안전을 기반으로 적절한 컬렉션 (목록, 세트, 맵, 큐)을 선택하는 것을 강조합니다. 효율적인 수집 사용을 최적화합니다

이 기사는 소스 맵을 사용하여 원래 코드에 다시 매핑하여 미니어링 된 JavaScript를 디버그하는 방법을 설명합니다. 소스 맵 활성화, 브레이크 포인트 설정 및 Chrome Devtools 및 Webpack과 같은 도구 사용에 대해 설명합니다.

엔트리 레벨 타입 스크립트 자습서를 마스터 한 후에는 TypeScript를 지원하고 JavaScript로 컴파일하는 IDE에서 자신의 코드를 작성할 수 있어야합니다. 이 튜토리얼은 TypeScript의 다양한 데이터 유형으로 뛰어납니다. JavaScript에는 NULL, UNDEFINED, BOOLEAN, 번호, 문자열, 기호 (ES6에 의해 소개 됨) 및 객체의 7 가지 데이터 유형이 있습니다. TypeScript는이 기반으로 더 많은 유형을 정의 하며이 튜토리얼은이 모든 튜토리얼을 자세히 다룹니다. 널 데이터 유형 JavaScript와 마찬가지로 Null in TypeScript

이 튜토리얼은 Chart.js를 사용하여 파이, 링 및 버블 차트를 만드는 방법을 설명합니다. 이전에는 차트 유형의 차트 유형을 배웠습니다. JS : 라인 차트 및 막대 차트 (자습서 2)와 레이더 차트 및 극지 지역 차트 (자습서 3)를 배웠습니다. 파이 및 링 차트를 만듭니다 파이 차트와 링 차트는 다른 부분으로 나뉘어 진 전체의 비율을 보여주는 데 이상적입니다. 예를 들어, 파이 차트는 사파리에서 남성 사자, 여성 사자 및 젊은 사자의 비율 또는 선거에서 다른 후보자가받는 투표율을 보여주는 데 사용될 수 있습니다. 파이 차트는 단일 매개 변수 또는 데이터 세트를 비교하는 데만 적합합니다. 파이 차트의 팬 각도는 데이터 포인트의 숫자 크기에 의존하기 때문에 원형 차트는 값이 0 인 엔티티를 그릴 수 없습니다. 이것은 비율이 0 인 모든 엔티티를 의미합니다
