JavaScriptのMapを使用するサンプルです。
Mapオブジェクト
変数 = new Map ([[キー,値], ... ]); |
- ひとつの変数に複数の要素を設定できます。
- 要素は、キーと値を持ちます。
- キーは、数値や文字列、オブジェクトや関数も使用できます。
- 要素の挿入順に順序付けられます。for文も挿入順で反復処理ができます。
- 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" => "青"}
</script>
2~6行目は、Mapのコンストラクタの引数にキーと値を指定しています。
キーを指定して値を取得する(get)
<script>
const color1 = new Map([
["c1", "赤"],
["c2", "黄"],
["c3", "青"],
]);
console.log(color1.get("c2")); //黄
</script>
7行目は、getメソッドでキーを指定して値を取得しています。
for文でキーと値を取得する(entries/keys/values)
<script>
const color1 = new Map([
["c1", "赤"],
["c2", "黄"],
["c3", "青"],
]);
for (let [key, value] of color1) {
//for (let [key, value] of color1.entries()) {
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>
7行目は、for-of文でキーと値を取得しています。8行目も7行目と同じ結果になります。
11行目は、keysメソッドでキーを取得しています。
14行目は、valuesメソッドで値を取得しています。
要素を順番に処理する(forEach文)
<script>
const color1 = new Map([
["c1", "赤"],
["c2", "黄"],
["c3", "青"],
]);
color1.forEach(function (value, key) {
console.log(key + "-" + value); // c1-赤 c2-黄 c3-青
});
</script>
7行目は、forEach文でキーと値を取得しています。
指定のキーがあるか真偽値を返す(has)
<script>
const color1 = new Map([
["c1", "赤"],
["c2", "黄"],
["c3", "青"],
]);
if (color1.has("c2")) {
console.log("あり"); //ありが出力される
}
if (color1.has("A1")) {
console.log("あり");
} else {
console.log("なし"); //なしが出力される
}
</script>
7行目は、hasメソッドでキーを指定して存在を確認しています。存在するのでtrueです。
10行目も、hasメソッドでキーを指定して確認していますが、存在しないのでfalseです。
要素数を取得する(size)
<script>
const color1 = new Map([
["c1", "赤"],
["c2", "黄"],
["c3", "青"],
]);
console.log(color1.size); //3が出力される
</script>
7行目は、sizeプロパティで要素数を表示します。
キーと値を追加する(set)
<script>
const color1 = new Map();
color1.set("c1", "赤");
color1.set("c2", "黄");
color1.set("c3", "緑");
color1.set("c4", "青");
console.log(color1);
// {"c1" => "赤", "c2" => "黄", "c3" => "緑", "c4" => "青"}
</script>
3~6行目は、setメソッドでキーと値を指定して要素を追加しています。
キーを指定して値を更新する(set)
<script>
const color1 = new Map([
["c1", "赤"],
["c2", "黄"],
["c3", "青"],
]);
color1.set("c2", "オレンジ");
console.log(color1); //{"c1" => "赤", "c2" => "オレンジ", "c3" => "青"}
</script>
7行目は、setメソッドでキーを指定して値を変更しています。
キーを指定して削除する(delete)
<script>
const color1 = new Map([
["c1", "赤"],
["c2", "黄"],
["c3", "青"],
]);
color1.delete("c2");
console.log(color1); //{"c1" => "赤", "c3" => "青"}
</script>
7行目は、deleteメソッドでキーを指定して要素を削除しています。
すべての要素を削除する(clear)
<script>
const color1 = new Map([
["c1", "赤"],
["c2", "黄"],
["c3", "青"],
]);
console.log(color1.clear());
console.log(color1); // Map(0) {} 空のMap
</script>
7行目は、clearメソッドですべての要素を削除しています。
関連の記事