'#자바스크립트 정렬'에 해당되는 글 1건

[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탭을 누르시면 확인이 가능합니다.)



전체 테스트 코드


블로그 이미지

미나미나미

,