JavaScriptのmapオブジェクトのforEach()メソッドについて記載します。
概要、実際のサンプルコードを交えて構文などの使い方をまとめてみました。
JavaScriptのMapオブジェクトとは？
キー（key）とキーに対応する値（value）を対応させて保持するオブジェクトで、Setオブジェクトと併せて、ES6(ES2015)から追加された比較的新しいデータタイプです。
配列に似ており、Javascript でデータを扱う上でよく使うデータ型として知られています。
またJSのオブジェクト型とも非常に似ておりますが、文字列や数値、真偽値（Boolean）をキーとなる値に対して自由に設定できる違いがあります。
JS,TypeScript,Node.jsなどで開発していくうえで重要なデータタイプとなっています。
それでは、次に本題の説明に移ります。
JavaScriptのmapオブジェクトのforEach()概要
forEach()は、JavaScriptのmapオブジェクト内の各要素に対して、関数を実行するためのメソッドです。
引数として渡された関数は、mapオブジェクト内の各要素に対して1回ずつ実行されます。
構文、使い方
forEach()の構文：
|
1 |
map.forEach(callback[, thisArg]); |
使い方：
map.forEach()を使用すると、mapオブジェクトの各要素に対してコールバック関数を実行できます。
コールバック関数の引数は、要素の値、キー、およびmapオブジェクト自体です。thisArgを指定すると、コールバック関数内のthisの値を指定できます。
引数について
forEach()の引数は、関数であり、引数として3つの値を受け取ります。
1つ目は、現在処理中の要素の値です。
2つ目は、現在処理中の要素のインデックスです。
3つ目は、mapオブジェクト自体です。
返り値について
forEach()は、要素を1つずつ処理するためのJavaScriptのメソッドです。
このメソッドを利用した便利なテクニック
JavaScriptのmapオブジェクトのforEach()を使うと、オブジェクトのキーと値を反復処理することができます。
これにより、オブジェクトの要素を反復処理して変更したり、新しいオブジェクトを作成したりすることができます。
現場で実際にどのように使われているか
JavaScriptのmapオブジェクトのforEach()は、mapオブジェクト内の各要素に対して関数を実行するために使用されます。
例えば、以下のようなコードを使用して、mapオブジェクト内の各要素に対して関数を実行することができます。
|
1 2 3 |
map.forEach(function(value, key) { console.log(key + ': ' + value); }); |
JavaScriptのmapオブジェクトのforEach()と一緒によく使われる処理
forEach()を使用すると、mapオブジェクトの各要素に対して繰り返し処理を行うことができます。
そのため、配列内の要素を反復処理して何かを行う場合によく使われます。
使用する上での注意点
– 同じ配列を繰り返し処理しないように注意する必要がある。
– 配列の要素を変更しないように注意する必要がある。
– 配列の要素を削除しないように注意する必要がある。
– 同じ関数を繰り返し処理しないように注意する必要がある。
JavaScriptのmapオブジェクトのforEach()と似た処理のJSメソッド、違い
for…ofと似ていますが、下記の違いがあります。
- for…ofは、配列の各要素を取り出すためのループ処理を指定します。
- forEach()は、配列の各要素に対して実行する処理を指定します。
JavaScriptのmapオブジェクトのforEach()を使ったサンプルコードの紹介
mapオブジェクトのforEach()の使用例1
|
1 2 3 4 5 6 7 |
let map = new Map(); map.set('name', 'John'); map.set('age', 30); map.forEach(function(value, key) { console.log(key + ' = ' + value); }); |
mapオブジェクトのforEach()の使用例2
|
1 2 3 4 5 6 7 |
let map = new Map(); map.set('name', 'John'); map.set('age', 30); map.forEach(function(value, key, map) { console.log(key + ' = ' + value + ', map size: ' + map.size); }); |
JavaScript mapオブジェクトの他メソッドについて
JavaScriptのmapオブジェクトの他メソッドについては、下記記事にもまとめていますので参考にしてみてください
| メソッド名 | 機能 | リンク |
| map new Map() | 新しいマップオブジェクトを作成します | JavaScript mapオブジェクト newMapメソッドの使い方 |
| map.prototype.set() | マップ内のキーの値を設定します | JavaScript mapオブジェクト setメソッドの使い方 |
| map.prototype.get() | マップ内のキーの値を取得します | JavaScript mapオブジェクト getメソッドの使い方 |
| map.prototype.clear() | マップからすべての要素を削除します | JavaScript mapオブジェクト clearメソッドの使い方 |
| map.prototype.delete() | キーで指定されたマップ要素を削除します | JavaScript mapオブジェクト deleteメソッドの使い方 |
| map.prototype.has() | キーがマップに存在する場合、trueを返します | JavaScript mapオブジェクト hasメソッドの使い方 |
| map.prototype.forEach() | マップ内の各キー/値ペアのコールバックを呼び出す | JavaScript mapオブジェクト foreachメソッドの使い方 |
| map.prototype.entries() | マップ内の[key、value]ペアを持つイテレーターオブジェクトを返します | JavaScript mapオブジェクト entriesメソッドの使い方 |
| map.prototype.keys() | マップ内にキーを含むイテレーターオブジェクトを返します | JavaScript mapオブジェクト keysメソッドの使い方 |
| map.prototype.values() | マップ内の値のイテレーターオブジェクトを返します | JavaScript mapオブジェクト valuesメソッドの使い方 |
| map size property | マップ要素の数を返します | JavaScript mapオブジェクト sizeプロパティの使い方 |
また、JavaScriptの公式ドキュメントであるMDNで記載されているmapオブジェクトのforEachメソッドについても補足としてリンクを貼っておきます。
参考にしてみてください。
