【JS】reduceの使い方と破壊力-2.reduce=filter+map

こんにちは!今回も前回に引き続き、reduceを利用したテクニックを紹介します。

reduce = filter + map

reduceはJavaScriptの他メソッドであるfilterやmapと同じ処理ができます。

しかも驚くことなかれ、reduceはこの2つを同時にできるんです。すごい!

個人的にJavaScript最強メソッドだと思ってる.reduce。
.map .filter .findなど殆どのメソッドを代替できる。読みにくいけど。これは.mapと同じ挙動になった.reduce。 #javascript #reactjs pic.twitter.com/PQv4mY6lVz
— Mizutani@フロントエンドエンジニア (@sirycity) June 5, 2020

filterのおさらいとreduceでの代用

まずはfilter

まずはfilterの簡単な例を見てみましょう!今やずやのCM流れてたんで数列は0120-828-828にするわ

const yazuya = [0, 1, 2, 0, 8, 2, 8, 8, 2, 8]

この配列から1以下の数字をfilterすると…

const yazuya = [0, 1, 2, 0, 8, 2, 8, 8, 2, 8]
const answer = yazuya.filter(n => n <= 1)

console.dir(answer) // [0, 1, 0]

0,1だけが残りました!簡単ですね:)

同じ処理を今度はreduceで

reduceで同じ処理をやってみると…

const yazuya = [0, 1, 2, 0, 8, 2, 8, 8, 2, 8]
const answer = yazuya.recude((pre, cur) =>
   [
    ... pre,
    cur <= 1
      ? cur
      : ... []
  ]
,[])

console.dir(answer)// [0, 1, 0]

…めんどくさい!短くしようと思えばもうちょいできますが、かなりめんどくさい。一気に胡散臭い健康食品になりましたね:(

気を取り直してmapを見ていきましょう…

次にmap

次はmapです。mapは全ての数字に1足す処理をしてみます。0120が1231になるイメージです。はい

const yazuya = [0, 1, 2, 0, 8, 2, 8, 8, 2, 8]
const answer = yazuya.map(n => n + 1)

console.dir(answer) // [1, 2, 3, 1, 9, 3, 9, 9, 3, 9]

問題ないですね。~~なんか臭い語呂合わせになりましたが~~

ではこれもreduceで

こう。

const yazuya = [0, 1, 2, 0, 8, 2, 8, 8, 2, 8]
const answer = yazuya.recude((pre, cur) => [...pre, cur + 1], [])

console.dir(answer) // [1, 2, 3, 1, 9, 3, 9, 9, 3, 9]

やはりめんどくさい!reduce使う必要性ってあるの???

filterしてmapする時はどうする?

次にfilterした後mapする時を考えてみましょう。1以下のみに絞ってから残りを+1してみます。

const yazuya = [0, 1, 2, 0, 8, 2, 8, 8, 2, 8]
const answer = yazuya.filter(n => n <= 1).map(n => n + 1)

console.dir(answer) // [1, 2, 1]

まだまだ十分読める範囲ですね。逆もやってみましょう、全部+1してから1以下に絞ります

const yazuya = [0, 1, 2, 0, 8, 2, 8, 8, 2, 8]
const answer = yazuya.map(n => n + 1).filter(n => n <= 1)

console.dir(answer) // [1, 1]

こちらも問題なし。

欠点(?)

メソッドを2個使っちゃいます。配列の絞り込みと写像はそれぞれfilterとmapのみに可能で、逆は無理です。

…まあ別に両方使えばいいんですけど、クールにreduceのみで実装したくないですか?なるよね!?

reduceで書く

上の2つ、reduceで書きましょう。

const yazuya = [0, 1, 2, 0, 8, 2, 8, 8, 2, 8]
const answer = yazuya.recude((pre, cur) =>
   [
    ... pre,
    cur <= 1
      ? cur + 1
      : ... []
  ]
,[])

console.dir(answer)// [1, 2, 1]

const yazuya = [0, 1, 2, 0, 8, 2, 8, 8, 2, 8]
const answer = yazuya.recude((pre, cur) =>
   [
    ... pre,
    cur + 1 <= 1
      ? cur + 1
      : ... []
  ]
,[])

console.dir(answer)// [1, 1]