Javascript에서 날짜별로 배열을 정렬하는 방법

우리 모두는 날짜가 다른 데이터 집합이 있는 Javascript에서 날짜별로 빠르게 정렬하려는 상황에 처해 있습니다. 이것이 어떻게 작동하는지 봅시다.

Javascript 날짜에 대한 참고 사항: Javascript에는 date와 같은 것이 없다는 점에 유의해야 합니다. 대신 Javascript는 기본적으로 날짜-시간만 있습니다. 즉, 모든 날짜에는 관련 시간이 함께 제공됩니다. You can read more about Javascript Dates here .

Javascript에서 날짜순으로 정렬하는 방법

날짜별로 정렬하는 첫 번째 단계는 모든 날짜가 date 형식인지 확인하는 것입니다. 다음과 같은 객체가 있다고 가정합니다.

let articles = [
    { name: "HTML Inputs", date: "03/03/2022" },
    { name: "Python Tips", date: "04/04/2022" },
    { name: "Javascript Objects", date: "05/05/2022" }
]

date 속성이 텍스트 형식이기 때문에 날짜 정렬에는 실제로 작동하지 않습니다. 특정 상황에 따라 이를 약간 다르게 처리해야 할 수도 있습니다. 이를 위해 각 날짜를 슬래시로 나누고 값을 유효한 날짜 값으로 바꾸겠습니다.

let articles = [
    { name: "HTML Inputs", date: "12/03/2022" },
    { name: "Python Tips", date: "04/06/2022" },
    { name: "Javascript Objects", date: "05/05/2022" }
]

for(let article of articles) {
    // Split the date by the slash, resulting in an array of [ '03', '03', '2022' ], for example
    let dateArr = article.date.split('/');
    // Year, month, and day from the array. We subtract 1 from month, since months start counting from 0 in Javascript dates.
    let year = parseFloat(dateArr[2]);
    let month = parseFloat(dateArr[1]) - 1;
    let day = parseFloat(dateArr[0])
    // Pass in the different components as year, month, day to get the valid date
    let articleDate = new Date(year, month, day);
    // Update the object
    article.date = articleDate;
}   

console.log(articles);
// This will output the object, now with valid dates!

때때로, 당신은 이것을 할 필요가 없을 것입니다. 경우에 따라 유효한 날짜가 있을 수 있습니다. 예를 들어 날짜를 변환한 후 console.log에 대한 위의 articles에서 Thu Mar 03 2022 00:00:00 GMT+0000 (Greenwich Mean Time)} 형식으로 표시되기 때문에 확인할 수 있습니다.

어쨌든 이제 표준 날짜 형식으로 날짜를 얻었으니 정렬해 보겠습니다. 이를 위해 sort를 사용합니다.

let articles = [
    { name: "HTML Inputs", date: "03/03/2022" },
    { name: "Python Tips", date: "04/04/2022" },
    { name: "Javascript Objects", date: "05/05/2022" }
]

for(let article of articles) {
    // Split the date by the slash, resulting in an array of [ '03', '03', '2022' ], for example
    let dateArr = article.date.split('/');
    // Year, month, and day from the array. We subtract 1 from month, since months start counting from 0 in Javascript dates.
    let year = parseFloat(dateArr[2]);
    let month = parseFloat(dateArr[1]) - 1;
    let day = parseFloat(dateArr[0])
    // Pass in the different components as year, month, day to get the valid date
    let articleDate = new Date(year, month, day);
    // Update the object
    article.date = articleDate;
}   

console.log(articles);
// This will output
VM93:20 (3) [{…}, {…}, {…}]0: {name: 'HTML Inputs', date: Thu Mar 03 2022 00:00:00 GMT+0000 (Greenwich Mean Time)}1: {name: 'Python Tips', date: Mon Apr 04 2022 00:00:00 GMT+0100 (British Summer Time)}2: {name: 'Javascript Objects', date: Thu May 05 2022 00:00:00 GMT+0100 (British Summer Time)}length: 3[[Prototype]]: Array(0)
undefined
let articles = [
    { name: "HTML Inputs", date: "12/03/2022" },
    { name: "Python Tips", date: "04/06/2022" },
    { name: "Javascript Objects", date: "05/05/2022" }
]

for(let article of articles) {
    // Split the date by the slash, resulting in an array of [ '03', '03', '2022' ], for example
    let dateArr = article.date.split('/');
    // Year, month, and day from the array. We subtract 1 from month, since months start counting from 0 in Javascript dates.
    let year = parseFloat(dateArr[2]);
    let month = parseFloat(dateArr[1]) - 1;
    let day = parseFloat(dateArr[0])
    // Pass in the different components as year, month, day to get the valid date
    let articleDate = new Date(year, month, day);
    // Update the object
    article.date = articleDate;
}   

articles.sort((a, b) => a.date - b.date);
console.log(articles);

이제 여기서 주목해야 할 중요한 사항은 sort가 원래 배열을 변경한다는 것입니다. 따라서 저장하기 위해 새 변수를 만들 필요가 없습니다. 따라서 articles는 가장 이른 날짜부터 가장 최근 날짜까지 날짜별로 영구적으로 정렬됩니다.

반대로 하고 싶다면 articles.sort((a, b) => b.date - a.date) 를 작성하십시오.

Javascript에서 날짜를 숫자처럼 정렬할 수 있는 이유는 무엇입니까?

이것이 작동하는 이유에 대해 혼란스러워 보일 수 있습니다. 확실히 date는 날짜입니다. 그렇다면 서로 빼는 이유는 무엇입니까? 간단히 말해서 앞서 언급했듯이 Javascript에는 date 유형이 없고 date-time 유형만 있습니다.

즉, 모든 날짜는 날짜에 시간을 더한 것입니다. 자바스크립트는 이를 1970년 1월 1일 이후 경과된 초(또는 자바스크립트의 경우 밀리초)를 나타내는 숫자인 유닉스 타임스탬프로 내부적으로 이를 나타냅니다. 따라서 우리는 자바스크립트에서 서로 날짜를 뺄 수 있습니다. 실제로는 숫자로 표현됩니다.