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

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

関連記事

「ブレークポイントは現在の設定ではヒットしません。生成コードが見つからなかったため、ブレークポイントは無視されました」エラーの対処メモ

  <目次> (1) 「ブレークポイントは現在の設定ではヒットしません。生成コードが見つからなかったため、ブレークポイントは無視されました」エラーの対処メモ  (1-1) 発生状況・エラーメ …

JavaScriptのselfとは?thisとの違いや性質について

<目次> (1) JavaScriptのselfとは?thisとの違いや性質について  (1-1) JavaScriptのselfとは?  (1-2) selfとthisとの違い  (1-3) 補足 …

jQueryの$(document).ready()とは?意味や使い方をご紹介

<目次> (1) jQueryの$(document).ready()とは?意味や使い方をご紹介  (1-1) 「$(document).ready()」とは?  (1-2) サンプルプログラム  ( …

JavaScriptやAjaxでの処理の順序性やその制御方法について

<目次> (1) JavaScriptやAjaxでの処理の順序性やその制御方法について  (1-1) JavaScriptやAjaxの処理順序について  (1-2) Ajax処理順序制御①:異なる処理 …

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

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

  • English (United States)
  • 日本語
Top