Rainbow Engine

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

JavaScript

JavaScriptのMapでforeachを使って各要素を処理する方法

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

<目次>

(1) JavaScriptのMapでforeachを使って各要素を処理する方法
 (1-1) 構文
 (1-2) サンプルプログラム
 (1-3) 補足:functionの引数について

(1) JavaScriptのMapでforeachを使って各要素を処理する方法

JavaScriptのMapオブジェクトはforeachを使って各要素に対して、引数で与えたfunction処理を適用する事が出来ます。

(1-1) 構文

(構文)

[Map型オブジェクト].forEach([各要素に適用するfunction]);

(構文説明)

[Map型オブジェクト]. new Map()などでMapオブジェクトを作り、そこにキー(key)や値(value)をセットしたものを使います。
[各要素に適用するfunction] functionは次のようにvalue、key、mapを引数として受け取れます。
function(value, [key(任意)], [map(任意)]);
(例)
Mapオブジェクト「fruits」の各要素に対してfunction「OutputConsole」を適用しています。OutputConsoleはMapのキー(key)と値(value)をコンソール出力するメソッドです。

fruits.forEach(OutputConsole);

目次にもどる

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

●JavaScript

function OutputConsole(value, key, map){
  console.log(`m[${key}] = ${value}`);
}

function MapTest2(){
  
  //# Mapの挙動確認②
  //# Mapの生成&キーと値のセット
  let fruits = new Map([["5","StringVal"],[5,"NumberVal"],[false,"BooleanVal"]]);
  
  //# forEachで書く要素に「OutputConsole」を適用
  fruits.forEach(OutputConsole);

}

(図121)

●JSP

<%@ 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_JsMapTest2.js" type="text/javascript" charset="UTF-8"></script>
<title>JavaScript Self Test</title>
</head>
<body>
<h2>■Mapの挙動確認②</h2>
<input type="button" value="Mapテスト実行" onclick="MapTest2()">
</body>
</html>

(図122)

(図123)実行結果

目次にもどる

(1-3) 補足:functionの引数について

引数が「任意」と書いていますが、具体的にはどのように指定が可能なのかを明確にするため、いくつかのパターンを試しました。試した範囲では、以下の規則が見受けられました。

・「value」、「key」は単一指定が可能
・「value」と「key」のみ(「map」を指定しない)パターンもOK
・「map」はvalue、keyの後の第三引数で指定した時のみOK
 
(表)
引数パターン 処理 結果
(図123) value, key, map `m[${key}] = ${value}` OK
(図124) value, key `m[${key}] = ${value}` OK
(図125) key `m[${key}]` OK
(図126) value `${value}` OK
(図127) key,map `m[${key}] = ${map.get(key)}` NG
(図128) value, key, map `m[${key}] = ${map.get(key)}` OK
(図129) key,map `m[${key}]` OK
(図123)

(図124)

(図125)

(図126)

(図127)

(図128)

(図129)

目次にもどる

Adsense審査用広告コード


Adsense審査用広告コード


-JavaScript

執筆者:


comment

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

関連記事

JavaScriptで外部ファイル(.js)を呼び出す方法+JSPでのサンプルプログラムも紹介

<目次> (1) JavaScriptで外部ファイル(.js)を呼び出す方法  (1-1) 構文  (1-2) 外部JavaScriptファイル呼び出し手順   (1-2-1) 外部JavaScrip …

JavaScriptで別ウィンドウを開くボタンを設置する方法+ウィンドウの大きさ変更方法も併せて紹介

<目次> (1) JavaScriptで別ウィンドウを開くボタンを設置する方法  (1-1) 構文  (1-2) サンプルプログラム  (1-3) 操作動画 (2) 参考:HTMLに直接記述を埋め込む …

JavaScriptのオブジェクト(object)の書き方やメソッドを追加する方法

  <目次> (1) JavaScriptのオブジェクト(object)の書き方やメソッドを追加する方法  (1-1) 構文①:オブジェクト作成  (1-2) 構文②:オブジェクトにアクセス …

JavaScriptでタグを追加する方法(jQueryのtagEditorプラグインを導入)

  <目次> (1) JavaScriptでタグを追加する方法(jQueryのtagEditorプラグインを導入)  (1-1) 概要  (1-2) tagEditorの導入方法  (1-3 …

jQueryのget()メソッドの使い方やパラメーターについて

<目次> (1) jQueryのget()メソッドの使い方やパラメーターについて  (1-1) get()メソッドの概要  (1-2) get()メソッドのサンプルプログラム (1) jQueryのg …

  • English (United States)
  • 日本語
Top