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関数を作成する必要があります。

• arr.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}
];

実装のポイント

この要件を実現するには、Array.prototype.sort() メソッドにカスタムの比較関数（コンパレータ）を渡すのが最もシンプルな方法です。比較関数では以下のロジックを使用します。

• a.flag が false で b.flag が true の場合は -1 を返し、a を先に配置します。

• a.flag が true で b.flag が false の場合は 1 を返し、b を先に配置します。

• それ以外の場合は other プロパティの値で大小を比較し、元の相対的な順序をできるだけ維持します。

サンプルコード

実際のコードは次のとおりです。

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

なお、ES2019以降の仕様では Array.prototype.sort() は安定ソート（stable sort）であることが保証されているため、比較結果が等しい要素同士は元の配列での相対的な順序が保持されます。これにより、「条件に一致しない要素は元の順序のまま」という要件も自然に満たされる仕組みになっています。