JavaScriptでは配列の要素をソートするためにsortメソッドが準備されています。
このsortメソッドの引数には「ソート順を定義する関数」を指定できるので、配列だけではなくオブジェクト配列もソートすることができます。
次のようなオブジェクト配列を例としてみましょう。idとnameプロパティからなるオブジェクトの配列です。
let obj = [ { id : "a0003", name : "Catherine" }, { id : "a0001", name : "Alexander" }, { id : "a0004", name : "David" }, { id : "a0002", name : "Ben" }, ]
ここでid順であったりname順であったりと、プロパティの値を見てオブジェクトをソートする関数を作成してみます。
オブジェクト配列をソートする方法
ソースコード
function compare( key, asc = true ) { // ① return function(a, b) { // ② // ③引数のチェック if(!a.hasOwnProperty(key) || !b.hasOwnProperty(key) || typeof asc !== "boolean"){ return 0; } // ④ソートの定義 if( a[key] > b[key] ){ return asc ? 1 : -1; } else if( a[key] < b[key] ){ return asc ? -1 : 1; } else { return 0; } } }
解説
① “compare”がsortメソッドの引数に指定する「ソート順を定義する関数」です。引数名keyにはソート対象とするオブジェクト名、ascには昇順か降順かをtrue/falseで指定するようにしています。
② compare関数は引数a,bをとる無名関数を戻り値として返します。この無名関数内で実際のソート順を定義していきます。
③ ソートの定義の前にhasOwnPropertyを使って引数keyで指定したプロパティ名がソート対象のオブジェクトに存在するかどうかをチェックしています。また引数ascで指定した値がBooleanかどうかをチェックし、異常があればソートを実行しないように”0″を返り値とします。
④ 順番を入れ替えるかどうかは返り値によって決定されます。例えば、
- a[key]がb[key]よりも大きいときは”正の値”
- a[key]がb[key]よりも小さいときに”負の値”
を返すと、keyで指定したプロパティの値を見てオブジェクトを「昇順」にソートすることができます。また「降順」とするには、
- a[key]がb[key]よりも大きいときは”負の値”
- a[key]がb[key]よりも小さいときに”正の値”
とします。
⑤ 実際に動作させてみましょう。compare(“id”,true)をsortメソッドの引数に指定すると「プロパティidの値を昇順」としてオブジェクト配列をソートすることができます。
obj.sort(compare("id",true)); // 0: {id: "a0001", name: "Alexander"} // 1: {id: "a0002", name: "Ben"} // 2: {id: "a0003", name: "Catherine"} // 3: {id: "a0004", name: "David"}