独自ルールでソートしたい（JavaScript）

Question

やりたいこと

一致しない日時の情報を切り分けた上でソートし直したいです。

具体例

例）このリストを、本日時点の日時を基準に、日付が近い順にソートし直したい。

var events_list = [
   { id: 1, name: '元旦', date: "2021-01-01T00:00:00.000000000Z" },
   { id: 2, name: '桜祭り', date: "2021-03-01T10:00:00.000000000Z" },
   { id: 3, name: '夏祭り', date: "2021-08-12T10:00:00.000000000Z" },
   { id: 4 name: 'クリスマス', date: "2021-12-24T00:00:00.000000000Z" }
];

希望）本日2021/2/10を基準とした場合、このように並び替えたい。
var events_list = [
   { id: 2, name: '桜祭り', date: "2021-03-01T10:00:00.000000000Z" },
   { id: 1, name: '元旦', date: "2021-01-01T00:00:00.000000000Z" },
   { id: 3, name: '夏祭り', date: "2021-08-12T10:00:00.000000000Z" },
   { id: 4 name: 'クリスマス', date: "2021-12-24T00:00:00.000000000Z" }
];

現在の日時情報は、元々moment.jsを使って取得していたので
2021-02-19T00:00:00+09:00（例）が手元にあります。

試したこと

そのため、今はこう書いています。

var sortTime_reset = events_list.sort(function(a, b){

　sortTime_a = a.date;
　sortTime_b = b.date;

　//events_listのdateから数字以外を削除、桁数を12桁に揃える
　sortTime_str_a = sortTime_a
　　　　.substr(0, 16)
　　　　.replace( /-/g , "" ).replace( /:/g , "" ).replace( /T/g , "" );
　sortTime_str_b = sortTime_b
　　　　.substr(0, 16)
　　　　.replace( /-/g , "" ).replace( /:/g , "" ).replace( /T/g , "" );

　//現在時刻のフォーマット（2021-02-19T00:00:00+09:00）から数字以外を削除、桁数を１２桁に揃える
　sortTimeNow_str = time_now.substr(0, 16)
　　.replace( /-/g , "" )
　　.replace( /:/g , "" ).replace( /T/g , "" ).replace( /'+'/g , "" );

　//現在時刻との差分を出す
　sortTime_result_a = sortTimeNow_str - sortTime_str_a;
　sortTime_result_b = sortTimeNow_str - sortTime_str_b;

 //比較
　if (sortTime_result_a < sortTime_result_b ) {
　　return -1;
　} else {
　　return 1;
　}

});

ただ、動かしてみてもソート前と変わらない並びのままです。
console.logで見る限り「現在時刻との差分を出す」までは動いているようなのですが、
それを元にevents_listを並び替えることができません…。

何かしらご教授いただければ幸いです。
どうぞよろしくお願いいたします。

Answer 1

　//現在時刻との差分を出す
　sortTime_result_a = sortTimeNow_str - sortTime_str_a;
　sortTime_result_b = sortTimeNow_str - sortTime_str_b;

基準日との距離を比較したいのでしたら、差分の絶対値を比較する必要があります。

　//現在時刻との差分を出す
　const sortTime_result_a = Math.abs(sortTimeNow_str - sortTime_str_a);
　const sortTime_result_b = Math.abs(sortTimeNow_str - sortTime_str_b);

---

いまどきのブラウザなら、Date.parse() が ISO 8601 形式をパーズできることは保証されているので、変に文字列操作しなくても Date.parse(a.date) で数値が返ります。

関数中の変数がすべてグローバル変数になってます。

Comments

[spangl]

『Date.parse(a.date)』、眼から鱗でした…！
おかげさまでコード自体もかなり短く、以前よりずっと見やすいものに作り替えることができました。
差分の比較についてもおっしゃる通りです。
勉強になりました。レスつけてくださってありがとうございました！

Answer 2

独自ルールの比較関数を書けばいいです

意外と簡単にできる、JavaScriptでオブジェクトの配列を並べ替える方法 – WPJ

Comments

[spangl]

比較関数もわかっていなかった身で恐縮です…
ですがお教えいただいた参考リンク、大変わかりやすかったです。ありがとうございます！

Answer 3

（現在時刻 - 時刻A）という計算だと時刻Aが過去なら負の値になり未来なら正の値を取り、時刻Aがより未来なほど大きくなります。時間の間の距離を測るなら差を累乗するか、絶対値を取る必要があります。

　sortTime_result_a = (sortTimeNow_str - sortTime_str_a)**2;
　sortTime_result_b = (sortTimeNow_str - sortTime_str_b)**2;

まず、比較関数だけでちゃんと思った通りに比較できてるかを確かめて、どこが思い通りじゃないのか問題を分解するようにしたほうがいいです。

Comments

[spangl]

「比較関数」という言葉さえよく分かっていなかったため、
お教えいただいたおかげで自分の疑問点をより粒度高く調べることができ、
また絶対数の出し方についても大変勉強になりました…。ありがとうございます！