sort 함수를 사용하면 배열의 요소를 정렬하는 것이 간단하고 편리하며, JavaScript의 내장 함수이므로 코드를 효율적으로 작성할 수 있습니다. sort 함수는 기본적으로 문자열로 정렬하므로 숫자를 정렬할 때는 적절한 비교 함수를 제공해야 합니다. 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>
▼ 오름차순에서 내림차순으로 바꾸고 싶다면 아래와 같이 하시면 됩니다. 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>
▼ 다음은 함수를 사용해서 정렬을 해 보겠습니다. 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>
▼ 자바스크립트 내장 객체 Array 가 무엇인지 알려드립니다.
https://mainia.tistory.com/4216
자바스크립트(Javascript) 내장 객체 Array 알아보기 – 1회
환경: Eclipse Mars 자바스크립트에는 기본적으로 제공하는 다양한 내장 객체들이 있습니다. 내장 객체란 이미 정의 되어 있는 객체를 말합니다. 객체 선언 과정을 통해서 변수 정의만 해 주면 사용
mainia.tistory.com
https://mainia.tistory.com/4236
자바스크립트 내장 객체 Array 의 concat 함수 알아보기 – 2회
1회 때는 기본적인 객체 생성과 데이터를 꺼내는 방법에 대해 알아 보았습니다. 2회 이후로는 주요 속성과 함수 사용법을 알려 드리겠습니다. 첫 번째로 자주 사용하는 함수 중 concat() 가 있습니
mainia.tistory.com
▼ 자바스크립트에서 배열을 초기화하는 여러 방법들이 들어 있습니다.
https://mainia.tistory.com/6920
자바스크립트 배열 Array 초기화 하는 다양한 방법
JavaScript에서 배열은 다양한 곳에 쓰입니다. 예를 들어 데이터 수집, 필터링, 가공, 동적 목록 관리, 반복 작업, 데이터 그룹화 및 동적 데이터 구조 생성과 같은 다양한 데이터 관련 작업을 수행
mainia.tistory.com
'웹 프로그래밍 > 자바스크립트' 카테고리의 다른 글
| 자바스크립트 parseInt() 함수 사용하기 (0) | 2023.10.29 |
|---|---|
| 자바스크립트 JSON.stringify() 함수 사용하기 (0) | 2023.10.29 |
| 자바스크립트 setInterval() 함수 사용하는 방법 (0) | 2023.10.29 |
| 자바스크립트 push() 함수 사용하기 (0) | 2023.10.29 |
| 자바스크립트 addEventListener() 함수 사용하는 방법 (0) | 2023.10.29 |
| 자바스크립트 오브젝트 Object 객체 사용하기 (0) | 2023.10.28 |
| 자바스크립트 Javascript 함수 사용법 (3) | 2023.10.28 |
| 자바스크립트 Javascript 변수란 무엇인가, 변수의 정의와 사용법 (0) | 2023.10.26 |
