JavaScript is required
Blog About

自动生成年份跨度列表

2024/05/25
3 mins read
See this issue
# 开发实践
# Javascript
Back

在许多业务中,经常会遇见按照年份筛选的表单,比如可以筛选据现在为止10年,每一年的数据

image

有些时候没有后台,会把年份直接写在前端,如果直接把年份写固定那么很明显会出现新的一年无法选取的问题,所以肯定是用js去计算出年份,就像这样

const createYearList = (yearLen = 10) => {
  let yearList = [];
  for (let i = 0; i < yearLen; i++) {
    yearList.push( new Date().getFullYear() - i);
  }
  return yearList;
};

但是事实上我忘记可以使用Array.from更便捷的生成

const createYearList = (yearLen = 10) => Array.from({ length: yearLen }, (_, i) => new Date().getFullYear() - i);
// [2024, 2023, 2022, 2021, 2020, 2019, 2018, 2017, 2016, 2015]

再加上ts ,优化一下回调操作

export function yearList<T = number>(yearLen: number, cb?: (year: number) => T) {
  return Array.from(
    { length: yearLen },
    (_, i) => cb ? cb(new Date().getFullYear() - i) : new Date().getFullYear() - i
  );
}

没什么用的小技巧又增加了

console.log(yearList(10))
// [2024, 2023, 2022, 2021, 2020, 2019, 2018, 2017, 2016, 2015] 
console.log(yearList(10,(i)=>`${i}年`))
// ["2024年", "2023年", "2022年", "2021年", "2020年", "2019年", "2018年", "2017年", "2016年", "2015年"] 
console.log(yearList(10,(i)=>({label:`${i}年`,value:i})))
/**
[{
  "label": "2024年",
  "value": 2024
}, {
  "label": "2023年",
  "value": 2023
}, {
  "label": "2022年",
  "value": 2022
}, {
  "label": "2021年",
  "value": 2021
}, {
  "label": "2020年",
  "value": 2020
}, {
  "label": "2019年",
  "value": 2019
}, {
  "label": "2018年",
  "value": 2018
}, {
  "label": "2017年",
  "value": 2017
}, {
  "label": "2016年",
  "value": 2016
}, {
  "label": "2015年",
  "value": 2015
}] 
*/