자바스크립트(Javascript) 내장 객체 Array sort 함수 알아보기 – 4

 

환경: Eclipse Mars

 

sort() 함수는 Array 객체에서 자주 사용하는 함수입니다. 배열에 들어가 있는 요소값 들을 오름차순이나 내림차순, 알파벳 순으로 다시 재배치 시킬 수 있습니다. 그리고 sort() 인수로 함수를 입력해서 정렬하는 것도 가능합니다.

 

가장 기본적인 배열입니다. 인수로 아무것도 넣지 않으면 숫자와 문자는 오름차순으로 정렬하게 됩니다. 한글도 마찬가지로 첫 글자의 자음 순서대로 배열해서 반환해 줍니다. 그럼 반대 방향인 내림차순은 어떻게 구현할 까요?

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>Javascript</title>
<style type="text/css">
body {background-color: #e7e7e7;}
div {margin : 10px;}
</style>
<script type="text/javascript">
<!--
	var arr = new Array(6,0,4,2,1); 
	document.write(arr.sort() + "<br/>");
	
	var brr = new Array("f","z","r","a","b"); 
	document.write(brr.sort());
//-->
</script>
</head>
<body>
</body>
</html>

자바스크립트(Javascript) 내장 객체 Array 의 sort 함수 알아보기 – 4회

 

오름차순에서 내림차순으로 바꾸고 싶다면 아래와 같이 하시면 됩니다. sort() 함수로 오름차순으로 정렬한 뒤 순서를 reverse() 함수로 뒤바꾸는 것입니다. 그럼 내림차순으로 변경이 되는 것입니다

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>Javascript</title>
<style type="text/css">
body {background-color: #e7e7e7;}
div {margin : 10px;}
</style>
<script type="text/javascript">
<!--
	var arr = new Array(6,0,4,2,1); 
	arr.sort();
	document.write(arr.reverse() + "<br/>");
	
	var brr = new Array("f","z","r","a","b");
	brr.sort();
	document.write(brr.reverse());
//-->
</script>
</head>
<body>
</body>
</html>

자바스크립트(Javascript) 내장 객체 Array 의 sort 함수 알아보기 – 4회

 

다음은 함수를 사용해서 정렬을 해 보겠습니다. function(a,b){return a-b} 함수는 인수로 배열에서 두 개의 값이 전달됩니다. 그리고 a-b 또는 b-a 를 해서 나온 결과값 중에서 하나를 리턴하게 되는데 음수, 제로, 양수순으로 배열이 됩니다. 그래서 다음과 같이 a-b 일 때 function(a,b){return a-b} 양수가 앞으로 가게 됩니다. b-a 일 때는 음수가 앞으로 가게 되죠. 결과적으로 내림차순과 오름차순을 만들 수 있는 것입니다

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>Javascript</title>
<style type="text/css">
body {background-color: #e7e7e7;}
div {margin : 10px;}
</style>
<script type="text/javascript">
<!--
	// 오름차순으로 정렬하기 
	var arr = new Array(6,0,4,2,1); 
	arr.sort(function(a, b){return a-b});
	document.write(arr + "<br/>");
	
	// 내림차순으로 정렬하기
	var brr = new Array(6,0,4,2,1); 
	brr.sort(function(a, b){return b-a});
	document.write(brr + "<br/>");
//-->
</script>
</head>
<body>
</body>
</html>
저작자 표시 비영리 변경 금지
신고
Posted by 녹두장군


티스토리 툴바