【JavaScript】配列操作を征する旅路 【Part 1】

JavaScript で配列操作する機会は， 毎度頻発するので， 学びになったものを残していこうと思います！

形式は，ビフォーアフター形式です． 直したい配列のサンプルデータを定義してそれを修正します．

🙅‍♂️ サンプルデータ 🙅‍♀️

今回は，

sampleData.js

const sampleData = [
    {
      label: 'SaaS',
      name: 'finance',
      pulldownList: [
       { id: '2020', name: '2020年度', type: '経費' },
       { id: '2021', name: '2021年度', type: '経費' },
       { id: '2022', name: '2022年度', type: '経費' },
       { id: '2023', name: '2023年度', type: '経費' },
       { id: '2024', name: '2024年度', type: '経費' }
     ]
    }
]

こんなデータがあったとして， フォームのプルダウンメニューに直近５年度分の年度を表示したいという要件だったと仮定します．

🚀 やりたいこと 🚀

• pulldownList 配列をループ処理を使ってスッキリしたい
• 現在の時刻データを取得してきて， 5 年分だけ表示したい

♻️ スッキリさせる ♻️

sampleData.js

const sampleData = [
    {
      label: 'SaaS',
      name: 'finance',
      pulldownList: new Array(5).fill(0).map((_, i) => {
        const currentYear = new Date().getFullYear()
        return { id: `${currentYear + i}`, name: `${currentYear + i}年度`, type: '経費' }
      })
    }
]

スッキリできました🎊

👨‍🏫 解説 👩‍🏫

軽く説明します．

まずnew Array(5)で，空の配列を5つ分セットします．
その後，fill() メソッドを使用して，配列の開始位置から終了位置まで 0 を設定します。ここでは, 0 を設定しているけど， fill() として undefined を設定しても動きます．JS 的にどっちがいいとかはよくわかりませんでした． すごく厳密に書くとこんな感じになるのかな？🤔　new Array(5).fill({id: '', name: '', type: ''}) よくわからない👼．JS 強者の方がもしみてくださったらご教示いただけると幸いです🙇‍♂️

あとは配列操作でお世話になりがちな map()メソッド を使用して, しばいていきます．今回は, index しか必要ないです． あとは， Dateオブジェクト で現在時刻を取得してきて，年数 4 桁のみ取得してくるインスタンスメソッドgetFullYear()を使用して加算していくという流れになります！