JavaScriptの辞書(Map)の使い方！(取得・追加・削除など)

JavaScriptのMapの使い方について書いています。
Mapの使い方について解説した後に、Mapの下記の操作方法について書きました。

Mapの使い方

Mapを使うことで、キーと値をペアとして、データを保持できる辞書オブジェクトを作成することができます。
辞書オブジェクトは、キーを元に値を取得できるオブジェクトになります。

例えば、下記のようにして使うことができます。

let fruits = new Map()
fruits.set('red', 'apple')
fruits.set('yellow', 'banana')
fruits.set('green', 'melon')

const yellowFruit = fruits.get('yellow')
console.log(yellowFruit) // banana

最初にMapをnewして、mapオブジェクトを作っています。
次の処理からsetメソッドを使って、キーと値を設定しています。

setメソッドを使って、下記のようにキーと値を設定しました。

次の処理で「yellow」キーを指定して、getメソッドで値を取得しています。
yellowFruit変数の値を出力すると、キーに関連した値の「banana」が表示されました。

このように、キーと値が関連づいているオブジェクトを作ることができます。

Mapの宣言と一緒に値を設定

Mapの宣言と一緒に、キーと値を設定することもできます。
宣言するときにコンストラクタに配列を渡すことで設定します。

先ほどのプログラムと同じように、キーと値を設定する場合には、下記のようになります。

const fruits = new Map([
  ['red', 'apple'],
  ['yellow', 'banana'],
  ['green', 'melon']
])

console.log(fruits.get('red')) // apple
console.log(fruits.get('yellow')) // banana
console.log(fruits.get('green')) // melon

Mapをnewするときに、2次元の配列を渡しています。
こうすると配列の中の、それぞれの配列の0番目がキー、1番目が値になって設定されます。

Mapの値を取得する(get)

Mapの値を取得するときには、getメソッドを使います。
getメソッドに渡したキーで、値を取得します。

const fruits = new Map([['red', 'apple']])

const result = fruits.get('red')
console.log(result) // apple

fruits変数に、redをキーにして、appleを設定しました。
その後にgetメソッドにキーを渡して、値を取得しました。

値が見つからない時には、undefinedが返ってきます。

Mapにキーと値を追加する(set)

Mapにキーと値を追加するときにはsetメソッドを使います。
setメソッドの第1引数にキー、第2引数に値を入れることで、「キーと値」のペアを追加できます。

const fruits = new Map([['red', 'apple']])
fruits.set('pink', 'peach')

fruits.forEach((value, key) => {
  console.log(`key:${key} value:${value}`)
})

最初にfruits変数にredをキーにして、appleを設定しました。
その次に、pinkをキーにして、peachを設定しています。

ループして出力すると、下記のように2つ設定されていることが確認できました。

key:red value:apple
key:pink value:peach

Mapのキーと値を削除する(delete/clear)

Mapのキーと値を削除するときには、deleteメソッドを使います。
deleteメソッドに渡したキーの「キーと値」のペアが削除されます。

const fruits = new Map([
  ['red', 'apple'],
  ['yellow', 'banana'],
  ['green', 'melon'],
  ['pink', 'peach']
])

fruits.delete('yellow')
fruits.delete('pink')

fruits.forEach((value, key) => {
  console.log(`key:${key} value:${value}`)
})

最初にfruits変数に、Mapオブジェクトを作って、4つのキーと値を設定しています。

次の処理でdeleteメソッドを使って、キーが「yellow」と「pink」のデータを削除しています。
ループして出力すると、下記のように指定したキーのデータが削除されました。

key:red value:apple
key:green value:melon

全ての値を削除する

全ての値を削除するときにはclearメソッドを使います。
clearメソッドを呼び出すと、Mapオブジェクトの全てのキーと値が削除されます。

const fruits = new Map([
  ['red', 'apple'],
  ['yellow', 'banana'],
  ['green', 'melon']
])

fruits.clear()

console.log(fruits) // Map(0) {}

