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のMapとは?基本的な使い方やサンプルプログラムをご紹介

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

Ajaxでの繰り返し処理の順序性を保つ方法について

<目次> (1) Ajaxでの繰り返し処理の順序性を保つ方法について  (1-1) JavaScriptやAjaxの処理順序について  (1-2) Ajax処理順序制御②:同一処理ループ時の順序性保持 …

JavaScriptでpopstateイベントが動かない?発動タイミングやサンプルプログラムをご紹介

  <目次> (1) JavaScriptでpopstateイベントが動かない?発動タイミングやサンプルプログラムをご紹介  (1-1) 概要  (1-2) 構文  (1-3) サンプルプロ …

JavaScriptのAddEventListenerの用途や使用例について

<目次> (1) JavaScriptのAddEventListenerの用途や使用例について  (1-1) 概要  (1-2) 構文  (1-3) サンプルプログラム (1) JavaScriptの …

  • English (United States)
  • 日本語
Top