JavaScript でオブジェクトの配列の特定のキーの値を使用してオブジェクトに変換する

プログラミング

やりたいこと

const data = [
  {
    id: 1,
    name: 'test1',
  },
  {
    id: 2,
    name: 'test2',
  },
  {
    id: 3,
    name: 'test3',
  },
];

のようなオブジェクトの配列を、idの値をキーとする以下のようなオブジェクトに変換。

const obj = {
  1: {
    id: 1,
    name: 'test1',
  }
  2: {
    id: 2,
    name: 'test2',
  }
  3: {
    id: 3,
    name: 'test3',
  }
}

このように変換しておくことで

2 in obj

で id = 2 のデータがあるかどうかがすぐわかり、また

obj[2]

で id = 2 のデータを簡単に取得可能。

やりかた

// 変換するデータ
const data = [
  {
    id: 1,
    name: 'test1',
  },
  {
    id: 2,
    name: 'test2',
  },
  {
    id: 3,
    name: 'test3',
  },
];

// 変換したデータ
const obj = Object.assign(...data.map(item => ({ [item.id]: item })));

詳細

data.map(item => ({ [item.id]: item })

map は 配列それぞれに変換を適用するために使用するメソッドです。

Array.prototype.map()
map() メソッドは、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。

ここでは item を ({ [item.id]: item }) に変換する関数を適用しています。

これによって

{
  id: 2,
  name: 'test2',
}

{
  2: {
    id: 2,
    name: 'test2',
  }
}

に変換されます。

{ [item.id]: item } という記述は ComputedPropertyName と呼ばれる構文を利用したもので、オブジェクトのプロパティ名を動的に設定できます。

const obj = { [item.id]: item };

は以下と同等ですが、 ComputedPropertyName は一行で記述できる点が大きなメリットです。

const obj = {};
obj[item.id] = item;

Object.assign(…[])

Object.assign は複数のオブジェクトのマージを行います。

Object.assign()
Object.assign() メソッドは、すべての列挙可能なプロパティの値を、1つ以上のコピー元オブジェクトからコピー先オブジェクトにコピーするために使用されます。戻り値としてコピー先オブジェクトを返します。

「…」 はスプレッド構文と呼ばれ、関数呼び出しで使用することで配列が展開され、それぞれが関数の引数になります。

スプレッド構文
スプレッド構文を使うと、関数呼び出しでは 0 個以上の引数として、Array リテラルでは 0 個以上の要素として、Object リテラルでは 0 個以上の key-value のペアとして、Array や String などの iterable オブジェクトをその場で展開します。

変換したい配列は前述の data.map によって以下のように変換されています。

[
  {
    1: {
      id: 1,
      name: 'test1',
    }
  },
  {
    2: {
      id: 2,
      name: 'test2',
    }
  },
  {
    3: {
      id: 3,
      name: 'test3',
    }
  },
];

したがって Object.assign(…[]) の個所は以下のように解釈されます。

Object.assign(
  {
    1: {
      id: 1,
      name: 'test1',
    }
  },
  {
    2: {
      id: 2,
      name: 'test2',
    }
  },
  {
    3: {
      id: 3,
      name: 'test3',
    }
  }
);

これによって最終に求めたかったオブジェクトが得られます。

{
  1: {
    id: 1,
    name: 'test1',
  }
  2: {
    id: 2,
    name: 'test2',
  }
  3: {
    id: 3,
    name: 'test3',
  }
}

コメント

タイトルとURLをコピーしました