JavaScript Mapを使用するサンプル

JavaScriptのMapを使用するサンプルです。

仕組み	Mapオブジェクト
	初期値をセットする
取得する	キーを指定して値を取得する(get)
	for文でキーと値を取得する(entries/keys/values)
	要素を順番に処理する(forEach文)
	指定のキーがあるか真偽値を返す(has)
	要素数を取得する(size)
更新する	キーと値を追加する(set)
	キーを指定して値を更新する(set)
	キーを指定して削除する(delete)
	すべての要素を削除する(clear)

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メソッドですべての要素を削除しています。