JSFiddle - React, Tailwind, and code Playground

by ken3desu

HTML

<div>
  <h5>Object</h5>
  <pre id="obj-json"></pre>
  <h5>Map</h5>
  <pre id="map-json"></pre>
</div>

JavaScript

const obj = {
  foo: 'bar',
  fizz: 'bazz',
  hoge: 'fuga'
}
/*
new Map([
  ["foo","bar"],
  ["fizz","bazz"],
  ["hoge","piyo"]
])
↑の様に[key, value]の配列を渡すのがMapのコンストラクタの要求です。
↓ではオブジェクト的に手書きしたいため Object.entries でオブジェクトを配列に変換しています
  @see https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/entries
*/
const map = new Map(Object.entries({
  foo: 'bar', // key と value のペアを渡します
  fizz: 'bazz',
  hoge: 'fuga'
}));
const imBar = map.get('foo')// foo に対応する 'bar' を取得
map.set('hoge', 'piyo')// hoge に対応する部分にあった fuga'を'piyo'に置き換え

document.getElementById('obj-json').innerText = JSON.stringify(obj)
document.getElementById('map-json').innerText = JSON.stringify([...map])