キーと値の組を持つ Map

01 / 06

オブジェクトでは数えにくい

キーと値の組を持つ入れものは、もうひとつ知っている。オブジェクトだね。

でもオブジェクトには苦手なことがある。いま何件入っているかが素直には分からないんだ。.length は配列のものだから使えないし、キーが増えたり減ったりするデータでは、これが地味に困る。

02 / 06

Map を作って組を足す

new Map() と書くと、キーと値の組を持つ入れものができる。クラスの章で new から実物を作ったのと同じ書き方だよ。

set(キー, 値) … 組を入れる
get(キー) … キーから値を取る
size … いま何組あるか

size は () を付けない。.length と同じ、値をそのまま取り出す形だよ。

const scores = new Map();scores.set("ゆい", 80);scores.set("はると", 65);console.log(scores.get("ゆい"));console.log(scores.size);

実行結果

80
2

03 / 06

在るか調べる・消す

has(キー) で「そのキーが在るか」を true / false で答えてくれる。delete(キー) で組をひとつ消せるよ。

足す・取る・在るか調べる・消す。やりたいことがそのままメソッドの名前になっているのが Map の読みやすさだね。オブジェクトだと、消すときに書き方を思い出せないことがよくあるんだ。

const scores = new Map();scores.set("ゆい", 80);console.log(scores.has("ゆい"));scores.delete("ゆい");console.log(scores.has("ゆい"));console.log(scores.size);

実行結果

true
false
0

04 / 06

そのまま表示しても見えない

ここは先に知っておいてほしいところ。Map をそのまま console.log に渡しても中身は出ない。この教材の表示のしかたでは {} としか出ないよ。

中身を確かめたいときは、こうする。

size を出して件数を見る
get の結果を出して1つ見る
for...of で1組ずつ出す

const scores = new Map();scores.set("ゆい", 80);console.log(scores);console.log(scores.size);

実行結果

{}
1

05 / 06

取り出せるのは2つ組

for...of でまわすとき、Map から取り出せるのは [キー, 値] という2つ組だよ。配列をまわしたときのように値がそのまま出てくるのではない。

だから受け取るところに分割代入を書く。そうすれば、キーと値に別々の名前をつけて使えるんだ。

const scores = new Map();scores.set("ゆい", 80);scores.set("はると", 65);for (const [name, score] of scores) {  console.log(`${name}は${score}てん`);}

実行結果

ゆいは80てん
はるとは65てん

06 / 06

オブジェクトとの使い分け

両方あるとどちらを使うか迷うよね。目安はこう。

項目の名前が先に決まっている … オブジェクト（人なら name と age、と決まっている）
キーが実行してみないと分からない … Map（人ごとの点数など、名前が動くもの）

件数を数えたい、組を消したい、というときも Map のほうが素直に書けるよ。それじゃあ作ってみよう。