基礎からのJavaScript④ ~reduce()を用いた配列の計算(加算, 総乗, 平均)~

今回は、reduce()関数を用いた計算方法をいくつか紹介したいと思います。

reduce関数とは

配列とともに扱われるreduce()関数ですが、使用方法は以下の通りです。

配列.reduce(function(累積値, 要素) { 
return (累積値に対する要素の処理内容)
})


reduce()関数を用いる前に

本記事での入力値は、数字間を半角スペースで区切った文字列(1 2 3 …)とします。
まず、半角スペースで区切られた文字列(lines[0])を分割して、配列(numbers)に格納するために以下の処理を行います。

var numbers = lines[0].split(' ').map(Number);

<コードの簡単な説明>
・lines[0]:1行目の入力値はlines[0]に格納されます。
・split:文字列.split( 区切り文字 )
・map(Number):入力値は文字列として認識されているので、計算を行うことができる状態にすべく、String(文字列)型→Number型に変換します。


それでは、reduce()関数を用いた計算方法を見ていきましょう。


配列の加算

【①reduce() & return を用いた方法】

// numbers : 1,2,3,4,5,6,7,8,9
var result_1 = numbers.reduce(function(a, b) {
return a + b; // a + b の結果が function(a, b) の a に入る。 
})
console.log(`配列の加算①:${result_1}`);

-----------------------------------------------------------------------
出力結果:
配列の加算①:45


【②reduce() & ラムダ式 を用いた方法】
ラムダ式については、自分も十分に理解できていない部分があるのですが、

非ラムダ式:function (引数) { /* 処理内容 */ }
ラムダ式:(引数) => { /* 処理内容 */ }

という認識でよいと思います。上記で「return 以降」に記述していた処理内容を 「=> 以降」に記述していく感じですね。

var result_2 = numbers.reduce((a, b) => a + b);
console.log(`配列の加算②:${result_2}`)

-----------------------------------------------------------------------
出力結果:
配列の加算②:45


【③おまけ:for文を用いた方法】
加算のイメージが付きにくい方は、まず、for文でのループ処理を把握すると理解しやすいかもしれません。

var result_3 = 0;
for(var i = 0; i < numbers.length; i++){ // 配列数分、ループ処理を行う。
result_3 += numbers[i]; // i番目の要素をresult_3に加算する。
}
console.log(`配列の加算③:${result_3}`)

-----------------------------------------------------------------------
出力結果:
配列の加算③:45



配列の総乗

【①reduce() & return を用いた方法】
行っていることは、先ほどと大して変わりません。総乗の結果が大きくなる都合上、入力値を「1 2 3 4 5」と変更しています。

// numbers : 1,2,3,4,5
var result_1 = numbers.reduce(function(a, b) {
return a * b; // a * b の結果が function(a, b) の a に入る。 
})
console.log(`配列の総乗①:${result_1}`);
-----------------------------------------------------------------------
出力結果:
配列の総乗①:120

【②reduce() & ラムダ式 を用いた方法】

var result_2 = numbers.reduce((a, b) => a * b);
console.log(`配列の総乗②:${result_2}`)
-----------------------------------------------------------------------
出力結果:
配列の総乗②:120

【③おまけ:for文を用いた方法】
これも同じく、総乗のイメージが付きにくい方は、まず、for文でのループ処理を把握すると理解しやすいかもしれません。ただし、先ほどの加算の時とは異なり、result_3の初期値を1としています。これは、0だと、入力値の数値を乗じても、結果が0となってしまうことを防ぐためです。

var result_3 = 1; // 初期値は0ではなく1。
for(var i = 0; i < numbers.length; i++){ // 配列数分、ループ処理を行う。
result_3 *= numbers[i]; // i番目の要素をresult_3に乗算する。
}
console.log(`配列の総乗③:${result_3}`)
-----------------------------------------------------------------------
出力結果:
配列の総乗③:120



配列の平均

【①reduce() & return を用いた方法】
行っていることは、先ほどと大して変わりません。結果の正当性が分かりやすいよう、こちらも入力値を「1 2 3 4 5」としています。

// numbers : 1,2,3,4,5
var result_1 = numbers.reduce(function(a, b) {
return a + b; // a + b の結果が function(a, b) の a に入る。 
})
var average_1 = result_1 / numbers.length;
console.log(`配列の平均①:${average_1}`);
-----------------------------------------------------------------------
出力結果:
配列の平均①:3

 
【②reduce() & ラムダ式 を用いた方法】

var average_2 = numbers.reduce((a, b) => a * b) / numbers.length;
console.log(`配列の平均②:${average_2}`)
-----------------------------------------------------------------------
出力結果:
配列の平均②:3


【③おまけ:for文を用いた方法】
これも同じく、平均のイメージが付きにくい方は、まず、for文でのループ処理を把握すると理解しやすいかもしれません。result_3に全体の加算値を格納したのち、配列数分で割り、平均値を求めます。今回は加算のループ処理なので初期値は0で問題ありません。

var result_3 = 0; // 初期値は0。
for(var i = 0; i < numbers.length; i++){ // 配列数分、ループ処理を行う。
result_3 += numbers[i]; // i番目の要素をresult_3に加算する。
}
var average_3 = result_3 / numbers.length;
console.log(`配列の平均③:${average_3}`)
-----------------------------------------------------------------------
出力結果:
配列の平均③:3



なお、これだけ紹介してアレですが、可読性や処理パフォーマンスを踏まえると、「for文」のほうが良い説もありますね…。reduce(), for文の使い分けは意識したほうがよさそうです。


参考:JavaScriptでsplitを使って文字列を分割する方法【初心者向け】
参考:初心者でも分かるreduce()の使い方とサンプル例まとめ
参考:JavaScriptで学ぶラムダ式入門【初心者向けにわかりやすく解説】
参考:JavaScriptの配列のループ処理(for/map/reduce)の計測
参考:[JavaScript] reduceは可読性が悪くループで置き換え可能なので使うべきではない


著者:かわ

いいなと思ったら応援しよう!