javascript オブジェクトからmapを生成する

作成日 2022.10.28
javascript
javascript

javascriptで、オブジェクトからmapを生成するサンプルコードを掲載してます。ブラウザはchromeで実行しています。「forEach」などでループ処理を行いオブジェクトからkeyとvalueを取得してsetすることで可能です。オブジェクト配列からも生成する手順を掲載してます。

1. 環境
2. オブジェクトからmapを生成
3. オブジェクトの配列（連想配列）からmapを生成
4. mapからオブジェクトを生成

環境

OS windows11 pro 64bit
ブラウザ chrome 107.0.5304.63

Javascript サンプル集はこちら

オブジェクトからmapを生成

オブジェクトからmapを生成するには、
1. mapを用意
2. ループ処理でmapでkeyとvalueを「set」
で可能です。

const obj = {
    "a": 1,
    "b": 2,
    "c": 3
}

const m = new Map();

Object.keys(obj).forEach( function(key) {
  m.set(key, obj[key]);
});

console.log(m);

実行結果

オブジェクトをループさせる方法は、複数やり方があるので下記のリンクをご参照下さい。

オブジェクトをループさせてkey・valueを全て取得する

オブジェクトの配列（連想配列）からmapを生成

オブジェクトの配列（連想配列）から「map」を生成する場合も、「forEach」などのループ処理を使用すれば可能です。

const arr = [
  {key: 'name', value: 'mebee'},
  {key: 'age', value: 25},
];

const m = new Map();

arr.forEach( function(v) {
  m.set(v.key, v.value);
});

console.log(m);

実行結果

「map」を使用するやり方もあります。

const arr = [
  {key: 'name', value: 'mebee'},
  {key: 'age', value: 25},
];

const m = new Map(
  arr.map(function(v) {
    return [v.key, v.value];
  }),
);

console.log(m);

逆に「map」から、オブジェクトの配列に戻す場合は、一度、スプレッド構文などで配列化して「map」を使用することで可能です。

const arr = [
  {key: 'name', value: 'mebee'},
  {key: 'age', value: 25},
];

const m = new Map(
  arr.map(function(v) {
    return [v.key, v.value];
  }),
);

console.log(m);

console.log([...m]); // [['name', 'mebee'],['age', 25]] 配列化すると二次元配列になる

const arrMap = [...m].map(([key, value]) => {
  return {[key]: value};
});

console.log(arrMap);

実行結果

mapからオブジェクトを生成

逆にmapからオブジェクトを生成する場合は「fromEntries」を使用します。

// mapを生成
let m = new Map([[1,'aaa'], [2,'bbb'], [3,'ccc']]);

// mapからオブジェクトに変換
obj = Object.fromEntries(m);

console.log(obj); // {1: 'aaa', 2: 'bbb', 3: 'ccc'}