JavaScriptに関するお知らせ

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

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


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

reduce = filter + map

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

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

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]

すごくクールだよ。

reduce=filter+map の長所と短所

長所

  • かっこいい
  • かっこいい
  • 処理が複雑化してもコードがあまり増えない

短所

  • 簡単な処理ならfilterとmapで十分
  • 読みにくい
  • レガシーブラウザ非対応

結論

別にfilterとmapに分ければいいけどreduceで書けるとかっこいい<3<3<3

reduceは見にくいけど慣れるとなんでも出来る素敵メソッドなので、機会があれば積極的に使ってドヤ顔しましょう:)

私は自分1人の時だけ使ってます

reduceでもう一本書きますー

PREV
2019-04-07
【JS】reduceの使い方と破壊力-1.基礎編

NEXT
2019-04-17
【Python】【JS】Pythonのスター演算子とJSのスプレッド演算子でクールに配列追加

POPULAR

    LATESTS