【JavaScript】反復処理する時の便利メソッド(reduce編)

【JavaScript】反復処理する時の便利メソッド(reduce編):

はじめに

JavaScriptで繰り返し処理をする時に便利なメソッドを紹介致します。

対象読者

・ES2015をこれから使っていきたい

・for文を使わず繰り返し処理をスッキリ書きたい

注意点

これから紹介する記法は主にES2015以降の記法です。

レガシーブラウザに対応させる場合は、トランスパイラ（Babel等）を使用し、ES5記法にトランスパイルをおこなってください。

（参考記事）
https://qiita.com/mizchi/items/3bbb3f466a3b5011b509#%E3%81%84%E3%81%BE%E3%81%99%E3%81%90es2015%E3%82%92%E4%BD%BF%E3%81%86
https://qiita.com/hietahappousai/items/9570da4b9275425489b2

reduce

【出来ること】

・配列から値を取り出し一つの値に集約する

例として、配列の中身を取り出し、合計値を求めるプログラムを書きます。

forの場合

const evenNumbers = [2,4,6]; 
let sum = 0; 
 
for (let i = 0; i < evenNumbers.length; i++) { 
    sum += evenNumbers[i]; 
} 
console.log(sum); //12 

reduceの場合

const evenNumbers = [2,4,6]; 
const sum = evenNumbers.reduce(function(accumulation,evenNumber) { 
    return accumulation + evenNumber; 
}) 
console.log(sum); //12 
 
 
// アロー関数で記述した場合 
const sum02 = evenNumbers.reduce((accumulation,evenNumber) => accumulation + evenNumber) 
console.log(sum02); //12 

書き方

配列.reduce(function(累積値, 現在処理されている配列の値) { 
}) 

ポイント

・コールバック関数の第一引数に値を集約する為の変数を用意する

・returnで返却した値が、コールバック関数の第一引数に代入される

・計算結果（合計値、平均値、etc..）を求める際によく使われる

第二引数を設定する事で初期値も設定する事ができます。

const evenNumbers = [2,4,6]; 
const sum = evenNumbers.reduce(function(accumulation,evenNumber) { 
    return accumulation + evenNumber; 
},10) 
 
console.log(sum); //22 

まとめ

・reduceは配列から値を取り出し一つの値に集約する

・計算結果（合計値、平均値、etc..）を求める際によく使われる

以下の記事でreduceの色々な使い方が紹介されていましたので、

よろしければ参考にどうぞ

「JavaScriptの1行小ネタ集」
https://qiita.com/Tksi/items/130bcf82bbfb0379b58b

過去記事はこちら

・(forEach,map,filter編)
https://qiita.com/KORPLUS/items/6739209e9bc716e6a8b5

・(find,every,some編)
https://qiita.com/KORPLUS/items/2f85ddeb82e2306f3822