JavaScript 複数キーを対象とするソートの方法

概要

画面上テーブルで表示するようなデータを配列で持つ場合、以下のように オブジェクトを配列で持つようにする場合が結構あると思う。

[
    {
        "id": 1,
        "group": 1,
        "name": "tom"
    },
    {
        "id": 2,
        "group": 1,
        "name": "tim"
    }
]

このような形のデータを画面処理でソートする際、
さらには複数キーでのソートを行いたい場合に実装した内容のメモ書きになります。

詳細

まずはベースとなるソート処理の関数
やってることとしては、keyを使って比較するオブジェクト（aとb）の値を取得し、判定するロジック。
後ろの引数で昇順、降順、データがない場合の表示順を制御できるようにもしてる。

const defaultSortFunc = function(a, b, key, direction = 1, nullsFirst = 1) {
  if (a[key] == undefined && b[key] == undefined) return 0;
  if (a[key] == undefined) return nullsFirst * 1;
  if (b[key] == undefined) return nullsFirst * -1;
  if (a[key] > b[key]) return direction * 1;
  if (a[key] < b[key]) return direction * -1;
  return 0;
}

ソートキーが１つの場合は、sort処理内で関数を呼び出すだけでおしまい。

const data = [
  {"id":1,"group":1,"name":"tom"},
  {"id":2,"group":1,"name":"tim"},
  {"id":3,"group":3,"name":"tomas"},
  {"id":4,"group":3,"name":"tanaka"},
  {"id":5,"group":2,"name":"takahashi"},
  {"id":6,"group":2,"name":"takada"}
]
data.sort((a, b) => defaultSortFunc(a, b, 'name'))

ソートキーが複数の場合は、以下のような処理になる。
対象キーでソートの判断がつかない場合のみ、次のキーでのソートを行っていくようなイメージ。

const sortFunc = function(data, keys) {
  const _data = data.slice();
  _data.sort((a, b) => {
    let order = 0;
    keys.some(key => {
      order = defaultSortFunc(a, b, key);
      return !!order;
    });
    return order;
  });
  return _data;
}

上記の関数を呼び出してソートを行う場合は以下のような呼び出し方になる。
ソートのキーとなる項目を配列で渡してあげる。

const data = [
  {"id":1,"group":1,"name":"tom"},
  {"id":2,"group":1,"name":"tim"},
  {"id":3,"group":3,"name":"tomas"},
  {"id":4,"group":3,"name":"tanaka"},
  {"id":5,"group":2,"name":"takahashi"},
  {"id":6,"group":2,"name":"takada"}
]
sortFunc(data, ['group','id'])

まとめ

オブジェクトを配列で持つこの形はAPIのレスポンスなどでも結構多い形のイメージがあるので、
結構使いどころがある処理だと思います。

ソートの基本的な処理を関数にして呼び出しておく形にすると、
ソート処理で特殊な判断をしたい項目があったら関数を置き換えてソート処理をするなど、
応用がきくので個人的には便利だと思っています。