【JavaScript】Mapの生成と操作

こんにちは。
本日はJavaScriptメモです。

概要

Mapオブジェクトとは、キーと値のペアを持っていて、
キーが最初に挿入された順番を記憶しています。
キーが重複することはありません。

本記事では、よく使うメソッド等を記載しています。

Mapオブジェクトの生成と要素の追加

コンストラクタで生成と要素の追加を行う

let map = new Map([
    [1, 'one'],
    [2, 'two'],
    [3, 'three']
])

コンストラクタとsetメソッドを使用して生成と要素の追加を行う

let map = new Map();
map.set(1, 'one')
map.set(2, 'two')
map.set(3, 'three')

要素数を取得する

let map = new Map();
map.set(1, 'one')
map.set(2, 'two')
map.set(3, 'three')

console.log(`size = ${map.size}`)

実行結果は以下です。

size = 3

keyを使用して要素を取得する

let map = new Map();
map.set(1, 'one')
map.set(2, 'two')
map.set(3, 'three')

console.log(`map(1) = ${map.get(1)}`)

実行結果は以下です。

map(1) = one

forEachを使用してkeyとvalueの値を取得する

let map = new Map();
map.set(1, 'one')
map.set(2, 'two')
map.set(3, 'three')

map.forEach((value, key, map) => {
    console.log(`map[${key}] = ${value}`);
})

実行結果は以下です。

map[1] = one
map[2] = two
map[3] = three

要素の追加と値の変更する

要素の追加、値の変更はどちらもsetメソッドを使用します。
先程生成したMapに対して要素の追加と値の変更を行います。

let map = new Map();
map.set(1, 'one')
map.set(2, 'two')
map.set(3, 'three')

map.set(1, 'いち')
map.set(4, 'four')

map.forEach((value, key, map) => {
    console.log(`map[${key}] = ${value}`);
})

実行結果は以下です。
keyが1の要素のvalueが更新され、keyが4の要素が追加されました。

map[1] = いち
map[2] = two
map[3] = three
map[4] = four

keyやvalueの取得する

keyの一覧を取得する

let map = new Map();
map.set(1, 'one')
map.set(2, 'two')
map.set(3, 'three')

let keys = map.keys()
for (let k of keys) {
    console.log(`key = ${k}`)
}

実行結果は以下です。

key = 1
key = 2
key = 3

valueの一覧を取得する

let map = new Map();
map.set(1, 'one')
map.set(2, 'two')
map.set(3, 'three')

let values = map.values()
for (let v of values) {
    console.log(`value = ${v}`)
}

実行結果は以下です。

value = one
value = two
value = three

要素を削除する

keyを指定して削除する

let map = new Map();
map.set(1, 'one')
map.set(2, 'two')
map.set(3, 'three')

map.delete(3)
map.forEach((value, key, map) => {
    console.log(`map[${key}] = ${value}`);
})

実行結果は以下です。

map[1] = one
map[2] = two

全要素を削除する

let map = new Map();
map.set(1, 'one')
map.set(2, 'two')
map.set(3, 'three')

map.clear()
console.log(`size = ${map.size}`)

実行結果は以下です。

size = 0

以上です。