astris.design

［JS］配列の巡回メソッド forEach, map, reduce, reduceRight

JavaScriptのArrayオブジェクトの巡回メソッドには、forEach、map、reduce、reduceRightがあります。配列の各要素に対して繰り返し処理を行うことができます。それぞれの違いと使い分けについて、解説します（サンプルあり）。

【目次・配列の巡回メソッド】

forEach：汎用

forEachメソッドは、配列の各要素に対して、指定したコールバック関数の処理を行います。
コールバック関数は、第1引数で要素の値、第2引数でインデックス、第3引数で配列そのものを受け取ります。
繰り返し処理で、元の配列の値を更新する場合は、第3引数で指定した配列の要素に値を設定します。

forEachメソッドは汎用性が高く、どんな配列巡回処理も記述できますが、使用する優先度は最も低いと考えた方がいいでしょう。
forEachメソッドのコールバック関数は、for-of文のように、break文やcontinue文で抜けることができません。
また、JavaScriptには、特定の機能に特化した便利な配列コールバック系メソッドが多くあるため、まずは、それらで記述できないかどうか検討するべきです。
配列要素の繰り返し処理を記述する際の優先順位は、以下になります。

  • forEach以外の配列コールバック系メソッド
  • for-of文
  • forEachメソッド

配列のコールバック系メソッド一覧

構文
配列.forEach(( 値, インデックス, 元の配列 ) => {
  繰り返し処理;
});

サンプル

foreach.js
const members = [
  { name: '江藤', position: 'PM' },
  { name: '佐藤', position: 'SE' },
  { name: '須藤', position: 'PG' },
];
members.forEach((member, i, ary) => {
  ary[i].id = `${member.position}${i}`;
});
console.log(members);
/*「[
  { name: '江藤', position: 'PM', id: 'PM0' },
  { name: '佐藤', position: 'SE', id: 'SE1' },
  { name: '須藤', position: 'PG', id: 'PG2' } 
]」*/

map：巡回処理で配列を生成

mapメソッドは、配列の各要素に対して、指定したコールバック関数の処理を行い、その結果を配列として返します。
mapメソッドのコールバック関数は、値を返す必要があります。
コールバック関数は、第1引数で要素の値、第2引数でインデックス、第3引数で配列そのものを受け取ります。
mapメソッドは、呼び出した配列そのものには、影響を与えません。

構文
配列.map(( 値, インデックス, 元の配列 ) => {
  繰り返し処理;
  return 結果;
});

サンプル

map.js
const members = [
  { name: '江藤', position: 'PM' },
  { name: '佐藤', position: 'SE' },
  { name: '須藤', position: 'PG' },
];
console.log(members.map(member => `${member.name}（${member.position}）`));
//「[ '江藤（PM）', '佐藤（SE）', '須藤（PG）' ]」

reduce, reduceRight：巡回処理で1つの値を取得

reduceメソッドは、配列の各要素に対して、指定したコールバック関数の処理を行い、その結果を一つの値として返します。
reduceRightメソッドは、配列の末尾から、繰り返し処理を行います。
コールバック関数は、第1引数で前回の実行結果、第2引数で要素の値、第3引数でインデックス、第4引数で配列そのものを受け取ります。
reduceメソッドの第2引数は、実行結果の初期値を指定します。
第2引数を省略した場合は、配列の先頭要素の値が、実行結果の初期値となり、2番目の要素から巡回処理が実行されます。
第2引数を省略すると、以下のような動作となるため、省略しない方がいいでしょう。

  • 空配列がreduceメソッドを呼び出すと、TypeErrorが発生する。
  • 要素が1つの配列が呼び出すと、処理が一度も実行されない。
構文
配列.reduce(( 前回の実行結果, 値 ) => {
  繰り返し処理;
  return 結果;
}, 実行結果の初期値);

サンプル

reduce.js
const array = [0, 1, 2, 3, 4];
console.log(array.reduce((result, v) => result += v, 0));
//「10」 
console.log(array.reduce((result, v) => result += v, ''));
//「01234」 
console.log(array.reduceRight((result, v) => result += v, ''));
//「43210」

まとめ

JavaScriptの配列の巡回メソッドについて、解説しました。
それぞれの用途は、以下のようになります。

  • forEach：汎用
  • map：巡回処理で配列を生成
  • reduce：巡回処理で一つの値を取得
  • reduceRight：巡回処理で一つの値を取得（末尾から）