JavaScriptで基準となる文字列配列の順序に従ってオブジェクトの配列を並べ替える方法

JavaScriptでは、オブジェクトの配列を、別の文字列配列で定義された順序に従って並べ替えたいケースがあります。例えば、ステータスを持つ注文データの配列と、その表示順序を定義した文字列配列があった場合などです。

問題の概要

以下のような、オブジェクトの配列と文字列の配列が与えられたとします。

const orders = [
    { status: "pending"},
    { status: "received" },
    { status: "sent" },
    { status: "pending" }
];
const statuses = ["pending", "sent", "received"];

ここで必要なのは、これら2つの配列を受け取り、statuses 配列の要素の順序に従って orders 配列を並べ替えるJavaScript関数を作成することです。つまり、最初の配列内のオブジェクトは、2番目の配列内の文字列の並び順に合わせて配置される必要があります。

解決のアプローチ

Array.prototype.sort() メソッドに比較関数を渡すことで実現できます。比較関数の中では、各オブジェクトの status プロパティが statuses 配列のどのインデックス位置にあるかを indexOf() で調べ、その差を返します。これにより、基準配列の順序に沿った並べ替えが可能になります。

コード例

const orders = [
    { status: "pending" },
    { status: "received" },
    { status: "sent" },
    { status: "pending" }
];
const statuses = ["pending", "sent", "received"];

const sortByRef = (orders, statuses) => {
    const sorter = (a, b) => {
        return statuses.indexOf(a.status) - statuses.indexOf(b.status);
    };
    orders.sort(sorter);
};

sortByRef(orders, statuses);
console.log(orders);

出力結果

コンソールには次のように出力されます。

[
    { status: 'pending' },
    { status: 'pending' },
    { status: 'sent' },
    { status: 'received' }
]

ご覧のとおり、「pending」のオブジェクトが先頭に2つ並び、続いて「sent」、「received」の順に並べ替えられています。これは statuses 配列で定義した順序と完全に一致しています。

注意点

indexOf() を使う方法では、基準配列に存在しない値を持つオブジェクトは -1 として扱われ、意図せず先頭に移動してしまう点に注意が必要です。そのようなケースが想定される場合は、事前にフィルタリングを行うか、Map オブジェクトで順序を管理することで、パフォーマンスと安全性の両方を向上させることができます。