JavaScript

【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は3つの引数を持つ。

第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は3つの引数を持つことができるが、全て設定する必要はない。

第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は3つの引数を持つことができるが、全て設定する必要はない。

第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の3つは引数を3つ持つ。
それらは、

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

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

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


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


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


▼▼人気の記事▼▼

【経験談】給料を上げたいなら自分に対しての出費を増やそう【自己投資のススメ】

-JavaScript
-, , , , , , ,

執筆者:

関連記事

JS

【JS】8分で理解 deferとasyncを図で説明してみた【図解】

こんにちは。今回はJavaScript(以下JS)の「defer属性」と「async属性」について解説します。これらの属性を使うことでページの表示速度をあげることが出来るのでぜひ理解しましょう。早速、 …

JS

returnについて

今回はJavaScriptでよく出てくるreturnについて書きます。

JS

【JS】イベントリスナー’ DOMContentLoaded ‘と’ load ‘の違いを解説

こんにちは。今回はJavaScript(以下JS)のロード系?のイベントリスナーについて書きたいと思います。 ・DOMContentLoaded・load これらのイベントリスナーはJSを学習しはじめ …

JS

【JS】連続するsetTimeoutをスッキリさせる【コピペで解消】

今回はJavaScript(以下JS)で連続でsetTimeout()を実装する時によく陥る「コールバックヘル」を解消する方法を記載します。

JS

newとインスタンスの関係

newとインスタンスについて自分なりに理解した流れを書きます。

me

Taka

学生時代にアメリカ(サンフランシスコ)とカナダ(トロント)にそれぞれ約1年間づつ住んでいました。特にサンフランシスコではシリコンバレーに訪れた際にITの素晴らしさに触れ感動しました。IT業界で働くと決心した瞬間でもありました。現在はWeb制作に携わる会社員です。