【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?
LINK
リンク
Twitter
GitHub
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の色々な書き方紹介