JavaScriptのマップ(Map)のサンプルです。
| 確認環境 ・Windows 10 ・Google Chrome |
目次
マップ(Map)
| 変数 = new Map ([[キー,値], ... ]); |
- ひとつの変数に複数の要素を設定できます。
- 要素は、キーと値を持ちます。
- キーは、数値や文字列等を使用できます。
- ECMAScript 2015(ES6)で導入されました。
- 以下は、MDNのMapのリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/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行目は、値を取得しています。
関連の記事