JavaScriptで配列を並べ替える方法|flagがfalseの要素を先頭に移動する

たとえば、次のようなオブジェクトの配列があるとします。

const arr = [
    {flag: true, other: 1},
    {flag: true, other: 2},
    {flag: false, other: 3},
    {flag: true, other: 4},
    {flag: true, other: 5},
    {flag: true, other: 6},
    {flag: false, other: 7}
];

ここで求められるのは、このような配列を受け取り、次の条件に従って並べ替えるJavaScript関数を作成することです。

• flag === false の要素は配列の先頭側に配置される。ただし、false 同士の要素は元の出現順を保ったまま並ぶ。
• flag === true の要素は、元の配列での相対的な順序を維持する。
• 要素の出現順序(安定性)は重要である。

したがって、上記の配列の場合、期待される出力は次のようになります。

const output = [
    {flag: false, other: 3},
    {flag: false, other: 7},
    {flag: true, other: 1},
    {flag: true, other: 2},
    {flag: true, other: 4},
    {flag: true, other: 5},
    {flag: true, other: 6}
];

実装例

以下が実際のコードです。

const arr = [
    {flag: true, other: 1},
    {flag: true, other: 2},
    {flag: false, other: 3},
    {flag: true, other: 4},
    {flag: true, other: 5},
    {flag: true, other: 6},
    {flag: false, other: 7}
];
const sortByFlag = arr => {
    const sorter = (a, b) => {
        if(!a['flag'] && b['flag']){
            return -1;
        };
        if(a['flag'] && !b['flag']){
            return 1;
       }
        return a['other'] - b['other'];
    }
    arr.sort(sorter);
};
sortByFlag(arr);
console.log(arr);

出力結果

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

[
    { flag: false, other: 3 },
    { flag: false, other: 7 },
    { flag: true, other: 1 },
    { flag: true, other: 2 },
    { flag: true, other: 4 },
    { flag: true, other: 5 },
    { flag: true, other: 6 }
]

コードのポイント

この並べ替えの中核となるのは、Array.prototype.sort() に渡す比較関数(sorter)です。比較関数の戻り値によって要素の前後関係が決まります。

• a が false、b が true の場合:-1 を返し、a を b より前に配置する。
• a が true、b が false の場合:1 を返し、b を a より前に配置する。
• それ以外の場合:other プロパティの値で大小を比較する。

なお、両方の要素の flag が同じ値であるときに元の順序を厳密に維持したい場合は、return a['other'] - b['other']; の代わりに return 0; を返すようにします。ES2019 以降の仕様では sort() が安定ソートであることが保証されているため、0 を返した要素同士は元の順序どおりに並びます。

filter() を使った別のアプローチ

よりシンプルに書きたい場合は、条件で絞り込んだ配列をつなぎ合わせる方法もあります。こちらは元の順序が自然に保持されます。

const sorted = [
    ...arr.filter(item => !item.flag),
    ...arr.filter(item => item.flag)
];
console.log(sorted);

この方法では、まず flag が false の要素だけを抽出して先頭にまとめ、その後に残りの true の要素を続けるため、各グループ内の出現順は自動的に保たれます。元の配列を変更せず新しい配列として結果が得られる点もメリットです。