[javascript] 자바스크립트 배열(Array) 문자 , 숫자 , 날짜 정렬(Sort)하기
1. 배열의 문자 정렬하기
var string_array = ['ban', 'kim' , 'han', 'choi' , 'kang' , 'an'];
var string_hangule_array = ['트와이스', '위너' , '에이핑크', '나중에' ,'가오가이거' , '쿠쿠다스' , '빵빠레'];
console.log(string_array);
// (6) ["ban", "kim", "han", "choi", "kang", "an"]
console.log(string_array.sort());
// ["an", "ban", "choi", "han", "kang", "kim"]
console.log(string_hangule_array);
// ["트와이스", "위너", "에이핑크", "나중에", "가오가이거", "쿠쿠다스", "빵빠레"]
console.log(string_hangule_array.sort());
//["가오가이거", "나중에", "빵빠레", "에이핑크", "위너", "쿠쿠다스", "트와이스"]
var string_mix_array = ['에이핑크', 'ban', '나중에' , '트와이스' , 'kim' , '위너' , 'han', '쿠쿠다스' , '빵빠레', 'choi' ,'가오가이거' , 'kang' , 'an'];
console.log(string_mix_array);
// ["에이핑크", "ban", "나중에", "트와이스", "kim", "위너", "han", "쿠쿠다스", "빵빠레", "choi", "가오가이거", "kang", "an"]
console.log(string_mix_array.sort());
// ["an", "ban", "choi", "han", "kang", "kim", "가오가이거", "나중에", "빵빠레", "에이핑크", "위너", "쿠쿠다스", "트와이스"]
결과 화면 (크롬 또는 익스플로어에서 F12를 누르고 console탭을 누르시면 확인이 가능합니다.)
간단하게 String.sort()를 사용하면 영어, 한글에서 정렬이 간편하게 된다.
2. 배열 숫자 정렬하기
var number_array = [10 , 99 , 7 , 12 , 3];
var string_number_array = ['10' , '99' , '7' , '12' , '3'];
console.log(number_array); // [10, 99, 7, 12, 3]
console.log(number_array.sort()); //[10, 12, 3, 7, 99]
console.log(string_number_array); // [10, 99, 7, 12, 3]
console.log(string_number_array.sort()); //[10, 12, 3, 7, 99]
결과 화면 (크롬 또는 익스플로어에서 F12를 누르고 console탭을 누르시면 확인이 가능합니다.)
결과를 보면 애석하게도 정렬이 되지 않는다. 왜냐하면, ASCII 문자 순서로 정렬이 되기 때문이다. 그래서 string_number_array와 number_array의 sort 결과가 둘다 동일하게 나왔다. 그렇다면 어떻게 해야하는가?
=> sort(sortFunction)를 직접 만들어줘야한다.
console.log(number_array.sort(number_ascending)); //[3, 7, 10, 12, 99]
console.log(number_array.sort(number_descending)); //[99, 12, 10, 7, 3]
function number_ascending(a, b) { // 오름차순
return a - b;
}
function number_descending(a, b) { // 내림차순
return b - a;
}
결과 화면 (크롬 또는 익스플로어에서 F12를 누르고 console탭을 누르시면 확인이 가능합니다.)
3. 배열 날짜 정렬하기
예제와 결과화면 코드를 올려드려요. 직접 해보시길 권장합니당~
var data = [
{ '날짜': "2012-11-14", '학년': 3, '점수': 200, },
{ '날짜': "2013-11-14", '학년': 1, '점수': 300, },
{ '날짜': "2017-11-14", '학년': 2, '점수': 90, },
{ '날짜': "2018-11-14", '학년': 2, '점수': 90, },
{ '날짜': "2019-11-14", '학년': 2, '점수': 90, },
{ '날짜': "2020-11-14", '학년': 2, '점수': 90, },
{ '날짜': "2021-11-31", '학년': 3, '점수': 200, },
{ '날짜': "2023-11-01", '학년': 2, '점수': 190, },
{ '날짜': "2002-11-14", '학년': 2, '점수': 90, },
{ '날짜': "2010-11-14", '학년': 2, '점수': 190, },
{ '날짜': "2008-11-14", '학년': 2, '점수': 90, },
{ '날짜': "2009-11-14", '학년': 1, '점수': 100, }
];
console.log(data.sort(date_ascending)); // 오름차순
function date_ascending(a, b) {
var dateA = new Date(a['날짜']).getTime();
var dateB = new Date(b['날짜']).getTime();
return dateA > dateB ? 1 : -1;
};
console.log(data.sort(date_descending)) // 내림차순
function date_descending(a, b) {
var dateA = new Date(a['날짜']).getTime();
var dateB = new Date(b['날짜']).getTime();
return dateA < dateB ? 1 : -1;
};
결과 화면 (크롬 또는 익스플로어에서 F12를 누르고 console탭을 누르시면 확인이 가능합니다.)
전체 테스트 코드
'[javascript]' 카테고리의 다른 글
| jsp servlet(서블렛)를 통한 ajax, object 편 (0) | 2018.04.21 |
|---|---|
| [javascript] 자바스크립트 셀렉트(select) 초기화 , 넣기 , 빼기 , 값읽기 (0) | 2018.04.20 |
| [javascript] 자바스크립트 날짜 입력받기 (input date 날짜 받기) , datepicker (0) | 2018.04.19 |
| [javascript] 자바스크립트 배열(Array) 선언과 확인하기( isArray() ) 와 typeof()로 확인 안되는 이유 (0) | 2018.04.17 |
| [javascript]자바스크립트 object,Object.keys(),Object.values() 다루기 (0) | 2018.04.16 |
미나미나미