반응형
javascript 배열 비교 방법
javascript 에서 배열을 비교하는 방법을 알아보겠습니다.
[배열의 길이로 비교]
배열의 길이는 Array.length 를 사용하여 비교할 수 있습니다.
const array1 = [1,2,3,4];
const array2 = [4,3,2,1];
const compareLength = function(a,b){
if(a.length == b.length){
return true;
}else{
return false;
}
}
단순히 길이 비교로는 배열의 값이 같은지 까지는 확인 할 수 없죠.
값을 비교해 보겠습니다. 제일 먼저 떠오르는 방법은 for문을 돌며 각각 비교하는 것이죠.
[for문을 사용한 비교]
if(compareLength(array1, array2)){
array1.sort();
array2.sort();
for(var i=0, n=array1.length; i<n; i++){
if(array1[i] != array2[i]){
console.log("배열의 값이 다릅니다.");
}
}
}else{
console.log("배열의 길이가 다릅니다.");
}
for문을 사용하면 간단히 구현이 가능하지만, 데이터가 많아질 수록 시간이 오래걸리는 단점이 있습니다.
이제 간단히 JSON.stringify를 사용한 비교 함수를 만들어보겠습니다.
JSON.stringify와 JSON.parse 는 많이 보셨을 겁니다.
JSON.stringify : json, Object 객체를 문자열로 변환
JSON.parse : 문자열을 json, Object로 변환
[JSON.stringify를 사용한 비교]
const compareArray = function(a, b){
if(JSON.stringify(a) == JSON.stringify(b){
return true;
}else{
return false;
}
}
단순히 객체를 문자열로 치환하여 문자열을 비교하는 방식입니다.
문자열 비교이니 Object Array 구조도 비교가 가능하겠죠. ( [{}, {}] )
다만 Object Array를 정렬을 하려면 sort함수에 정렬기준함수를 전달하여 처리하여야 합니다.
const array1 = [{name:"geon", age:36},{name:"geon2", age:36}];
const array2 = [{name:"geon2", age:36},{name:"geon", age:36}];
const nameSort = function(a,b){
if(a.name < b.name){
return -1
}else if(a.name > b.name){
return 1;
}else{
return 0;
}
}
array1.sort(nameSort);
array2.sort(nameSort);
console.log(compareArray(array1, array2)); // true
위의 코드는 object의 name 값으로 정렬하여 비교한 코드 입니다.
배열의 비교는 때때로 유용하게 사용됩니다. 위의 코드를 응용할 수 있게
방법은 알아두도록 합시다.
반응형
'Programing > JavaScript' 카테고리의 다른 글
카카오 지도 보이는 영역 내 마커만 표출 방법 (0) | 2021.09.02 |
---|---|
javascript 2개 div 스크롤 위치 동기화 처리, 동시에 같은 위치로 움직이기 (0) | 2021.09.01 |
동적 생성 요소 핸들링 비교 / 추가, 이벤트처리, 값 변경, insertAdjacentHTML, appendChild, innerHTML (0) | 2021.08.04 |
javascript 이벤트 버블링 방지 이벤트 중복 방지 / 이벤트 버블링, 캡처링 (0) | 2021.04.13 |
iframe contentDocument contentWindow 차이 (1) | 2021.03.08 |
댓글