JavaScriptでオブジェクト配列の中から最高値を持つオブジェクトを見つける方法

問題の概要

複数の student（学生）オブジェクトを格納した配列があるとします。各 student オブジェクトはいくつかのプロパティを持ち、そのうちの1つに grades（成績）という名前の配列が含まれています。

const arr = [
  {
    name: "Student 1",
    grades: [65, 61, 67, 70]
  },
  {
    name: "Student 2",
    grades: [50, 51, 53, 90]
  },
  {
    name: "Student 3",
    grades: [0, 20, 40, 60]
  }
];

ここで必要なのは、student の配列をループ処理し、grades 配列の中で最も高い成績を持つ学生オブジェクトを特定する関数を作成することです。

解決のアプローチ

この問題は、以下の2段階の手順で解決できます。

ステップ1： map() メソッドを使って、各学生の名前とその最高成績（Math.max.apply() で取得）を含む新しい配列を作成します。
ステップ2： 作成した配列を sort() メソッドで降順に並べ替え、最初の要素（最も高い成績を持つ学生）を取り出します。

実装例

実際のコードは次のようになります。

const arr = [
  {
    name: "Student 1",
    grades: [65, 61, 67, 70]
  },
  {
    name: "Student 2",
    grades: [50, 51, 53, 90]
  },
  {
    name: "Student 3",
    grades: [0, 20, 40, 60]
  }
];

// 各学生の最高成績を取得
const highestGrades = arr.map((stud, ind) => {
  return {
    name: stud.name,
    highestGrade: Math.max.apply(Math, stud.grades) // 学生ごとの最高成績を取得
  };
});

// 最高成績で降順にソートし、先頭の要素を取得
const bestStudent = highestGrades.sort((a, b) => {
  return b.highestGrade - a.highestGrade;
})[0];

console.log(bestStudent.name + " has the highest score of " + bestStudent.highestGrade);

コードのポイント

• Math.max.apply(Math, stud.grades)：配列内の最大値を取得する定番テクニックです。よりモダンな書き方として、スプレッド構文を使った Math.max(...stud.grades) も利用できます。
• sort((a, b) => b.highestGrade - a.highestGrade)：比較関数で降順ソートを行い、インデックス [0] で最高成績の学生を取得しています。

出力結果

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

Student 2 has the highest score of 90

このように、map() と sort() を組み合わせることで、ネストされた配列を持つオブジェクトの中から目的のオブジェクトを簡潔に抽出できます。データ量が多い場合は、一度のループで最大値を追跡する reduce() を使う方法もパフォーマンス面で有効です。