JavaScript マップのサンプル(Map)

JavaScriptのマップ(Map)のサンプルです。

確認環境
・Windows 10
・Google Chrome

目次

マップ(Map)

変数 = new Map ([[キー,値], ...  ]);

値を取得する

マップの要素の値を取得するサンプルです。

<script>

const color1 = new Map([
	["c1","赤"],
	["c2","黄"],
	["c3","青"],
]);

console.log(color1);//{"c1" => "赤", "c2" => "黄", "c3" => "青"}

console.log(color1.get("c2")); //黄

</script>

11行目は、getメソッドでキーを指定して値を取得しています。

 

要素を追加する

マップに要素を追加するサンプルです。

<script>

const color1 = new Map([
	["c1","赤"],
	["c2","黄"],
	["c3","青"],
]);

color1.set("c4","緑");

console.log(color1);//{"c1"=>"赤","c2"=>"黄","c3"=>"青","c4"=>"緑"}

</script>

9行目は、setメソッドでキーと値を指定して要素を追加しています。

 

要素の値を変更する

マップの要素の値を変更するサンプルです。

<script>

const color1 = new Map([
	["c1","赤"],
	["c2","黄"],
	["c3","青"],
]);

color1.set("c2","オレンジ");

console.log(color1);//{"c1" => "赤", "c2" => "オレンジ", "c3" => "青"}

</script>

9行目は、setメソッドでキーを指定して値を変更しています。

 

要素を削除する

マップの要素を削除するサンプルです。

<script>

const color1 = new Map([
	["c1","赤"],
	["c2","黄"],
	["c3","青"],
]);

color1.delete("c2");

console.log(color1);//{"c1" => "赤", "c3" => "青"}

</script>

9行目は、deleteメソッドでキーを指定して要素を削除しています。

 

キーで要素が存在するか確認する

キーで要素が存在するか確認するサンプルです。

<script>

const color1 = new Map([
	["c1","赤"],
	["c2","黄"],
	["c3","青"],
]);

console.log(color1.has("c2")); //true

console.log(color1.has("c7")); //false

</script>

9行目は、hasメソッドでキーを指定して存在を確認しています。存在するのでtrueです。
11行目も、hasメソッドでキーを指定して確認していますが、存在しないのでfalseです。

 

for文のループで要素を取得する

for文のループで要素を取得するサンプルです。

<script>

const color1 = new Map([
	["c1","赤"],
	["c2","黄"],
	["c3","青"],
]);

for(let[key, value] of color1) {
  console.log(key + ":" + value);//c1:赤 c2:黄 c3:青
}

for(let key of color1.keys()) {
  console.log(key);//c1 c2 c3
}

for(let value of color1.values()) {
  console.log(value);//赤 黄 青
}
</script>

9~11行目は、キーと値を取得しています。
13~15行目は、キーを取得しています。
17~19行目は、値を取得しています。

関連の記事

JavaScript for...in文とfor...of文のサンプル

△上に戻る