【JavaScript】オブジェクト配列のプロパティをマージしてグループ化する方法

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

const arr = [
    {name: 'lorem', age: 20, color:'red'},
    {name: 'lorem', weight: 1, height:5},
    {name: 'hello', ipsum : 'dolor'}
];

ここで求められているのは、このようなオブジェクトの配列を受け取り、「name」プロパティの値が共通するオブジェクト同士のすべてのプロパティをグループ化(マージ)して返すJavaScript関数を作成することです。

例えば、上記の配列の場合、期待される出力は以下のようになります。

const output = [
    {name: 'lorem', age : 20, color: 'red', weight : 1, height : 5},
    {name: 'hello', ipsum : 'dolor'}
];

「lorem」という名前を持つ2つのオブジェクトが1つに統合され、それぞれが持っていたプロパティ(age、color、weight、height)が1つのオブジェクトにまとまっているのが分かります。

コード例

実際の実装コードは以下の通りです。

const arr = [
    {name: 'lorem', age: 20, color:'red'},
    {name: 'lorem', weight: 1, height:5},
    {name: 'hello', ipsum : 'dolor'}
];
const mergeList = (arr = []) => {
    const temp = {};
    arr.forEach(elem => {
        let name = elem.name;
        delete elem.name;
        temp[name] = { ...temp[name], ...elem };
    });
    const res = [];
    Object.keys(temp).forEach(key => {
        let object = temp[key];
        object.name = key;
        res.push(object);
    });
    return res;
};
console.log(mergeList(arr));

処理の流れ

この関数の仕組みを簡単に解説します。

まず、一時的なオブジェクトtempをハッシュマップとして利用します。各要素をループ処理しながら、「name」プロパティの値をキーとして取り出し、元のオブジェクトからはdeleteで削除しておきます。その後、スプレッド構文(...)を使って、同じキーに対応する既存のプロパティと現在のプロパティをマージしていきます。

最後に、Object.keys()でキーの一覧を取得し、各キーに紐づくマージ済みのオブジェクトへ「name」プロパティを戻したうえで、結果の配列として返しています。

出力結果

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

[
    { age: 20, color: 'red', weight: 1, height: 5, name: 'lorem' },
    { ipsum: 'dolor', name: 'hello' }
]

このように、「name」プロパティの値が同一であるオブジェクトのプロパティを、重複なく1つのオブジェクトへと効率的にグループ化できます。APIレスポンスやログデータなど、同名エントリを統合したい場面で役立つテクニックです。