【JavaScript】日付プロパティでオブジェクト配列を並べ替える方法

例えば、次のようなオブジェクトの配列があるとします。

const arr = [{id: 1, date: 'Mar 12 2012 10:00:00 AM'}, {id: 2, date: 'Mar 8 2012 08:00:00 AM'}];

このような配列を受け取り、各オブジェクトが持つ date プロパティの値に基づいて並べ替える JavaScript 関数を作成する必要があります。並び順は「新しい日付から古い日付へ」でも「古い日付から新しい日付へ」どちらでも構いません。

基本的なアプローチとしては、文字列形式の日付を JavaScript の Date オブジェクトに変換し、そのタイムスタンプ(ミリ秒)同士を比較してソートします。Array.prototype.sort() メソッドに比較関数を渡すことで、シンプルかつ確実に実装できます。

実装例

実際のコードは以下のようになります。

const arr = [{id: 1, date: 'Mar 12 2012 10:00:00 AM'}, {id: 2, date: 'Mar 8 2012 08:00:00 AM'}];
const sortByDate = arr => {
    const sorter = (a, b) => {
        return new Date(a.date).getTime() - new Date(b.date).getTime();
    }
    arr.sort(sorter);
};
sortByDate(arr);
console.log(arr);

出力結果

コンソールには次のように表示されます。

[
    { id: 2, date: 'Mar 8 2012 08:00:00 AM' },
    { id: 1, date: 'Mar 12 2012 10:00:00 AM' }
]

コードの解説

この例では、比較関数 sorter の内部で new Date() を使って各オブジェクトの日付文字列を Date オブジェクトに変換し、getTime() メソッドでミリ秒単位のタイムスタンプを取得しています。両者の差分を返すことで、配列は古い日付のオブジェクトが先頭に来る昇順で並べ替えられます。

逆に、新しい日付を先頭にしたい(降順にソートしたい)場合は、減算の順序を入れ替えて new Date(b.date).getTime() - new Date(a.date).getTime() とすれば簡単に実現できます。