【JavaScript】基準配列の順序どおりにオブジェクト配列をソートする方法

JavaScriptでは、ある「文字列の配列」を基準として、別のオブジェクト配列をその順序どおりに並べ替えたい場面があります。本記事では、基準配列の順序に合わせてオブジェクト配列をソートする方法を、具体的なコード例とともにわかりやすく解説します。

やりたいこと

まず、並べ替えの基準となる配列と、並べ替え対象のオブジェクト配列を用意します。各オブジェクトの content プロパティの値が、基準配列内の文字列に対応しています。

const order = ["this", "is", "my", "custom", "order"];
const myObjects = [
    { id: 1, content: "is" },
    { id: 2, content: "my" },
    { id: 3, content: "this" },
    { id: 4, content: "custom" },
    { id: 5, content: "order" }
];

ここで必要なのは、これら2つの配列を受け取り、1つ目の配列(基準配列)に含まれる文字列の順序に合わせて、2つ目のオブジェクト配列の content プロパティが一致するように並べ替える関数です。

上記の配列の場合、期待される出力は次のとおりです。

[
    { id: 3, content: "this" },
    { id: 1, content: "is" },
    { id: 2, content: "my" },
    { id: 4, content: "custom" },
    { id: 5, content: "order" }
]

実装例

コードは以下のようになります。

const order = ["this", "is", "my", "custom", "order"];
const arrObj = [
    { id: 1, content: "is" },
    { id: 2, content: "my" },
    { id: 3, content: "this" },
    { id: 4, content: "custom" },
    { id: 5, content: "order" }
];

const sortByReference = (order, arrObj) => {
    // 基準配列の各要素に対応するオブジェクトを探す
    const sorted = order.map(el => {
        for (let i = 0; i < arrObj.length; ++i) {
            if (arrObj[i].content === el) {
                return arrObj[i];
            }
        }
    });
    return sorted;
};

console.log(sortByReference(order, arrObj));

実行結果

コンソールには次のように出力されます。オブジェクトが基準配列の順序("this" → "is" → "my" → "custom" → "order")どおりに並び替えられていることが確認できます。

[
    { id: 3, content: 'this' },
    { id: 1, content: 'is' },
    { id: 2, content: 'my' },
    { id: 4, content: 'custom' },
    { id: 5, content: 'order' }
]

コードの仕組み

• Array.prototype.map():基準配列の各要素に対して処理を行い、結果を新しい配列として返します。そのため、生成される配列は自動的に基準配列と同じ順序になります。
• for ループによる検索:各文字列に一致する content プロパティを持つオブジェクトを探し、見つかり次第そのオブジェクトを返します。
• 注意点:基準配列側に存在しても、オブジェクト側に一致する要素がない場合、その位置には undefined が入ります。必要に応じて filter() で除外しておくと安全です。

より簡潔な書き方：find() を使う

同じ処理は、Array.prototype.find() を使うともっと短く記述できます。

const sortByReference = (order, arrObj) =>
    order.map(el => arrObj.find(obj => obj.content === el))
         .filter(Boolean); // 一致しなかった要素(undefined)を除去

また、データ件数が多い場合(数千件以上など)は、事前に Map やオブジェクトで content の値をキーとしたインデックスを作成しておくと、全体を線形時間 O(n) で処理でき、パフォーマンスを大幅に向上させることができます。