JavaScriptで「12:30」などの時間をソートする場合に正常にソートできない方は、記事で問題を解決できます。大事なポイントは、コロンを除去した上でソートしているのかどうかです。
これから解説するソースコードはVue.jsを使って記述していますが、Vue.jsを知らなくても理解できる内容になっています。HTML, CSSは無視してJavaScriptのメソッドのみに着目してください。
アンチパターン : 分をソートできない
下記JSFiddleのresultタブで「並べ替えボタン」を押してみましょう。
早い順に並べ替える場合、13:10が13:00の前に来てしまっていますし、遅い順に並べ替えても13:01が13:00の前に来てしまっているので正常なソートではありません。
問題のソース
sortAsc() {
this.items.sort((a, b) => {
let asc_a = parseInt(a.start_time, 10);
let asc_b = parseInt(b.start_time, 10);
return asc_a - asc_b;
})
},
sortDesc() {
this.items.sort((a, b) => {
let desc_a = parseInt(a.start_time, 10);
let desc_b = parseInt(b.start_time, 10);
return desc_b - desc_a;
})
}原因はソート対象がコロンの前までになってしまっているからです。parseInt()で整数に変換してソートをかけても正常に動かないのはこのためです。
正常にソートできるように修正しましょう。
デザインパターン : 分まで正常にソートする
下記のJSFiddleは正常に動作しています。具体的に何が異なるのかを解説します。
ポイントはこれだけ！ – コロン(:)を除去する
上記のアンチパターンとの違いは、コロンを除去している点です。
sortAsc() {
this.items.sort((a, b) => {
const asc_a = this.convertInt(a.start_time)
const asc_b = this.convertInt(b.start_time)
return asc_a - asc_b;
})
},
sortDesc() {
this.items.sort((a, b) => {
const desc_a = this.convertInt(a.start_time);
const desc_b = this.convertInt(b.start_time);
return desc_b - desc_a;
})
},
convertInt(value) {
return parseInt(value.replace(":", ""), 10);
}コロンを除去して数値を返すconvertInt()関数を用意しました。ただ値を返すだけの処理ですが、複数箇所で使う可能性のある処理は共通化します。
コロンを削除した4桁の整数でソートが可能になりました。時間をソートする際にはコロンを除去してソートするのを忘れないようにしましょう。
