투케이2K

68. (javascript/자바스크립트) array sort 사용해 특정 데이터 오름차순 (asc), 내림차순 (desc) 정렬 실시 본문

JavaScript

68. (javascript/자바스크립트) array sort 사용해 특정 데이터 오름차순 (asc), 내림차순 (desc) 정렬 실시

투케이2K 2021. 6. 20. 09:12

/* =========================== */

[ 개발 환경 설정 ]

개발 툴 : Edit++

개발 언어 : javascript

/* =========================== */

/* =========================== */

[소스 코드]

 

    <script>

    	/*
    	[JS 요약 설명]
    	1. window onload : 웹 브라우저 로딩 완료 상태를 나타냅니다
    	2. [] 대괄호 : 배열 객체를 선언할 때 사용합니다 
    	3. JSON.stringify : json 데이터를 문자열로 나타내줍니다
    	4. sort : 배열 데이터를 정렬할 때 사용합니다
    	*/


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

    		// 이벤트 함수 호출
    		main();   		
    	};


    	/* 이벤트 함수 정의 */
    	function main(){
    		console.log("");
    		console.log("main : start");
    		console.log("");


    		// 초기 변수 선언 실시
    		var int_arr = [5, 3, 1, 2, 4]; //정수    		
    		var str_arr = ["d", "A", "b", "C"]; //대소문자 혼합
    		var json_arr = [ {"idx" : 2, "name" : "투케이"}, {"idx" : 3, "name" : "케이투"}, {"idx" : 1, "name" : "twok"}]; //JSON

    		console.log("");
    		console.log("(초기) int_arr : " + int_arr);     		
    		console.log("(초기) str_arr : " + str_arr);
    		console.log("(초기) json_arr : " + JSON.stringify(json_arr));
    		console.log("");


    		// int_arr 데이터 오름차순 (작은순서) 정렬 실시
    		console.log("");
    		int_arr.sort(function(a, b) {
    			return a - b;
    		});
    		console.log("오름차순 int_arr : " + int_arr);    		


    		// int_arr 데이터 내림차순 (큰순서) 정렬 실시    		
    		int_arr.sort(function(a, b) {
    			return b - a;
    		});
    		console.log("내림차순 int_arr : " + int_arr);
    		console.log("");


    		// str_arr 데이터 오름차순 (작은순서) 정렬 실시
    		console.log("");
    		str_arr.sort(function(a, b) {
    			var upperCaseA = a.toUpperCase();
    			var upperCaseB = b.toUpperCase();

    			if(upperCaseA > upperCaseB) return 1;
    			if(upperCaseA < upperCaseB) return -1;
    			if(upperCaseA === upperCaseB) return 0;
    		});
    		console.log("오름차순 str_arr : " + str_arr);    		


    		// str_arr 데이터 내림차순 (큰순서) 정렬 실시    		
    		str_arr.sort(function(a, b) {
    			var upperCaseA = a.toUpperCase();
    			var upperCaseB = b.toUpperCase();

    			if(upperCaseA < upperCaseB) return 1;
    			if(upperCaseA > upperCaseB) return -1;
    			if(upperCaseA === upperCaseB) return 0;
    		});
    		console.log("내림차순 str_arr : " + str_arr);
    		console.log("");


    		// json_arr 데이터 특정 key 기준 오름차순 (작은순서) 정렬 실시
    		console.log("");
    		json_arr.sort(function(a, b) {
    			return a.idx - b.idx;
    		});
    		console.log("오름차순 json_arr : " + JSON.stringify(json_arr));    		


    		// json_arr 데이터 특정 key 기준 내림차순 (큰순서) 정렬 실시    		
    		json_arr.sort(function(a, b) {
    			return b.idx - a.idx;
    		});
    		console.log("내림차순 json_arr : " + JSON.stringify(json_arr));
    		console.log("");
    	};

    </script>

/* =========================== */

/* =========================== */

[결과 출력]

/* =========================== */

/* =========================== */

[요약 설명]

/*

[JS 요약 설명]

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

2. [] 대괄호 : 배열 객체를 선언할 때 사용합니다

3. JSON.stringify : json 데이터를 문자열로 나타내줍니다

4. sort : 배열 데이터를 정렬할 때 사용합니다

*/

/* =========================== */

반응형
Comments