【JS】reduceの使い方と破壊力-1.基礎編
こんにちは!今日はJavaScriptのメソッドの一つであるreduceについて書こうと思います!全3回予定。
reduceは複雑ながらも使いこなせればとてつもなく強力、個人的に最も大好きなメソッドの一つです:)
reduce
ざっくり言うと複数個(配列やオブジェクト)を一個にする関数です。
reduceの分かりやすい例としては**数列の合計(sum)**がよく使われますね!こんな感じに...
const arr = [0, 1, 2, 3, 4, 5]
const sum = arr.reduce( function(pre, cur){
return pre + cur
})
console.log(sum) // 15
もう少し短く書くとこう。やってることは同じです。
const n = [0, 1, 2, 3, 4, 5]
const sum = n.reduce((pre, cur) => pre + cur)
console.log(sum) // 15
そういえばJavaScriptにはSUM関数無いですね。.reduceの使い方を勉強する時に「SUM関数を作ってみよう!」っての、わりとメジャーじゃないでしょうか...😛 #javascript #SUM関数
— Mizutani@フロントエンドエンジニア (@sirycity) June 2, 2020
引数の種類と注意点
reduceは4つの引数をとり、それぞれ「直前の結果」「今回の値」「連番」「自身の配列」を示します。
数も多いしJSのメソッドの中でもかなり覚えにくいですねー、適切な命名を心がけましょう。自分は順番に「pre」「cur」「i」「arr」と付けています。他にも「accu」「val」「ind」「self」とか見たことあります。
引数は省略可能です。上の例も前2つしか使ってないわね。後の引数だけを使うこともできますが、やや冗長的な記述になります。下は配列をそのまま返すだけの例です。
const n = [0, 1, 2, 3, 4, 5]
const sum = n.reduce((_, __, ___, arr) => arr)
console.dir(sum) // [0, 1, 2, 3, 4, 5]
2番目の「cur」は、配列の0番目の値に対しては作用しないため注意が必要です。 3以上の数のみをfilterする例で見てみると...
const n = [0, 1, 2, 3, 4, 5]
const sum = n.reduce((pre, cur) =>
[... pre , cur > 3 ? cur : []]
)
console.dir(sum) // [0, 3, 4, 5] あれ?
これは、初回に0番目の値がpre、1番目の値がcurに入るためです。これを避けるため初期値を定義しておくと良いでしょう。 こんな感じに...
const n = [0, 1, 2, 3, 4, 5]
const sum = n.reduce((pre, cur) =>
[... pre , cur > 3 ? cur : []]
, 0)// 最初の値は0
console.dir(sum) // [3, 4, 5]
こうすれば初回に初期値である0がpre、0番目の値がcurに入るため適切な結果がreturnされます。初期値は書いておいて困ることもないので、常に0かnullを入れておくといいと思います:)私はnull派
reduceは引数が4つもあるので、単純な計算ならスプレッド演算子でバラしちゃっても良いかもしれません。 冒頭の数列合計の例だと...
const n = [0, 1, 2, 3, 4, 5]
const sum = n.reduce((... v) => v[0] + v[1])
console.log(sum) // 15
んーどうだろう、数学っぽい書き方なので人によっては見やすいかも?しれないわね。
reduceは始まったばかり
個人的にreduce大好きすぎるので(2回目)、reduceを綺麗に使ったコードを見るのがとても嬉しいです。 次回はreduceとmap、filterの違いとかスプレッド演算子との組み合わせとかを書きたいと思います:)じゃあね
ここまで書いて気づいたけどスプレッド演算子も結構な難易度ですね:( 当たり前のように記事内でreduceと組み合わせてたけど...
【追記】(2019/04/08)続き書いた
LINK
TAGS
LATESTS
POPULAR
- CSS2021/04/29【CSS】右寄せの方法は結局flexが一番良さそう
- React2020/07/13【JS】Reactのstyleの使い方、書き方いろいろ
- Payment2021/10/16GooglePayでVisaタッチを使う時に知っておきたい過酷な現実【追記あり】
- Others2021/07/11Slackに予約投稿機能ができて嬉しいけどそれでもまだ少し不満な理由【追記あり】
- CSS2020/04/30【CSS】tailwind.cssでよく使うデザインパターン
- CSS2019/03/30【CSS】100vhは「一画面」ではないという罠
- CSS2020/06/09【CSS】max-font-sizeやmin-font-sizeを使いたくなったら
- Vue2019/06/29【JS】Vueの:classの書き方3通り
- JavaScript2020/09/02【JS】yarnの長所とyarnからnpmに戻ってきた理由
- React2020/06/04【JS】ReactのclassNameの色々な書き方紹介