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

投稿日：2021年6月3日更新日：2021年6月5日

＜目次＞

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

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

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

(１-１) 構文

（構文）

[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);

＞目次にもどる

(１-２) サンプルプログラム

●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);

}

（図１２１）

●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>

（図１２２）

（図１２３）実行結果

＞目次にもどる

(１-３) 補足：functionの引数について

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

・「value」、「key」は単一指定が可能

・「value」と「key」のみ（「map」を指定しない）パターンもOK

・「map」はvalue、keyの後の第三引数で指定した時のみOK

（表）

図	引数パターン	処理	結果
（図１２３）	value, key, map	`m[${key}] = ${value}`	OK
（図１２４）	value, key	`m[${key}] = ${value}`	OK
（図１２５）	key	`m[${key}]`	OK
（図１２６）	value	`${value}`	OK
（図１２７）	key,map	`m[${key}] = ${map.get(key)}`	NG
（図１２８）	value, key, map	`m[${key}] = ${map.get(key)}`	OK
（図１２９）	key,map	`m[${key}]`	OK

（図１２３）

（図１２４）

（図１２５）

（図１２６）

（図１２７）

（図１２８）

（図１２９）

＞目次にもどる