JavaScriptでMapオブジェクトを操作する3つの方法とは？forEach徹底解説

Map.forEach メソッドは、JavaScript の Map オブジェクト内のすべてのキーと値のペアを順番に処理するために使用されます。これは、Map の要素を繰り返し処理したい場合に役立つ便利なメソッドです。

構文

Map.prototype.forEach(callbackfn[, thisArg])

パラメータ

thisArg: オプションパラメータ。callbackfn 関数内部における this キーワードの値を指定します。
callbackfn: 各キーと値のペアに対して実行されるコールバック関数です。この関数は、以下の引数を受け取ります。
- value: 現在のキーに対応する値
- key: 現在のキー
- map: forEach メソッドが呼び出された Map オブジェクト

戻り値

なし

詳細

Map.forEach メソッドは、Map オブジェクト内のすべてのキーと値のペアを順番に処理します。callbackfn 関数は、各キーと値のペアに対して一度だけ実行されます。

callbackfn 関数は、以下の引数を受け取ります。

map: forEach メソッドが呼び出された Map オブジェクト
key: 現在のキー
value: 現在のキーに対応する値

thisArg パラメータはオプションであり、指定した場合、callbackfn 関数内部における this キーワードの値が設定されます。

例

以下の例では、Map オブジェクト内のすべてのキーと値のペアをコンソールに表示します。

const myMap = new Map([
  ['name', 'John Doe'],
  ['age', 30],
  ['occupation', 'Software Engineer'],
]);

myMap.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});

出力

name: John Doe
age: 30
occupation: Software Engineer

Map.forEach メソッドと for...of ループの違い

Map.forEach メソッドと for...of ループは、どちらも Map オブジェクト内の要素を繰り返し処理するために使用できます。しかし、いくつかの重要な違いがあります。

Map.forEach メソッドは、Map オブジェクト内の要素を非同期に処理することはできません。for...of ループは、要素を非同期に処理することができます。
Map.forEach メソッドは、Map オブジェクト内の要素を直接変更することはできません。for...of ループは、要素を直接変更することができます。
Map.forEach メソッドは、Map オブジェクト内の要素を挿入順に処理します。for...of ループは、要素のキーに基づいて要素を処理します。

例 1：キーと値のペアをコンソールに表示する

const myMap = new Map([
  ['name', 'John Doe'],
  ['age', 30],
  ['occupation', 'Software Engineer'],
]);

myMap.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});

出力

name: John Doe
age: 30
occupation: Software Engineer

例 2：すべての値を平方数に変換する

この例では、Map オブジェクト内のすべての値を平方数に変換します。

const myMap = new Map([
  ['number1', 2],
  ['number2', 4],
  ['number3', 5],
]);

myMap.forEach((value, key) => {
  myMap.set(key, value * value);
});

console.log(myMap);

出力

Map { 'number1' => 4, 'number2' => 16, 'number3' => 25 }

例 3：すべてのキーを大文字に変換する

この例では、Map オブジェクト内のすべてのキーを大文字に変換します。

const myMap = new Map([
  ['name', 'john doe'],
  ['age', 30],
  ['occupation', 'software engineer'],
]);

myMap.forEach((value, key) => {
  myMap.set(key.toUpperCase(), value);
  myMap.delete(key);
});

console.log(myMap);

出力

Map { 'NAME' => 'john doe', 'AGE' => 30, 'OCCUPATION' => 'software engineer' }

この例では、age が 30 歳以上のエントリのみを処理します。

const myMap = new Map([
  ['name1', { name: 'John Doe', age: 30 }],
  ['name2', { name: 'Jane Doe', age: 25 }],
  ['name3', { name: 'Peter Jones', age: 35 }],
]);

myMap.forEach((value, key) => {
  if (value.age >= 30) {
    console.log(`${key}: ${JSON.stringify(value)}`);
  }
});

出力

name1: {"name": "John Doe", "age": 30}
name3: {"name": "Peter Jones", "age": 35}

これらの例は、Map.forEach メソッドを使用してさまざまな処理を実行する方法を示すほんの一例です。このメソッドは、Map オブジェクト内の要素を繰り返し処理する際に柔軟性と使いやすさを提供します。

for...of ループ

for...of ループは、イテレータブルなオブジェクト（Map オブジェクトを含む）を繰り返し処理する一般的な方法です。構文は次のとおりです。

for (const [key, value] of myMap) {
  // キーと値のペアを処理するコード
}

このループは、Map オブジェクト内のすべてのキーと値のペアを順番に繰り返し処理します。各イテレーションでは、key 変数に現在のキーが、value 変数に現在の値が割り当てられます。

例

const myMap = new Map([
  ['name', 'John Doe'],
  ['age', 30],
  ['occupation', 'Software Engineer'],
]);

for (const [key, value] of myMap) {
  console.log(`${key}: ${value}`);
}

出力

name: John Doe
age: 30
occupation: Software Engineer

Array.from と forEach メthod

Array.from メthodを使用して、Map オブジェクトをキーと値のペアの配列に変換してから、通常の forEach メthodを使用してその配列を処理することもできます。構文は次のとおりです。

Array.from(myMap).forEach(([key, value]) => {
  // キーと値のペアを処理するコード
});

この方法では、まず Array.from メthodを使用して、Map オブジェクトをキーと値のペアの配列に変換します。次に、通常の forEach メthodを使用して、その配列を処理します。各イテレーションでは、[key, value] 配列の最初の要素に現在のキーが、2番目の要素に現在の値が割り当てられます。

例

const myMap = new Map([
  ['name', 'John Doe'],
  ['age', 30],
  ['occupation', 'Software Engineer'],
]);

Array.from(myMap).forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});

出力

name: John Doe
age: 30
occupation: Software Engineer

reduce メthod

reduce メthodを使用して、Map オブジェクト内の要素を累積値に処理することもできます。構文は次のとおりです。

myMap.reduce((accumulator, [key, value]) => {
  // 累積値を更新するコード
  return accumulator;
}, initialValue);

この方法では、まず reduce メthodを使用して、Map オブジェクト内の要素を累積値に処理します。 accumulator 変数は、累積値を保持するために使用されます。 initialValue パラメータは、reduce メthodが開始する値を指定するために使用されます。各イテレーションでは、key 変数に現在のキーが、value 変数に現在の値が割り当てられます。

例

const myMap = new Map([
  ['name', 'John Doe'],
  ['age', 30],
  ['occupation', 'Software Engineer'],
]);

const result = myMap.reduce((acc, [key, value]) => {
  acc[key] = value;
  return acc;
}, {});

console.log(result);

出力

{ name: 'John Doe', age: 30, occupation: 'Software Engineer' }

カスタムイテレータ

独自のイテレータ関数を作成して、Map オブジェクト内の要素を処理することもできます。これは、より複雑な処理が必要な場合に役立ちます。

const myMap = new Map([
  ['name', 'John Doe'],
  ['age', 30],
  ['occupation', 'Software Engineer'],
]);

function myIterator(map) {
  let nextIndex = 0;
  const keys = Array.from(map.keys());

  return {
    next: () => {
      if (nextIndex < keys.length) {