JavaScript
es2017

Object.entries() を使ってObject -> 配列変換

今回やりたいこと

sample object

{
    "key-1": "value-1",
    "key-2": "value-2",
    "key-3": "value-3"
}

これを

sample list

[
    {
        "key-1": "value-1"
    },
    {
        "key-2": "value-2"
    },
    {
        "key-3": "value-3"
    }
]

こうしたい。

せっかくなのでES2017のObject.entries()を使ってみました。
例では、先ほどのsample objectを変数名objとして用います。

obj = {
    "key-1": "value-1",
    "key-2": "value-2",
    "key-3": "value-3"
}

Object.entries()のみ利用

記述

Object.entries(obj)

出力

[
  [
    "key-1",
    "value-1"
  ],
  [
    "key-2",
    "value-2"
  ],
  [
    "key-3",
    "value-3"
  ]
]

上記のように[key, value]に変換された配列となります。
これだと今回のやりたいことは満たせていないので、別の方法を使います。

Object.entries() と map を使う

記述

Object.entries(obj).map(([key, value]) => ({key, value}))

出力

[
  {
    "key": "key-1",
    "value": "value-1"
  },
  {
    "key": "key-2",
    "value": "value-2"
  },
  {
    "key": "key-3",
    "value": "value-3"
  }
]

map は 配列の要素を引数にして関数の結果から新たに配列を生成するものですが、これを組み合わせました。
([key, value]) この部分でObject.entries()の戻り値をkey, valueで受け取り、あとは好きな形の配列にするというもの。

({key, value})の部分で、下記のような記述を省略できます。

Object.entries(obj).map(([key, value]) => ({'key': key, 'value': value}))

非常にシンプルですね。

おまけ

逆にsample list から sample objectに戻す場合、Array.prototype.reduce()をつかう方法をとりました。(もっとスマートな方法はあるかもしれませんが)

例では、先ほどのsample listを変数名listとして用います。

list = [
  {
    "key": "key-1",
    "value": "value-1"
  },
  {
    "key": "key-2",
    "value": "value-2"
  },
  {
    "key": "key-3",
    "value": "value-3"
  }
]

記述

// Object.assign
list.reduce((obj, item) => Object.assign(obj, {[item.key]: item.value}), {})

// スプレッド演算子
list.reduce((obj, item) => ({...obj, [item.key]: item.value}), {})

出力

{
    "key-1": "value-1",
    "key-2": "value-2",
    "key-3": "value-3"
}