オブジェクト配列をソートする方法 – JavaScript

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"}