写在前面:
先看下最终数据结构展示
time(‘2020-10-01’, ‘2021-01-06’)
需要根据一个开始日期和一个结束日期最后返回以下数组对象
[
最外层数组里的每个对象代表了某一年的所有数据,有几个对象代表了跨度是几年
{
"year": 2020, year:表示哪一年的数据
"mouthArr": [ mouthArr:存放当前年份下的所有月份
{
"yearItem": 2020,
"mouth": 10, mouth:表示当前月份---dayArr则存放月份的天
"dayArr": [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]
},
{
"yearItem": 2020,
"mouth": 11,
"dayArr": [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30]
},
{
"yearItem": 2020,
"mouth": 12,
"dayArr": [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]
}
]
},
{
"year": 2021,
"mouthArr": [
{
"yearItem": 2021,
"mouth": 1,
"dayArr": [1,2,3,4,5,6]
}
]
}
]
最外层数组里的每个对象代表了某一年的所有数据,有几个对象代表了跨度是几年, year表示某一年
mouthArr 这个数组代表了当前年份下的所有月份,传的参数是从2020-10-01开始, 2021-01-06结束
那么 2020年这个对象里的mouthArr 就有10,11,12 三个月的数据,
2021年这个对象里mouthArr就只有1月的数据
mouthArr数组每个对象里的yearItem 代表了当前月份所属哪一年,mouth表示当前月份,
dayArr数组表示了当前月份的包含的天, 结束日期是2021-01-06那么2021 对象里面mouthArr数组mouth为1对象dayArr天数只有1-6号
// time 类型 是newDate()的 Sun Apr 08 2018 08:00:00 GMT+0800 (中国标准时间) 格式
function format(time) {
let year = time.getFullYear(); //获取年份。
let mouth = time.getMonth() + 1; //获取月份。
let day = time.getDate(); //获取天
return {
year,
mouth,
day
}
}
function time(start, end) {
//获取开始时间和结束时间的时间戳
var startTime = new Date(start).getTime()
var endTime = new Date(end).getTime()
var dateArr = [] // 存放区间数据的数组
var stamp;
var oneDay = 24 * 60 * 60 * 1000;
for (stamp = startTime; stamp <= endTime;) {
dateArr.push(format(new Date(stamp)))
stamp += oneDay
}
//此时的dateArr 格式为[{year: 2020, mouth: 10, day: 1},{year: 2020, mouth: 10, day: 2},....] 可以在这里打印下看看
var listArr = [] // 存放转换后的数组 把扁平化的数据转换为 层级结构的
dateArr.forEach((item, index) => {
if (index === 0) {
listArr.push({
year: item.year,
mouthArr: [{
yearItem: item.year,
mouth: item.mouth,
dayArr: [item.day]
}]
})
} else {
// 不是第一次,就需要两个数组对比如果有一样的就再对比
//some()函数 用于检测数组中的元素是否满足指定条件.
// 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测
var yearFlag = listArr.some((listItem, listIndex) => {
// 如果年份相等,就要循环月份数组
if (listItem.year == item.year) {
// 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测
var mouthFlag = listItem.mouthArr.some((mouthItem, mouthIndex) => {
// 如果月份相等,就把天push进去,return true
if (mouthItem.mouth == item.mouth) {
mouthItem.dayArr.push(item.day)
return true;
}
})
// 如果月开关是fasle 就代表月份没有一样的 push就行了
if (!mouthFlag) {
listItem.mouthArr.push({
yearItem: item.year,
mouth: item.mouth,
dayArr: [item.day]
})
}
return true
}
})
// 如果年开关是fasle 就代表年份没有一样的 push就行了
if (!yearFlag) {
// 如果年份不相等,年份数组push
listArr.push({
year: item.year,
mouthArr: [{
yearItem: item.year,
mouth: item.mouth,
dayArr: [item.day]
}]
})
}
}
})
return listArr
}
console.log(time('2020-10-01', '2021-01-06'))
然后可以 for 循环return的数组 字符串拼接, 生成你想要的甘特图头部:截一个项目中的图
www.flot.top 学习nuxt.js东拼西凑的一个小小的个人网站,欢迎光临