【JS】forEach・map・filter・reduce それぞれ説明【配列実践スキル】

こんにちは。
今回はJavaScript（以下JS）の基本である配列について書きたいと思います。
配列の中でも特に下記にフォーカスを当てていきます。
SEOガン無視の短い内容となってますので、サクッと見れます。

・forEach()
・map()
・filter()
・reduce()

これらはJSで配列をいじる時にとても役に立ちますし、
個人的によく使います。

forEach()

基本概念は"繰り返し"

コールバックに記載している動作を、配列内の要素数の分だけ繰り返し行う。
map()のように新たな配列を作るわけではない。

const base = [1,2,3,4,5,6,7,8,9,10];
base.forEach(function(cur, i, arr){
  console.log(cur * i);   //0,2,6,12,20,30,42,56,72,90
});
//10回繰り返して cur * i の計算をする

forEach内に書かれているfunctionは３つの引数を持つ。

第1引数：配列中の各要素の値
第2引数：インデックス数（今回の例なら0〜9）
第3引数：配列そのもの

ただし全て使う必要はない。
個人的には、第3引数はあまり使わない。
また返値returnはいつも"undefined"になる。
ここがmap(),filter(),reduce()と大きく異なるところです。

const base = [1,2,3,4,5,6,7,8,9,10]
const baseForEach = base.forEach(function(cur, i, arr){
  return cur * i;   
})
console.log(baseForEach); //結果は"undefined"

自分がよく使う時はdocument.querySelectorAllで複数のクラスを選択しクリックイベント等で同じクラスを一度に付与させる実装です。

map()

基本概念は"繰り返して新しい配列を作る"

コールバックの動作を、配列内の要素数の分だけ繰り返し行い新たに配列を作ることができる。

const base = [1,2,3,4,5,6,7,8,9,10];
const baseMap = base.map(function(cur, i, arr){
  return cur * i;
})
console.log(baseMap); //[0, 2, 6, 12, 20, 30, 42, 56, 72, 90]

forEachと同様、map内に書かれているfunctionは３つの引数を持つことができるが、全て設定する必要はない。

第1引数：配列中の各要素の値
第2引数：インデックス数（今回の例なら0〜9）
第3引数：配列そのもの

返値returnを設定できるので、変数を用意する（今回の例では"baseMap"）。

filter()

基本概念は"配列の中で条件を満たす要素だけで新しい配列を作る"

これに関しては実際の例を見た方がわかりやすいです。

const base = [1,2,3,4,5,6,7,8,9,10];
const baseFilter = base.filter(function(cur, i, arr){
  return cur > 5;　//要素の中で5より大き数字
});
console.log(baseFilter); //[6,7,8,9,10]

filterも同様functionは３つの引数を持つことができるが、全て設定する必要はない。

第1引数：配列中の各要素の値
第2引数：インデックス数（今回の例なら0〜9）
第3引数：配列そのもの

返値returnを設定できるので、変数を用意する（今回の例では"baseFilter"）
mapのように計算をさせるのではなく条件で縛りをつけて条件を満たすものの配列を作る

reduce()

基本概念は"集約！"

reduceはこれまで紹介してきたメソッドのとは少しテイストが異なっています。
新しい配列を返すわけではないです。
引数は4つ持ち、第1引数はアキュムレータと言って日本語では蓄圧器と訳すようです。

平たくいうと配列の要素が第1引数に吸い込まれて蓄積されていく感じです。
そのことをイメージして下記の例を見てください。

const base = [1,2,3,4,5,6,7,8,9,10];
const baseReduce = base.reduce(function(acc, cur, i, arr){
  console.log(`${i}: ${acc}`);
  return acc + cur;
}, 0);

console.log(baseReduce); // 55

まずは引数の紹介です。

第1引数：アキュムレータ
第2引数：配列中の各要素の値
第3引数：インデックス数（今回の例なら0〜9）
第4引数：配列そのもの

返値returnを設定できるので、変数を用意する（今回の例では"baseMap"）
mapやfilterのように最後に配列を作るわけではない。

console.log(${i}: ${acc});　この部分を自分のローカルで見てもらえるとどんなことが起こっているかピンと来ると思います。

注意すべきは5行目の"0"はアキュムレータの初期値です。
今回は0ですが、
例えば10と入れればスタートは10から始まり1が足され、2が足され、3が足され,,,10が足されるとなるのです。

まとめ

では今日紹介した内容をまとめていきましょう。

forEach・map・filterの３つは引数を３つ持つ。
それらは、

第1引数：配列中の各要素の値
第2引数：インデックス数
第3引数：配列そのもの

reduceだけが第1引数が特殊。残りの引数はforEach・map・filterと同じ

第1引数：アキュムレータ
第2引数：配列中の各要素の値
第3引数：インデックス数（今回の例なら0〜9）
第4引数：配列そのもの

map・filterは新しく配列を作ることができる。
forEachとreduceは配列を作らない。

今回は以上となります。
皆さんの理解の手助けとなっていれば幸いです。


▼▼人気の記事▼▼