LoginSignup
0

More than 3 years have passed since last update.

魔法JS☆あれい 第11話「最後に残ったreduceとreduceRight」

Last updated at Posted at 2020-03-23

登場人物

丹生(にゅう)あれい
魔法少女「魔法(マジカル)JS(女子小学生)☆あれい」として活動中。

イテレー太
正体不明の魔法生物。

第1部「ミューテーター・メソッド編」
* 第1話「popでpushした、ような……」
* 第2話「shiftはとってもunshiftって」
* 第3話「もうsortもreverseも怖くない」
* 第4話「fillも、spliceも、copyWithinもあるんだよ」

第2部「アクセサ・メソッド編」
* 第5話「joinなんて、concatなわけない」
* 第6話「indexOfなの絶対lastIndexOf」
* 第7話「includesのsliceと向き合えますか?」

第3部「イテレーション・メソッド編」
* 第8話「filterって、ほんとfindとfindIndex」
* 第9話「someなの、everyが許さない」
* 第10話「もうmapにもforEachにも頼らない」

reduce()

イテレー太「さあ、そろそろ戦いのクライマックスだよ!」
あれい「まだあるのかこの駄犬」
イ「召喚したデータは第8話を参照してね! そして、今回の敵の弱点は、『すべての記事のLGTM(likes_count)数の合計値』だよ!」
あ「はあ……」
イ「さあ、LGTMの合計値をreturnして敵を倒してよ!」
あ「はあ……面倒くせえなあ……」

var sum = 0;
items.forEach(item => {
  sum += item.likes_count;
});
return sum;

イ「……あれい、コードのレベルの急落幅が凄まじいよ。目に余るものがあるよ」
あ「もう疲れてきたんだよ」
イ「ダメだよ! こんなコードじゃ敵を倒せないよ! 特にforEach()は前回『使いみちがよくわからない』って言っちゃってるよ!」
あ「結果だけ合ってりゃいいだろ」
イ「そんなんじゃ魔法少女じゃないよ! いつものように1行でビシッと決めてよ!」
あ「面倒くせえなあ……」

return items.reduce((sum, item) => sum += item.likes_count, 0);

あ「これでいいのか」
イ「それでこそあれいだよ! そして解説をお願い!」
あ「はあ、面倒くせえなあ……だから、reduce() メソッドですべての記事にアクセスして、likes_countの値を順にsumに加算してるんだよ。で、予めアキュムレータであるsumの初期値を0に設定している」
イ「いやー、さすがはあれい! やればできるのに最初あからさまに手を抜いたね!」
あ「うるせえ」

解説

reduce() は配列の各要素に対して(引数で与えられた)reducer 関数を実行して、単一の値にします。

MDNより)

reduce()メソッドは、配列のメソッドの中でも最もややこしいメソッドの一つです。ただし、コツさえつかめば非常に便利です。
reduce()メソッドは、「コールバック関数、アキュムレータの初期値」の2つの引数を使用できます。さらにコールバック関数では、「アキュムレータ(コールバックの戻り値を蓄積する変数)、現在の要素、現在の要素のインデックス、元の配列」という4つの引数を使用できます。
……と書くと非常にややこしいんですが、単にmap()メソッドのように「すべての要素に関数を実行」し、その結果が順にアキュムレータに蓄積されていく……と考えると、少しはわかりやすいかもしれません。
また、アキュムレータの初期値を指定しなかった場合、配列の最初の要素が使用されます。

例えば、LGTM数の最大値を算出したい場合は、次のような記述になります。

return items.reduce((max, item) => max > item.likes_count ? max : item.likes_count, 0);

reduceRight()

解説

reduceRight()は、隣り合う 2 つの配列要素に対して(右から左へ)同時に関数を適用し、単一の値にします。

MDNより)

さて、あれいも疲れているようなので、reduceRight() メソッドについては解説のみとなります。
reduce()メソッドとの違いは、「コールバック関数が最後の要素から逆順に実行される」「アキュムレータの初期値を指定しなかった場合、配列の最後の要素が使用される」の2点です。

次回予告

ネストされた配列が扱いにくいだなんて言われたら、
私、そんなのはフラット化できるって、何度でもそう言い返せます。
きっといつまでも言い張れます。

最終話 flatの、最高のflatMap

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0