투케이2K

110. (javascript/자바스크립트) new Set 사용해 배열 중복 데이터 제거 실시 본문

JavaScript

110. (javascript/자바스크립트) new Set 사용해 배열 중복 데이터 제거 실시

투케이2K 2021. 8. 7. 10:20

[개발 환경 설정]

개발 툴 : Edit++

개발 언어 : javascript


[소스코드]

    <!-- 내부 JS 스타일 지정 -->
    <script>

    	/*
    	[JS 요약 설명]
    	1. window onload : 웹 브라우저 로딩 완료 상태를 나타냅니다
    	2. Set : 자바스크립트에서 중복되는 데이터를 제거해줍니다
    	3. set 을 사용해 중복 제거 후 배열 형태로 변환해줘야 정상적으로 데이터를 확인할 수 있습니다
    	*/


    	/* [html 최초 로드 및 이벤트 상시 대기 실시] */
    	window.onload = function() {
    		console.log("");
    		console.log("[window onload] : [start]");
    		console.log(""); 	
    	};

    	

    	/* [이벤트 수행 함수] */
    	function runFunction(){
    		console.log("");
    		console.log("[runFunction] : [start]");
    		console.log("");

    		// [방법 1] 초기 변수 선언 실시 및 데이터 삽입
    		var setArrayOne = new Set();
    		setArrayOne.add("하나");
    		setArrayOne.add("둘");
    		setArrayOne.add("하나");

    		// set 객체를 배열 형태로 저장해야 정상적으로 데이터가 출력됩니다
    		var uniqueArrayOne = [...setArrayOne];

    		console.log("");
    		console.log("[runFunction] : [uniqueArrayOne] : " + JSON.stringify(uniqueArrayOne));
    		console.log("[runFunction] : [length] : " + uniqueArrayOne.length);
    		console.log(""); 	




    		// [방법 2] new Array 객체 데이터 즉시 삽입 실시
    		var array = [1, 2, 1];
    		var setArrayTwo = new Set(array);

    		// set 객체를 배열 형태로 저장해야 정상적으로 데이터가 출력됩니다
    		var uniqueArrayTwo = [...setArrayTwo];

    		console.log("");
    		console.log("[runFunction] : [원본] : " + JSON.stringify(array));
    		console.log("[runFunction] : [중복 제거] : " + JSON.stringify(uniqueArrayTwo));
    		console.log("[runFunction] : [length] : " + uniqueArrayTwo.length);
    		console.log(""); 	

    	};

    </script>

[결과 출력]


[요약 설명]

/*

[JS 요약 설명]

1. window onload : 웹 브라우저 로딩 완료 상태를 나타냅니다

2. Set : 자바스크립트에서 중복되는 데이터를 제거해줍니다

3. set 을 사용해 중복 제거 후 배열 형태로 변환해줘야 정상적으로 데이터를 확인할 수 있습니다

*/


 

반응형
Comments