JavaScriptでオブジェクト配列から上位n個の最大値を取得する方法

次のような、オブジェクトを要素に持つ配列があるとします。

const arr = [
    {"id":0,"start":0,"duration":117,"slide":4,"view":0},
    {"id":0,"start":0,"duration":12,"slide":1,"view":0},
    {"id":0,"start":0,"duration":41,"slide":2,"view":0},
    {"id":0,"start":0,"duration":29,"slide":3,"view":0},
    {"id":0,"start":0,"duration":123,"slide":3,"view":0},
    {"id":0,"start":0,"duration":417,"slide":2,"view":0},
    {"id":0,"start":0,"duration":12,"slide":1,"view":0},
    {"id":0,"start":0,"duration":67,"slide":2,"view":0}
];

ここで求められているのは、この配列を受け取り、「duration」プロパティの値が大きい順に上位n個の要素を抽出して、新しい配列として返す関数です。「上位」とは、つまりdurationの値が最も大きいオブジェクトのことを指します。

それでは、実際のコードを見ていきましょう。

実装例

const arr = [
    {"id":0,"start":0,"duration":117,"slide":4,"view":0},
    {"id":0,"start":0,"duration":12,"slide":1,"view":0},
    {"id":0,"start":0,"duration":41,"slide":2,"view":0},
    {"id":0,"start":0,"duration":29,"slide":3,"view":0},
    {"id":0,"start":0,"duration":123,"slide":3,"view":0},
    {"id":0,"start":0,"duration":417,"slide":2,"view":0},
    {"id":0,"start":0,"duration":12,"slide":1,"view":0},
    {"id":0,"start":0,"duration":67,"slide":2,"view":0}
];
const topN = (arr, n) => {
    if(n > arr.length){
        return false;
    }
    return arr
    .slice()
    .sort((a, b) => {
        return b.duration - a.duration
    })
    .slice(0, n);
};
console.log(topN(arr, 3));
console.log(topN(arr, 4));
console.log(topN(arr, 5));

この実装のポイントは以下の3点です。

• slice(): 最初に呼び出すことで元の配列のコピーを作成し、元のデータがsortによって破壊的に変更されるのを防いでいます。
• sort(): 比較関数「b.duration - a.duration」を使うことで、durationの値を降順（大きい順）に並べ替えています。
• slice(0, n): ソート済みの配列から先頭のn件だけを切り出して返します。また、指定されたnが配列の長さを超えている場合はfalseを返して異常を通知する安全策も組み込まれています。

出力結果

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

[
    { id: 0, start: 0, duration: 417, slide: 2, view: 0 },
    { id: 0, start: 0, duration: 123, slide: 3, view: 0 },
    { id: 0, start: 0, duration: 117, slide: 4, view: 0 }
]
[
    { id: 0, start: 0, duration: 417, slide: 2, view: 0 },
    { id: 0, start: 0, duration: 123, slide: 3, view: 0 },
    { id: 0, start: 0, duration: 117, slide: 4, view: 0 },
    { id: 0, start: 0, duration: 67, slide: 2, view: 0 }
]
[
    { id: 0, start: 0, duration: 417, slide: 2, view: 0 },
    { id: 0, start: 0, duration: 123, slide: 3, view: 0 },
    { id: 0, start: 0, duration: 117, slide: 4, view: 0 },
    { id: 0, start: 0, duration: 67, slide: 2, view: 0 },
    { id: 0, start: 0, duration: 41, slide: 2, view: 0 }
]

このように、slice()とsort()を組み合わせるだけで、元の配列を壊さずに任意の個数の上位要素を簡単に取得できます。duration以外のプロパティでランキングしたい場合も、比較関数の中身を変えるだけで同じロジックがそのまま使えるので、汎用性の高いパターンと言えるでしょう。