Array 객체는 기본적으로 정렬 메서드가 있다.
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to sort the array.</p>
<button onclick="myFunction()">Try it</button>
<script type="text/javascript">
function myFunction()
{
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
</script>
</body>
</html>
W3schools에 있는 예제이다. 문자열을 정렬한다. 알파벳순으로 오름차순 정렬을 한다. 숫자의 경우에는 두가지 내림차순도 정렬이 가능하다.
오름차순 정렬
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to sort the array.</p>
<button onclick="myFunction()">Try it</button>
<script type="text/javascript">
function myFunction()
{
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return a-b});
var x=document.getElementById("demo");
x.innerHTML=points;
}
</script>
</body>
</html>
내림차순 정렬
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to sort the array.</p>
<button onclick="myFunction()">Try it</button>
<script type="text/javascript">
function myFunction()
{
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return b-a});
var x=document.getElementById("demo");
x.innerHTML=points;
}
</script>
</body>
</html>
정렬을 하는데 왜 함수를 사용했는지 궁금하다. 문자열에 이같은 함수를 사용하면 정렬이 꼬인다. 문자열의 경우에는 sort()를 하고 reverse()를 하면 내림차순 정렬이 되겠다. 포인트는 메서드를 실행하면 내부적으로 정렬이 된다는 것이다. 리턴값이 아니다.
학생 성적 정렬: 아마도 이런 방법으로 사용하기 위해 함수를 이용해 정렬했을지도 모르겠다. 기억해두자.
<!DOCTYPE html>
<html>
<head>
<script>
// 생성자 함수를 선언합니다.
function Student(name, korean, math, english, science) {
// 속성
this.이름 = name;
this.국어 = korean;
this.수학 = math;
this.영어 = english;
this.과학 = science;
// 메서드
this.getSum = function () {
return this.국어 + this.수학 + this.영어 + this.과학;
};
this.getAverage = function () {
return this.getSum() / 4;
};
this.toString = function () {
return this.이름 + '\t' + this.getSum() + '\t' + this.getAverage();
};
}
// 학생 정보 배열을 만듭니다.
var students = [];
students.push(new Student('윤인성', 87, 98, 88, 95));
students.push(new Student('연하진', 92, 98, 96, 98));
students.push(new Student('구지연', 76, 96, 94, 90));
students.push(new Student('나선주', 98, 92, 96, 92));
students.push(new Student('윤아린', 95, 98, 98, 98));
students.push(new Student('윤명월', 64, 88, 92, 92));
students.push(new Student('김미화', 82, 86, 98, 88));
students.push(new Student('김연화', 88, 74, 78, 92));
students.push(new Student('박아현', 97, 92, 88, 95));
students.push(new Student('서준서', 45, 52, 72, 78));
// 정렬하고 1등부터 3등까지만 배열에 남겨둡니다.
students.sort(function (left, right) {
return right.getSum() - left.getSum();
});
students = students.slice(0, 3);
// 출력합니다.
var output = '이름\t총점\t평균\n';
for (var i in students) {
output += students[i].toString() + '\n';
}
alert(output);
</script>
</head>
<body>
</body>
</html>
'Javascript' 카테고리의 다른 글
| BOM(Brower Object Model: 브라우저 객체 모델) (0) | 2012.07.06 |
|---|---|
| Array 객체의 요소 제거 (0) | 2012.07.06 |
| 메서드 체이닝 기술 (0) | 2012.07.05 |
| Object객체를 이용한 자료형 구분 (0) | 2012.07.05 |
| ECMAScript 5 추가 속성 (0) | 2012.07.05 |