fruits変数に、Mapオブジェクトを作って、3つのキーと値を設定しました。
次の処理でclearメソッドを呼び出していますが、これで全てのキーと値が削除されます。

出力すると、空になったMapオブジェクトが確認できました。

Mapにキーが存在するか確認する(has)

Mapにキーが存在するか確認するには、hasメソッドを使います。
hasメソッドに調べたいキーを渡すと、値があるときにはtrue、ないときにはfalseを返してくれます。

const fruits = new Map([
  ['red', 'apple'],
  ['yellow', 'banana'],
  ['green', 'melon']
])

const result1 = fruits.has('yellow')
console.log(result1) // true

const result2 = fruits.has('black')
console.log(result2) // false

fruits変数に、Mapオブジェクトを作って、3つのキーと値を設定しています。

次の処理で、yellowのキーがあるか確認しています。
存在するので、ここではtrueが返ってきます。

その次に、blackのキーがあるか確認しています。
存在しないので、falseが返ってきました。

Mapをループする(forEach)

Mapのキーと値がある間ループしたいときには、forEachメソッドを使います。
forEachメソッドのコールバック関数の第1引数に値、第2引数にキーが設定されます。

例えば、下記のように使います。

const scores = new Map([
  ['taro', 80],
  ['jiro', 75],
  ['hanako', 93]
])

scores.forEach((value, key) => {
  console.log(`${key}さんは、${value}点です。`)
})

scores変数に、Mapオブジェクトを作って、3つのキーと値を設定しています。
次の処理で、scores変数からforEachメソッドを呼び出しています。

forEachメソッドに渡しているのは、コールバック関数です。
これで、値がある間ループされます。

そしてvalue変数にscoresマップの値が設定され、key変数にscoresマップのキーが設定されます。
出力するとループされて、下記のようにキーと値が全て出力されました。

taroさんは、80点です。
jiroさんは、75点です。
hanakoさんは、93点です。

Mapをキーだけでループしたい(keys)

Mapオブジェクトをキーだけでループしたいときには、keysメソッドを呼び出します。

const fruits = new Map([
  ['red', 'apple'],
  ['yellow', 'banana'],
  ['green', 'melon']
])

for(const color of fruits.keys()) {
  console.log(color)
}

fruits変数に、Mapオブジェクトを作って、3つのキーと値を設定しました。
次の処理で、for...ofを使ってループ処理をしています。

ofの右側にfruits.keys()と書いていますが、これでキーだけを取得することができます。
color変数にキーが代入されます。

出力すると、下記のようになりました。

red
yellow
green

Mapを値だけでループしたい(values)

Mapオブジェクトを値だけでループしたいときには、valuesメソッドを呼び出します。

const fruits = new Map([
  ['red', 'apple'],
  ['yellow', 'banana'],
  ['green', 'melon']
])

for(const fruit of fruits.values()) {
  console.log(fruit)
}

fruits変数に、Mapオブジェクトを作って、3つのキーと値を設定しました。
次の処理で、for...ofを使ってループ処理をしています。

ofの右側にfruits.values()と書いていますが、これで値だけを取得することができます。
fruit変数に値が代入されます。

出力すると、下記のようになりました。

apple
banana
melon

Mapに設定されている要素数を取得する

Mapに設定されている「キーと値」のペアの要素数を取得するには、sizeプロパティにアクセスします。

const fruits = new Map([
  ['red', 'apple'],
  ['yellow', 'banana'],
  ['pink', 'peach'],
  ['blue', 'grape'],
  ['green', 'melon']
])

console.log(fruits.size) // 5

fruits変数に、Mapオブジェクトを作って、5つのキーと値を設定しました。
次の処理で、fruits.sizeとsizeプロパティにアクセスすることで、要素数が返ってきます。

JavaScriptの辞書(Map)の使い方まとめ

今回はJavaScriptの辞書(Map)の使い方について書きました。
記事の内容をまとめると、下記のようになります。