Rainbow Engine

IT技術を分かりやすく簡潔にまとめることによる学習の効率化、また日常の気付きを記録に残すことを目指します。

Java JavaScript JSP/Servlet

JavaScriptのMapとは?基本的な使い方やサンプルプログラムをご紹介

投稿日:2021年6月2日 更新日:

<目次>

(1) JavaScriptのMapとは?基本的な使い方やサンプルプログラムをご紹介
 (1-1) 概要・構文
 (1-2) サンプルプログラム
  ●JavaScriptのサンプル
  ●JSPのサンプル

(1) JavaScriptのMapとは?基本的な使い方やサンプルプログラムをご紹介

(1-1) 概要・構文

Mapはキー(Key)と値(Value)のペアの配列を保持するコレクションです。通常のObjectと異なり、あらゆる型のキーを保持する事が出来ます。

(表)Mapの主な操作

操作 概要
new Map() Mapの生成
map.set(Key, Value) キー・値のペアをMapに格納します。
map.get(Key) キーを指定して値を取り出します(キーが無い場合は「undefined」になる)
map.has(Key) キーの存在チェックを行います(結果はtrue/falseで返却)
map.delete(Key) 指定したキーの要素を削除します。
map.clear() Mapの情報を全てクリアします。
map.size Mapの要素数を返却します

目次にもどる

(1-2) サンプルプログラム

●JavaScriptのサンプル

function MapTest(){

    //# Mapの挙動確認①

    //# Mapの生成
    let fruits = new Map();

    //# キー・値のセット
    fruits.set("5","StringValue");
    fruits.set(5,"NumberValue");
    fruits.set(false,"BooleanValue");

    //# キー・値の取得
    console.log( "#get(\"5\") : "+fruits.get("5"));  //想定:StringValue
    console.log( "#get(5) : "+fruits.get(5));     //想定:NumberValue
    console.log( "#get(false) : "+fruits.get(false)); //想定:BooleanValue

    //# キーの存在有無チェック
    console.log( "#has(5) : "+fruits.has(5)); //想定:true
    console.log( "#has(4) : "+fruits.has(4)); //想定:false

    //# 要素の削除/サイズ確認
    console.log("size() : "+fruits.size);
    fruits.delete(false);
    console.log("size() : "+fruits.size);

}

(図121)

●JSPのサンプル

上記のJavaScriptのメソッドを実行するための簡単なテスト用画面です。ボタン押下で「MapTest()」が実行され、結果がコンソールに出力されます。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="js/IT0xxx_JsMapTest.js" type="text/javascript" charset="UTF-8"></script>
<title>JavaScript Self Test</title>
</head>
<body>
<h2>■Mapの挙動確認①</h2>
<input type="button" value="Mapテスト実行" onclick="MapTest()">
</body>
</html>

(図122)

(図123)実行結果

目次にもどる

Adsense審査用広告コード


Adsense審査用広告コード


-Java, JavaScript, JSP/Servlet

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

JSP/Servletで値を受け渡す方法(画面に入力された値を画面遷移で渡す方法)

<目次> (1) JSP/Servletで値を渡す方法(画面に入力された値を画面遷移で渡す方法)  (1-1) 構文  (1-2) サンプルプログラム (1) JSP/Servletで値を渡す方法(画 …

Javaのラッパークラスとは?使い方や一覧をご紹介

<目次> (1) Javaのラッパークラスとは?使い方や一覧をご紹介  (1-1) ラッパークラスとは?  (1-2) 構文(オブジェクト生成)  (1-3) 代表的なメソッド(Integerを例に) …

JavaでJSON配列から値を抽出する方法+郵便番号検索APIのサンプルプログラムも紹介

(0)目次&概説 (1) 記事の目的  (1-1) 目的  (1-2) 前提条件 (2) JSON配列から値抽出する方法  (2-1) JSON配列のデータの構造例  (2-2) JSON配列のデータ …

JSPやServletの画面をスマホ表示に対応させる方法~メディアクエリの導入~

<目次> (1) JSPやServletの画面をスマホ表示に対応させる方法 (2) 設定手順  (2-1) Step1:ビューポートの設定  (2-2) Step2:メディアクエリを記述したcssファ …

Javaのabstractとは?抽象クラスの概要やサンプルPGをご紹介

<目次> (1) Javaのabstractとは?抽象クラスの概要やサンプルPGをご紹介  (1-1) 抽象クラス(abstract)とは  (1-2) 抽象クラスの目的や用途  (1-3) 抽象クラ …

  • English (United States)
  • 日本語
Top