写在前面

大家好，我是江枫眠，在前端行业摸排滚打好多年，欠过技术债，也还过技术债，不管前端还能做几年，励志写可维护的前端代码

进入主题

Array.from想必大家都不陌生，它有很多很实用的地址，去重，将类数组转为数组，数组浅克隆，将字符串转为数组等等，大家可自行去查阅，今天主要想说的是使用Array.from，快速的生成自己想要数组，最近老是使用它，觉得真香。

场景1

我想要一组数据，长度根据数据的长度而定，数组内容为数组的长度*2，暂时叫它总分吧

const totalScore=ref([])
const dataLength=ref(0)

totalScore.value=Array.form({length:arrLength},()=>arrLength*2))
// 假设 dataLength 是 5
console.log(totalScore.value) // [10,10,10,10,10]

场景2

展示一个月的数据统计表，后端给到的数据日期不一定都有，没有数据的那天并没有给到日期，这个时候后端会说你前端自己去补全一数据，那么使用Array.from 生成数组，使用find方法进去匹配数据，完美。处理数据，前后端都可以，嗯，就是看谁懒。

//首先，这个月多少你是可以获取到的
const dateLenght=dayjs('你的日期').daysInMonth() //当前月的天数 dayjs()当前月的天数
//要匹配的数据
const scoreData = [
  { date: '2022-09-04', score: 10 },
  { date: '2022-09-07', score: 8 },
]
//建立一个自己的统计data
const _data=Array.from({length:dateLenght}).map((item)=>{
    const day=dayjs('你的日期').date(1).add(index, 'd').format('YYYY-MM-DD')
    //通过find方法找有分数的日期，没有分数的就补0
    const isHas = scoreData.find((k) => {
        return k.date== day
      })
    return{
        day,
        score:isHas?.score || 0
    }
})
// 假设你的日期 = 2022-09-08 dateLenght=30
console.log(_data)
/*
[
  { day: '2022-09-01', score: 0 },
  { day: '2022-09-02', score: 0 },
  { day: '2022-09-03', score: 0 },
  { day: '2022-09-04', score: 10 },
  { day: '2022-09-05', score: 0 },
  { day: '2022-09-06', score: 0 },
  { day: '2022-09-07', score: 8 },
    ...
  { day: '2022-09-30', score: 0 }
]
*/

最后

学无止境，API每看一次，都会有不同的认知，每使用一次，下次使用就会变得得心应手。

MDN