Zenn
🎉

オブジェクトを要素に持つ配列オブジェクトをオブジェクトに変換するための4つの実装方法をまとめてみた

2022/02/26に公開
JavaScript
Next.js
React
TypeScript
VS Code
tech

概要

配列オブジェクト（オブジェクトを要素に持つ配列）を「オブジェクトに変換する実装方法」をまとめたので、以下に4つほど紹介します！

本題の前に少しだけ

統合開発環境として、VSCodeを使用している場合は、Quokka.js をVSCodeにインストールすることをおすすめします。

今回のような、ちょっとした配列操作の動きを確かめたいときに、非常に有用ですので、このリンク をクリックして VSCode に install してみてください！

問題

// この配列を
const sampleArray = [
  {id: '1', name: 'React'},
  {id: '2', name: 'Angular'},
  {id: '3', name: 'Vue.js'},
];

// こうしたい
{
 '1': { id: '1', name: 'React' },
 '2': { id: '2', name: 'Angular' },
 '3': { id: '3', name: 'Vue.js' },
}

// どうやって実装する？

for...of...構文を用いた解法

for...of...構文を用いると、以下のように実装できます

const sampleArray = [
  {id: '1', name: 'React'},
  {id: '2', name: 'Angular'},
  {id: '3', name: 'Vue.js'},
];

let sampleObj = {}

for(const element of sampleArray) {
    sampleObj[element.id] = element;
}

console.log(sampleObj);

// 出力結果
{
 '1': { id: '1', name: 'React' },
 '2': { id: '2', name: 'Angular' },
 '3': { id: '3', name: 'Vue.js' },
}

forEach関数を用いた解法

forEach関数を用いると、以下のように実装できます

const sampleArray = [
  {id: '1', name: 'React'},
  {id: '2', name: 'Angular'},
  {id: '3', name: 'Vue.js'},
];

let sampleObj = {}

sampleArray.forEach((cur) =>
  sampleObj[cur.id] = cur;
}

console.log(sampleObj);

// 出力結果
{
 '1': { id: '1', name: 'React' },
 '2': { id: '2', name: 'Angular' },
 '3': { id: '3', name: 'Vue.js' },
}

reduce関数を用いた解法

reduce関数を用いると、以下のように実装できます

const sampleArray = [
  {id: '1', name: 'React'},
  {id: '2', name: 'Angular'},
  {id: '3', name: 'Vue.js'},
];

const result = sampleArray.reduce((acc, cur) => {
    acc[cur.id] = cur;
    return acc;
},{})

console.log(result);

// 出力結果
{
 '1': { id: '1', name: 'React' },
 '2': { id: '2', name: 'Angular' },
 '3': { id: '3', name: 'Vue.js' },
}

reduce関数の第二引数に「空オブジェクト」を渡すことで、簡単に配列をオブジェクトに変換することができます。

reduce関数 と Computed Property Names を用いた解法

reduce関数 と Computed Property Names を用いると以下のように実装できます。

const sampleArray = [
  {id: '1', name: 'React'},
  {id: '2', name: 'Angular'},
  {id: '3', name: 'Vue.js'},
];

const result = sampleArray.reduce((acc, cur) => ({...acc, [cur.id]: cur}), {});

console.log(result);

// 出力結果
{
 '1': { id: '1', name: 'React' },
 '2': { id: '2', name: 'Angular' },
 '3': { id: '3', name: 'Vue.js' },
}

Computed Property Names | MDN を用いると、処理が1行で書けるのでコードが簡潔になって可読性が高くなりますね。

最後に

エディタ上で Javascript の Playground を導入できる Quokka.js を用いて、JavaScript の配列操作の動きを確かめるようにすれば、開発効率がとても上がります。

  • この配列の関数どうやって使うんだろう？
  • ちょっと、どんな動きするかを試してみたいな
  • よし、VSCode で Quokka.js を開いて確かめてみよう
  • Quokka.js で 実際に JavaScript を書いて動きを確かめる

この流れで、配列操作を習得していく学習方法は実際に自分も試しましたが、とても良い学習方法だな、と感じたので、ぜひ試してみてください！

Discussion