Object.entries() を使ってObject → 配列変換 #JavaScript

今回やりたいこと

sample object

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

これを

sample list

[
  {
    "key": "key-1",
    "value": "value-1"
  },
  {
    "key": "key-2",
    "value": "value-2"
  },
  {
    "key": "key-3",
    "value": "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 list 2）を出力するための記述例を追加しました。

sample object


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

これを

sample list 2

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

こうしたい場合

記述

Object.entries(obj).map(([key, value]) => ({[key]: 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"
}