【JavaScript】オブジェクトの配列を1つのオブジェクトに変換する方法

オブジェクトの配列を1つのオブジェクトに変換するには？

まずは、変換元となるデータを確認しましょう。以下のような、名前（name）と点数（score）を持つオブジェクトの配列を想定します。

const arr = [
    {"name": "Rahul", "score": 89},
    {"name": "Vivek", "score": 88},
    {"name": "Rakesh", "score": 75},
    {"name": "Sourav", "score": 82},
    {"name": "Gautam", "score": 91},
    {"name": "Sunil", "score": 79},
];

この配列を受け取り、「name」の値をキー（プロパティ名）、「score」の値を対応する値とするオブジェクトを生成する関数を作成します。期待する出力は次のとおりです。

{ Rahul: 89, Vivek: 88, Rakesh: 75, Sourav: 82, Gautam: 91, Sunil: 79 }

方法1：for ループで変換する

最も基本的なのは、for ループで配列を先頭から順に走査し、各要素の name をキーとして score を代入していく方法です。分割代入を使えば、各要素から name と score を簡潔に取り出せます。

const buildObject = arr => {
    const obj = {};
    for (let i = 0; i < arr.length; i++) {
        const { name, score } = arr[i];
        obj[name] = score;
    }
    return obj;
};

console.log(buildObject(arr));

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

{ Rahul: 89, Vivek: 88, Rakesh: 75, Sourav: 82, Gautam: 91, Sunil: 79 }

方法2：Array.prototype.reduce() で変換する

より関数型的に記述したい場合は、Array.prototype.reduce() が便利です。初期値として空オブジェクト {} を渡し、各要素を処理するたびにキーと値を追加していきます。

const buildObject = arr =>
    arr.reduce((acc, { name, score }) => {
        acc[name] = score;
        return acc;
    }, {});

console.log(buildObject(arr));
// { Rahul: 89, Vivek: 88, Rakesh: 75, Sourav: 82, Gautam: 91, Sunil: 79 }

方法3：Object.fromEntries() で変換する（ES2019以降）

モダンな環境では、map() と Object.fromEntries() を組み合わせることで、さらに簡潔に書くこともできます。

const buildObject = arr =>
    Object.fromEntries(arr.map(({ name, score }) => [name, score]));

console.log(buildObject(arr));
// { Rahul: 89, Vivek: 88, Rakesh: 75, Sourav: 82, Gautam: 91, Sunil: 79 }

まとめ

• オブジェクトの配列を1つのオブジェクトに変換するには、for ループや reduce() を使う方法が基本です。
• ES2019 以降の環境では、Object.fromEntries() と map() の組み合わせが最も簡潔です。
• いずれの方法でも、「name をキー、score を値」というマッピング処理という考え方は共通しています。