こんにちは。ライトです。

Mapオブジェクトと連想配列はアプリを作成していく上で本当によく使います。
配列からオブジェクトに変換したり、オブジェクトから配列に変換するなど、、、

今回はそんなMapと連想配列の変換方法を学習してスマートに連想配列とオブジェクトを使えるようになるために書いていきます。

この記事をおすすめする人
・JavaScriptの初心者
・配列、オブジェクトをスマートに変換したい方
・for文を使って変換している方

Mapを連想配列に変換する

1.それぞれの値にmapをセットする

const map = new Map()
map.set('id', 1)
map.set('text', 'test')

// map -> Map{id: 1, text: 'test'}
  1. MapからIterator(イテレータ)を取り出す

Iterator(イテレータ)はListやMapなどのコレクションの要素を順番に処理する場合に使用します。
https://qiita.com/kura07/items/cf168a7ea20e8c2554c6

そして取り出したIterator(イテレータ)を配列変換します。

const map = new Map()
map.set('id', 1)
map.set('text', 'test')

// map -> Map{id: 1, text: 'test'}

let tmp = map.entries(map)
tmp = Array.from(tmp)
// tmp -> [['id', 1], ['text', 'test']]

配列に変換する理由はイテレータは配列ではないのでmapもreduceも使えないからです。
なのでArray.fromメソッドを使ってイテレーターを配列に変換します。

配列を連想配列に変換する

const map = new Map()
map.set('id', 1)
map.set('text', 'test')

// map -> Map{id: 1, text: 'test'}

let tmp = map.entries(map)
tmp = Array.from(tmp)
// tmp -> [['id', 1], ['text', 'test']]

tmp.map(([key, value]) => ({[key]: value}))
// tmp -> [{id: 1}, {text: 'test'}]

連想配列のキー名に変数を使って書くことができます。

いつもの連想配列の形になったので全ての連想配列をObject.assingを使って結合します。

配列の要素を全部結合するにはArray .reduceを使っていきます。

const map = new Map()
map.set('id', 1)
map.set('text', 'test')

// map -> Map{id: 1, text: 'test'}

let tmp = map.entries(map)
tmp = Array.from(tmp)
// tmp -> [['id', 1], ['text', 'test']]

tmp.map(([key, value]) => ({[key]: value}))
// tmp -> [{id: 1}, {text: 'test'}]

const result = tmp.reduce((l,r) => Object.assign(l, r), {})
// result -> {id: 1, text:'test'}

Mapオブジェクトは最初からイテレータブル

これから上記のコードをリファクタリングを行なっていきます。

まずMapオブジェクトはそれ自体がイテレータブルなのでArray.fromでラップすることができます。


const map = new Map()
map.set('id', 1)
map.set('text', 'test')
const mapToObject = map => Array.from(map.entries()).map(([key, value] => ({[key]:value})).reduce((l,r) => Object.assign(l, r), {})

さらにリファクタリングを行うと

const map = new Map()
map.set('id', 1)
map.set('text', 'test')

const mapToObject = map => [...map].reduce((l,[key, value]) => Object.assign(l, {[key]: value}), {})

かなりスッキリしましたね。

連想配列からMapに変換する

const object = {id, 1, text: 'test'}

let tmp = Object.entries(object)

const result = new Map(tmp)

// result -> Map{id: 1, text: 'test'}

こちらはObject.entriesを使えば簡単にオブジェクトからmapに変換することができます。

リファクタリングをするとこのようになります。

const ObjectToMap = object => Object.entries(object).reduce((l, [key, value]) => l.set(key, value), new Map())

まとめ

今回はMapから連想配列に、連想配列にMapから変更するための備忘録を残しました。

配列操作やオブジェクト操作をスムーズにできるようにして効率的にアプリ開発したいですね。