JavaScriptの配列をオブジェクトに変換する

JavaScriptの配列をオブジェクトに変換する方法をよく忘れるのでメモで残しておく

やりたいこと

配列からオブジェクトに変換する
以下のようにIDの入ったオブジェクトの配列をAPIで受け取った時にIDをkeyとしたオブジェクトに変換したい

[
   { id: 0, value: "tomato" },
   { id: 1, value: "orange" },
   { id: 2, value: "apple" },
   ...
]

//IDをキーにしたオブジェクトに変換したい

{
   0: { id: 0, value: "tomato" },
   1: { id: 1, value: "orange" },
   2: { id: 2, value: "apple" },
   ...
}

Object.fromEntries()を使う

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries

Object.fromEntries(data.map(obj => [obj.id, obj]))

Array.prototype.reduce() でオブジェクトを使いまわ

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

data.reduce((acc, obj) => {
  acc[obj.id] = obj;
  return acc;
}, {});

Array.prototype.reduce()でスプレッド構文を使う

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax#%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%83%AA%E3%83%86%E3%83%A9%E3%83%AB%E3%81%A7%E3%81%AE%E3%82%B9%E3%83%97%E3%83%AC%E3%83%83%E3%83%89%E6%A7%8B%E6%96%87

data.reduce((acc, obj) => ({
  ...acc,
  [obj.id]: obj
}), {});

コメントを残す

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。