本記事ではJavaScriptのsortとfilterを併用して並び替えする方法を書いていきます。
sortとfilterの使いどころ
sortとfilterを使いどころとして条件に一致した要素のみを取得し、並び替えをしたい時に使えます。私の場合、vue.jsとリアルタイム更新が可能なfirestoreのスナップショットで要素をステータスごとに分けて日付順に並び替える箇所で使用しました。firestoreにはorderby句もあるのですが、ステータス更新後リアルタイムでソートの並び替えをするにはcomputedでsortとfilterを使ってあげる必要があります。
JavaScriptのsort
JavaScriptにはsort()という便利なメソッドが用意されています。sortを使うと配列の要素を並び替えしてくれます。
例えば、下記のように[3,1,5]にsort()を使うと、[1,3,5]に並び変わります。
var arr = [3,1,5];
var result = arr.sort();
console.log(result);
// =>[ 1, 3, 5 ]しかしながら、[3,10,5]をソートしようとすると[ 10, 3, 5 ]になる。
var arr = [3,10,5];
var result = arr.sort();
console.log(result);
// =>[ 10, 3, 5 ]sort()を使って昇順に並び替えできない理由はsort()だと数値ではなく文字列として並び替えているからです。
この場合は下記のように記述すると適切にソートすることができます。
var arr = [3,10,5];
var result = arr.sort((a, b) => a - b);
console.log(result);
// =>[ 3, 5, 10 ]日付をソートしてみる
続いて日付をソートしてみましょう
arr = [{
"category": "python",
"created_at": new Date("2019/03/21")
},
{
"category": "ruby",
"created_at": new Date("2020/03/21")
},
{
"category": "python",
"created_at": new Date("2020/01/21")
},
{
"category": "python",
"created_at": new Date("2020/03/03")
}
]
arr.sort(function(a,b){
if(a.created_at < b.created_at) return -1;
if(a.created_at > b.created_at) return 1;
return 0;
});
console.log(arr)
// =>[
{ category: 'python', created_at: 2019-03-21T00:00:00.000Z },
{ category: 'python', created_at: 2020-01-21T00:00:00.000Z },
{ category: 'python', created_at: 2020-03-03T00:00:00.000Z },
{ category: 'ruby', created_at: 2020-03-21T00:00:00.000Z }
]sortとfilterを併用
続いてsortとfilterをsortしてみましょう。今回はカテゴリーがPythonに一致する要素のみをピックアップしてソートしていきます。
lists = [{
"category": "python",
"created_at": new Date("2019/03/21")
},
{
"category": "ruby",
"created_at": new Date("2020/03/21")
},
{
"category": "python",
"created_at": new Date("2020/01/21")
},
{
"category": "python",
"created_at": new Date("2020/03/03")
}
]
var result = lists.filter((list) => list.category === "python")
.slice()
.sort(function(a,b){
if(a.created_at < b.created_at) return -1;
if(a.created_at > b.created_at) return 1;
return 0;
});
console.log(result)
// =>[
{ category: 'python', created_at: 2019-03-21T00:00:00.000Z },
{ category: 'python', created_at: 2020-01-21T00:00:00.000Z },
{ category: 'python', created_at: 2020-03-03T00:00:00.000Z },
]以上、JavaScriptのsort()とfilterを併用して並び替えする方法についてでした。