JavaScriptに関するお知らせ

SINCE2019
>
【JS】reduceで複雑な配列操作-最も古い4文字の元号の次の元号は?

【JS】reduceで複雑な配列操作-最も古い4文字の元号の次の元号は?


こんにちは!今日はreduceを使った配列操作シリーズです。

令和になったばかりなので、サジェスト的な問題で便乗していきます!

Q.最も古い4文字の元号は?

こんな感じに元号が古い順になった配列を想定します

const eras = [
  // 省略
  '明治',
  '大正',
  '昭和',
  '平成',
  '令和',
]

ここから4文字の元号を取得するには...そう!.findですね:)

const answer = eras.find(era => era.length === 4)

console.log(answer) // 天平感宝

いいねーワンライナーでもいけそう!

最も新しい4文字の元号は?

.findが返すのは一番最初の値...

ということで、最後の値が欲しい場合は配列をひっくり返しましょう!

.reverse()を付けるだけでokーー

const answer = eras.reverse().find(era => era.length === 4)

console.log(answer) // 天平感宝

ここまでは簡単!

最も古い4文字の元号の次の元号は?

.findが取得するのは1つだけです。なので、「次の」とか出るときつい...

できなくもないけど、こんな感じ。

const answer = eras.find(era => era.length === 4)

const i = eras.indexOf(answer)
const nextEra = eras[i + 1]
console.log(nextEra) // 天平勝宝

全然見れるけど、ちょっとごちゃごちゃしてる?

出番だreduce

reduceで書きます。

const answer = eras.reduce(
  (pre, cur, i, arr) => i && (pre || (arr[i - 1].length === 4 && cur)),
  0,
)

console.log(answer) // 天平勝宝

いいですねー、reduce特有の気持ち悪さが出てきました:)

最も新しい4文字の元号の次の元号は?

これは.findだとこんな感じ?

const answer = eras.reverse().find(era => era.length === 4)

const i = eras.indexOf(answer)
const nextEra = eras[i - 1]
console.log(nextEra) // 宝亀

reduceだとこう

const answer = eras.reduceRight(
  (pre, cur, i, arr) => pre || (arr[i - 1].length === 4 && cur),
  0,
)

console.log(answer) // 宝亀

reduceRightだけどな!さっきのよりは多少シンプルです。

使いどころ

特に思いつかない...かっこいいくらいしかない... ごめん令和

reduceは何でもできるけど得てして論理演算子と三項演算子で溢れかえるので、 自分一人で使う時以外は3行くらいに収めましょう:(



PREV
2019-05-01
【JS】令和でわかるnullとundefinedの違い

NEXT
2019-05-04
【JS】配列検索はsome?every?find?indexOf?includes?test?exec?match?search?