본문 바로가기
웹 프로그래밍

[JavaScript] - 객체 정렬

by CHML 2016. 4. 8.
1. Sort 메소드

자바스크립트에서는 별도의 정렬 메소드를 구현하지 않아도 배열 객체에서 정렬 메소드를 제공한다. 자바스크립트의 sort 메소드는 아래의 [코드 1]의 3번째 줄과 같이 "배열명.sort()"의 형태로 사용할 수 있다.


1
2
3
4
5
6
7
var arr = [0105-51];
 
arr.sort(function(a, b) { return a - b; });
 
for(var i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}
cs
[코드 1] 자바스크립트의 sort 메소드


위의 [코드 1]을 실행하면, 콘솔창에는 "-5 0 1 5 10"이 출력된다.


2. 객체 배열의 정렬

객체 배열의 경우는 객체의 멤버 변수 중 값의 비교를 원하는 변수에 대한 메소드를 별도로 정의한 다음, sort 메소드에 넘김으로써 객체들을 정렬할 수 있다. [코드 2]는 Person 객체와 Person 객체의 멤버 변수인 age에 따라 객체를 정렬하기 위한 comparePerson 메소드를 정의한다.


1
2
3
4
5
6
7
8
9
10
function Person(name, gender, age) {
    this.name = name;
    this.gender = gender;
    this.age = age;
}
 
function comparePerson(person1, person2) {
    return person1.age - person2.age;
}
 
cs
[코드 2] Person 객체 및 comparePerson 메소드 정의


아래의 [코드 3]은 5개의 Person 객체를 생성하고, comparePerson 메소드에 따라 나이순으로 Person 객체를 정렬한다.


1
2
3
4
5
6
7
8
9
10
11
12
13
var arr = [];
 
arr.push(new Person('name1''w'25));
arr.push(new Person('name2''w'49));
arr.push(new Person('name3''m'20));
arr.push(new Person('name4''m'17));
arr.push(new Person('name5''m'60));
 
arr.sort(comparePerson);
 
for (var i = 0; i < arr.length; i++) {
    console.log(arr[i].name + ' ' + arr[i].gender + ' ' + arr[i].age);
}
cs
[코드 3] Person 객체 생성 및 나이순 정렬


[코드 3]을 실행하면, 콘솔창에 [그림 1]과 같이 5개의 Person 객체가 나이순으로 정렬된 결과가 출력된다.


[그림 1] Person 객체 배열의 정렬 결과