【JavaScript】ReduceでObject（連想配列）を一つにまとめる方法

JavaScript

はじめに

こんにちは、SHOJIです。

本記事では、JavaScriptのReduceを使って、Object（連想配列）のリストを一つのObjectにまとめる方法を記載します。

やりたいこと

以下のようなデータがあった場合、id（ユニークキー）をキーとするObjectに変換して、idからアイテム名を取得できるようにしたい。

処理対象データイメージ


const list = [
    {id:1, item:"アイテム1"},
    {id:2, item:"アイテム2"},
    {id:3, item:"アイテム3"},
];

処理後データイメージ

{ '1': 'アイテム1', '2': 'アイテム2', '3': 'アイテム3' }

Reduceによる変換

const list = [
    {id:1, item:"アイテム1"},
    {id:2, item:"アイテム2"},
    {id:3, item:"アイテム3"},
];
​
const obj = list.reduce((x, y) => Object.assign(x, {[y.id]:y.item}), {});
​
console.log(obj); // { '1': 'アイテム1', '2': 'アイテム2', '3': 'アイテム3' }

処理内容の説明

Reduce自体は世にたくさんの解説記事があるので探してください、だけだと不親切なので簡単に。

const obj = list.reduce((x, y) => Object.assign(x, {[y.id]:y.item}), {});

Reduceの第一引数はメソッド、第二引数は初期値です。

第一引数のメソッドはlistの要素数分繰り返されます。

2つの引数（サンプルの x と y ）は、

  • x = 初期値、または前回の実行結果（サンプルの Object.assign(x, {[y.id]:y.item} の実行結果）

  • y = listの要素

です。

 

今回のサンプルだと以下のような処理が行われます。

  1. x = {}（初期値）、y = {id:1, item:"アイテム1"}（listの1番目の要素）として、Object.assign(x, {[y.id]:y.item})を実行。

  2. x = { '1': 'アイテム1' }（1の結果）、y = {id:2, item:"アイテム2"}（listの2番目の要素）として、Object.assign(x, {[y.id]:y.item})を実行。

  3. x = { '1': 'アイテム1', '2': 'アイテム2' }（2の結果）、y = {id:3, item:"アイテム3"}（listの3番目の要素）として、Object.assign(x, {[y.id]:y.item})を実行。

  4. listの全要素に対して処理を行ったので、3の結果である{ '1': 'アイテム1', '2': 'アイテム2', '3': 'アイテム3' } を結果として返し、処理を終了します。

使うシーン

一番使うであろうシーンは、REST APIを介してテーブルデータをJSON形式で取得したあとですかね。

そういう場合はカラムが複数あると思うので、キーに対して全項目を引けるようにまとめた方がいいかもしれません。

const list = [
    {id:1, item:"アイテム1", price:50},
    {id:2, item:"アイテム2", price:100},
    {id:3, item:"アイテム3", price:150},
];
​
const obj = list.reduce((x, y) => Object.assign(x, {[y.id]:y}), {});
​
console.log(obj);
// {
//   '1': { id: 1, item: 'アイテム1', price: 50 },
//   '2': { id: 2, item: 'アイテム2', price: 100 },
//   '3': { id: 3, item: 'アイテム3', price: 150 }
// }

この形だと、id = 1 のデータとして、item と price の両方の情報を取得できます。