특별한 일상

[JavaScript] 배열 key 중복 제거 (ft.동일 키 배열 합치기) 본문

IT•개발 끄적/JavaScript

[JavaScript] 배열 key 중복 제거 (ft.동일 키 배열 합치기)

소다맛사탕 2021. 12. 16. 22:38
반응형

안녕하세요. 소다맛사탕 입니다.

코딩 알고리즘을 짜거나 프로젝트를 진행 하다보면 참 많이 '반복문', '배열'을 쓰곤 합니다.

특히 자바스크립트에서 반복되는 객체를 찾아서 합치거나 중복을 제거하는 경우가 많습니다.

 

제가 최근에 썼거나 작성해보니까 괜찮다하는 코드중 중복 객체를 배열에 담아 합치는 것을 구현해 보았습니다.

 

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<head></head> 사이에 항상 최신의 jQuery를 사용할 수 있게 선언하고,

 

HTML에 반복되는 문서 객체나 특정 Index가 반복되는게 있다 치면...

 

1. 중복제거

$(document).ready(function(){
	fncDelDuplication();
});

function fncDelDuplication(){
	var arr = [{"index" : 1, "text" : 1}, {"index" : 1, "text" : 2}, {"index" : 1, "text" : 3},
		{"index" : 2, "text" : 1}, {"index" : 2, "text" : 3}, {"index" : 2, "text" : 5},
		{"index" : 3, "text": 10}];

	var resultArr = [];
	var flag = true;
	for(var i = 0; i < arr.length; i++){
		flag = true;
        // 향상된 for문 사용 가능
		for(value in resultArr){
			if(resultArr[value].index === arr[i].index){
				flag = false;
			}
		}
        // 일반적인 for문 사용
// 		for(var j = 0; j< resultArr.length; j++){
//  			if(resultArr[j].index === arr[i].index){
// 				flag = false;
// 			}
// 		}
		
		if(flag){
			resultArr.push(arr[i]);
		}
		
	}
	console.log("중복 제거 : "+JSON.stringify(resultArr));
}

---- 결과 ----

중복 제거 : [{"index":1,"text":1},{"index":2,"text":1},{"index":3,"text":10}]

 

※ === 표시는 같은 값과 타입을 동시에 비교합니다.

 

2. 같은 key 끼리 합치기

$(document).ready(function(){
    fncArrMerge();
    fncArrMerge2();
});

// key, value 배열
const arr = [{"index" : 1, "text" : 1}, {"index" : 1, "text" : 2}, {"index" : 1, "text" : 3},
		{"index" : 2, "text" : 1}, {"index" : 2, "text" : 3}, {"index" : 2, "text" : 5},
		{"index" : 3, "text": 10}];
        
function fncArrMerge(){
	var resultArr = [];
	for(var i = 0; i < arr.length; i++){
		var idx = getKeyIndex(resultArr, arr[i]);
		if(idx > -1){
			resultArr[idx].text +=  Number(arr[i].text);
		}else{
			resultArr.push(arr[i]);
		}
	}
	console.log("배열의 합 : "+JSON.stringify(resultArr));

	
}
function getKeyIndex(arr, obj){
	// 중복 체크
	for(var i = 0; i < arr.length; i++){
		if(arr[i].index === obj.index){
			return i;
		}
	}
	return -1;
}
//////////////////////// 방법 2 //////////////////////////
function fncArrMerge2(){
	var resultArr = [];
	var flag = false;
	var cnt = 0;
	for(var i = 0; i < arr.length; i++){
		cnt = 0;
		flag = false;
		for(value in resultArr){ 
        	// 중복 체크
			if(resultArr[value].index === arr[i].index){ 
				flag = true;
			}
			if(flag){
				++cnt;
				resultArr[value].index = Number(arr[i].index);
				resultArr[value].text += Number(arr[i].text);
			}
		}
		if(cnt == 0){
			resultArr.push(arr[i]);
		}
	}
	console.log("배열의 합2 : "+JSON.stringify(resultArr));
}

---- 결과 ----

배열의 합 : [{"index":1,"text":6},{"index":2,"text":9},{"index":3,"text":10}]

배열의 합2 : [{"index":1,"text":6},{"index":2,"text":9},{"index":3,"text":10}]

 

 

자바스크립트에서 배열의 중복을 제거하거나 같은 key 끼리 묶는 코드는

인터넷상에 찾아보면 많기 때문에 저도 참고해서 이렇게 해보았다 입니다.

본인만의 코드를 만들어서 한번 짜보시는게 좋을꺼 같습니다.

저작자표시

'IT•개발 끄적 > JavaScript' 카테고리의 다른 글

[JavaScript] event.preventDefault()와 event.stopPropagation() 사용법과 차이점  (0) 2022.01.05
[JavaScript] parseInt()와 Number() 차이점과 사용용도.  (0) 2021.12.23
[JavaScript] ECMAScript5 이상 키워드 var, let, const 사용법과 차이점  (0) 2021.12.11
[JavaScript] JS URL 인코딩 & 디코딩 처리(url encoding or decoding)  (0) 2021.06.10
[JavaScript] Array jQuery each() 메서드 사용법(배열 each())  (0) 2021.05.29
'IT•개발 끄적/JavaScript' Related Articles more
Comments