JavaScriptでオブジェクト配列からキーごとの最大値を持つ要素を取得する方法

問題の概要

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

const arr = [
   {a:1, b:"apples"},
   {a:3, b:"apples"},
   {a:4, b:"apples"},
   {a:1, b:"bananas"},
   {a:3, b:"bananas"},
   {a:5, b:"bananas"},
   {a:6, b:"bananas"},
   {a:3, b:"oranges"},
   {a:5, b:"oranges"},
   {a:6, b:"oranges"},
   {a:10, b:"oranges"}
];

この配列を受け取り、新しいオブジェクトの配列を返すJavaScript関数を作成する必要があります。

返される配列には、プロパティ「b」の一意な値ごとに1つのオブジェクトが含まれ、その中でプロパティ「a」の値が最大であるものを選び出します。

上記の例で言えば、「apples」グループからは最大値4、「bananas」グループからは最大値6、「oranges」グループからは最大値10を持つオブジェクトがそれぞれ抽出されることになります。

実装コード

以下がそのコードです。

const arr = [
   {a:1, b:"apples"},
   {a:3, b:"apples"},
   {a:4, b:"apples"},
   {a:1, b:"bananas"},
   {a:3, b:"bananas"},
   {a:5, b:"bananas"},
   {a:6, b:"bananas"},
   {a:3, b:"oranges"},
   {a:5, b:"oranges"},
   {a:6, b:"oranges"},
   {a:10, b:"oranges"}
];

const pickHighest = arr => {
   const res = [], map = {};

   arr.forEach(el => {
      if (!(el['b'] in map)) {
         map[el['b']] = res.push(el) - 1;
         return;
    };
      if(res[map[el['b']]]['a'] < el['a']){
         res[map[el['b']]] = el;
    };
   });
   return res;
};
console.log(pickHighest(arr));

コードの解説

この関数の仕組みを簡単に整理すると、次の通りです。

• 結果を格納する配列 res と、各キー(bの値)が res のどのインデックスに対応するかを記録するマップオブジェクト map を用意します。
• forEach で各要素を走査し、まだ見たことのない「b」の値であれば、その要素を res に追加し、push の戻り値(追加後の長さ)からインデックスを算出して map に記録します。
• すでに存在する「b」の値であれば、保存済みオブジェクトの「a」と現在の要素の「a」を比較し、現在の方が大きければ上書きします。
• 最終的に、各キーごとに最大の「a」を持つオブジェクトだけが残った配列を返します。

実行結果

コンソールへの出力は以下のようになります。

[
   { a: 4, b: 'apples' },
   { a: 6, b: 'bananas' },
   { a: 10, b: 'oranges' }
]

期待通り、「apples」「bananas」「oranges」それぞれのグループ内で最大の「a」の値を持つオブジェクトだけが抽出されました。

このアプローチは配列を一度だけ走査すればよいため、計算量は O(n) となり、データ件数が多い場合でも効率的に動作します。また、reduce や Map オブジェクトを組み合わせることでも同様の処理を実装できるので、用途や可読性の観点から使い分けると良いでしょう。