TypeScript でMapからObject、ObjectからMapへの変換

はじめに

TypeScript でMapからObject、ObjectからMapへの変換する方法がいまいちわかってなかったので、色々試してみた。たぶん、JavaScriptでも一緒。

変換方法

Map -> Object

Object.fromEntries()で変換できる。引数にMapを直接渡せる。

Object.fromEntries() - JavaScript | MDN

Object -> Map

new Map(Object.entries())で変換できる。引数にObjectを渡す。

Object.entries() - JavaScript | MDN
Map - JavaScript | MDN

コード

こんな感じ。

type THoge = {
  fuga: string;
  piyo: number;
};

const map = new Map<string, THoge>();
map.set("1", { fuga: "fuga", piyo: 1 });
map.set("2", { fuga: "fuga", piyo: 2 });
console.log(map);
// Map { "1" => { fuga: "fuga", piyo: 1 }, "2" => { fuga: "fuga", piyo: 2 } }
console.log(JSON.stringify(map));
// {}
console.log(JSON.stringify(map.entries()));
// {}

const object = Object.fromEntries(map);
console.log(JSON.stringify(object));
// {"1":{"fuga":"fuga","piyo":1},"2":{"fuga":"fuga","piyo":2}}
const object2 = Object.fromEntries(map.entries());
console.log(JSON.stringify(object2));
// {"1":{"fuga":"fuga","piyo":1},"2":{"fuga":"fuga","piyo":2}}
console.log(JSON.stringify([...map]));
// [["1",{"fuga":"fuga","piyo":1}],["2",{"fuga":"fuga","piyo":2}]]
console.log(JSON.stringify([...map.entries()]));
// [["1",{"fuga":"fuga","piyo":1}],["2",{"fuga":"fuga","piyo":2}]]

const keys = map.keys();
const values = map.values();
const mapEntries = map.entries();
console.log([...keys], [...values], [...mapEntries]);
// [ "1", "2" ] [ { fuga: "fuga", piyo: 1 }, { fuga: "fuga", piyo: 2 } ] [ [ "1", { fuga: "fuga", piyo: 1 } ], [ "2", { fuga: "fuga", piyo: 2 } ] ]

const entries = Object.entries(object);
console.log(entries);
// [ [ "1", { fuga: "fuga", piyo: 1 } ], [ "2", { fuga: "fuga", piyo: 2 } ] ]
const map2 = new Map(entries);
console.log(map2);
// Map { "1" => { fuga: "fuga", piyo: 1 }, "2" => { fuga: "fuga", piyo: 2 } }

ポイント

• Object.fromEntries()は引数にIterableなものを期待していて、mapでもmap.entries()も同じ結果になる
• MapはJSON.stringify()できない
• [...map]も[...map.entries()]も同じ結果になる。

おわりに

こういうの苦手なので、動かしながら整理できてよかった。

参考

ここらわかると、試さなくても関数定義見れば動作想像できそう。
反復処理プロトコル - JavaScript | MDN

これ、分かりやすかった。
JavaScript の イテレータ を極める！ - Qiita