new Map()について

初める前に

転スラ書籍の小説読み進めないとちょっとネタバレになるかもです💦

初めに

今回業務でnew Map()に大いに助けられたので、備忘録として記載していこうと思います。
かなり便利な関数なので、皆さんも積極的に使用していただけたらと思います！

new Map()関数とは

そもそもnew Map()とは何かについてですが、ざっくり説明すると[{key, data}]で格納されているiterateble型になっています。

例えば、リムルの配下をmapで格納したい場合は以下のようになります。

const mapData = new Map()
mapData.set('リムル・テンペスト', {
 '魔神王': 'ディアブロ',
 '幽幻王': 'ゼギオン',
 '赫怒王': '紅丸'
})

console.log(mapData)

// Map(1) {size: 1, リムル・テンペスト => {魔神王: 'ディアブロ', …}}

// 中身
// key:'リムル・テンペスト'
// value:{魔神王: 'ディアブロ', 幽幻王: 'ゼギオン', 赫怒王: '紅丸'}

mapDataに格納した対象keyのデータを取得したい(map.get(key))

上記でリムル・テンペストというkeyでmapDataにデータを格納したのでそのデータを取得したい場合は以下の通り

console.log(mapData.get('リムル・テンペスト'))
// {魔神王: 'ディアブロ', 幽幻王: 'ゼギオン', 赫怒王: '紅丸'}

new Map()で格納したデータをfor文などで回したい

1件ずつmapDataの中身を確認したい場合などでfor文等でループ処理を行いたい場合は以下の通り

// forの場合
for(const [key, value] of mapData.entries()){
  // keyがリムル・テンペスト、valueが{魔神王: 'ディアブロ', 幽幻王: 'ゼギオン', 赫怒王: '紅丸'}
  // 処理
}

// forEachの場合
mapData.forEach(value, key, index){
  // keyがリムル・テンペスト、valueが{魔神王: 'ディアブロ', 幽幻王: 'ゼギオン', 赫怒王: '紅丸'}
  // 処理
}

対象のkeyにデータを追加したい(map.set()とmap.get(key).カラム名の組み合わせ)

リムルの聖魔十二守護王で残っている人物を追加したい場合は（今回はシオンを追加）以下の通り

mapData.set('リムル・テンペスト', {
  '魔神王': mapData.get('リムル・テンペスト')['魔神王'],
  '幽幻王': mapData.get('リムル・テンペスト')['幽幻王'],
  '赫怒王': mapData.get('リムル・テンペスト')['赫怒王'],
  '闘神王': 'シオン'
})

console.log(mapData)

// key:'リムル・テンペスト'
// value:{魔神王: 'ディアブロ', 幽幻王: 'ゼギオン', 赫怒王: '紅丸', 闘神王: 'シオン'}

注意点として以下のように記載してしまった場合は、上書きされてしまうので要注意です

mapData.set('リムル・テンペスト', {
  '闘神王': 'シオン'
})

console.log(mapData)

// key:'リムル・テンペスト'
// value:{闘神王: 'シオン'} <- ディアブロ、ゼギオン、紅丸がいなくなっている

意図して上書きする場合は問題ないのですが、既に入れたデータを引き継ぎたい場合はmap.get(key).カラム名を記載しましょう

対象のkeyがあるかないかの確認(map.has(key))

new Map()でどのkeyを書いたか忘れてしまった場合は、map.has(key)で既に格納していたらtrue、していないならfalseを返します
今回の場合で言うと以下の通りとなります

const rimuru = mapData.has('リムル・テンペスト')
const milim = mapData.has('ミリム・ナーヴァ')

console.log(rimuru) // true
console.log(milim) // false

自分的にはこの対象keyのデータが格納されていた場合の処理、されていなかった場合の処理とif分岐などの条件分岐で使用することが多いですね

対象keyのデータを消去したい場合(map.delete(key))

これは単純にリムル・テンペストというkeyのデータを消去したければ以下の通りになります

mapData.delete('リムル・テンペスト')

console.log(mapData) // Map(0) {size: 0} 

格納したmapのデータ全てを消去したい場合(map.clear())

全てを消去する場合はmap.clear()をするだけです

mapData.clear()

console.log(mapData) // Map(0) {size: 0}

最後に

以上でnew Map()の備忘録は終了です。
今回がっつり使用してみて、かなり使いやすいと感じました。
同じものではnew Set()というのもあるのですが、使用したい場面を見極めてそれぞれ使用できれば、選択の幅が広がると思います。

あまり記事を書くのが得意ではないので、逃げ道的に備忘録と言ってます笑
以前から大分空いてしまったのですが、時間がある時にこういった備忘録を書いていきますので、誰かの助けになれたら幸いです。

参考記事

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map
https://ja.javascript.info/map-set

以上