[TypeScript] 날짜 순으로 정렬(feat. sort, new Date(a.date))

고병표·2022년 2월 13일
0

TypeScript

목록 보기
3/5
post-thumbnail

수행 프로젝트
src > pages > Chats

날짜 순으로 배열 안 객체 정렬

  • new Date를 사용하면 특정 지점을 나타내는 Date 객체를 만들 수 있다.
chatList.sort((a: IMessageData, b: IMessageData): number =>
                +new Date(a.date) - +new Date(b.date))
~~
  • sort를 사용할때 props로 들어가는 a,b 타입 지정은 필수
  • sort의 타입 설정은 return 값이 있을 때만 필수

TS sort 추가 예시

/**
 * compareFunction(a, b)
 * - 리턴값이 0보다 작은 경우 a를 b보다 앞으로 정렬
 * - 리턴값이 0보다 큰 경우 b를 a보다 앞으로 정렬
 * - 리턴값이 0인 경우 변경 없음
 */
function main(): void
{
    // # 01. Example 
    let arr: number[] = [1, 4, 12, 10, 9];

    // 기본 정렬
    arr.sort();
    console.log(arr); // expected output: [1, 10, 12, 4, 9]

    // 오름차순 정렬 방법
    arr.sort((a: number, b: number): number => {
        return a - b;
    });
    console.log(arr); // expected output: [1, 4, 9, 10, 12]

    // 내림차순 정렬 방법
    arr.sort((a: number, b: number): number => {
        return b - a;
    });
    console.log(arr); // expected output: [12, 10, 9, 4, 1]

    // # 02. Example - value에 따른 정렬
    let arr2: IUser[] = 
    [
        { name: '자바', value: 13 },
        { name: '고', value: 29 },
        { name: '타입스크립트', value: 81 },
        { name: '파이썬', value: 77 },
        { name: '자바스크립트', value: 29 }
    ];

    // 오름차순 정렬 방법
    arr2.sort((a: IUser, b: IUser): number => {
        return a.value - b.value;
    });
    console.log(arr2);
    /**
     * expected output: 
     * [ 
     *      { name: '자바', value: '13' },
     *      { name: '고', value: '29' },
     *      { name: '자바스크립트', value: '29' },
     *      { name: '파이썬', value: '77' },
     *      { name: '타입스크립트', value: '81' } 
     * ]
     */

    // 내림차순 정렬 방법
    arr2.sort((a: IUser, b: IUser): number => {
        return b.value - a.value;
    });
    console.log(arr2);
    /**
     * expected output: 
     * [ 
     *      { name: '타입스크립트', value: '81' },
     *      { name: '파이썬', value: '77' },
     *      { name: '고', value: '29' },
     *      { name: '자바스크립트', value: '29' },
     *      { name: '자바', value: '13' } 
     * ]
     */
}

main();

interface IUser
{
    name: string;
    value: number;
}

참고링크

0개의 댓글