写在前面:
先看下最终数据结构展示
time(‘-10-01’, ‘-01-06’)
需要根据一个开始日期和一个结束日期最后返回以下数组对象
[最外层数组里的每个对象代表了某一年的所有数据,有几个对象代表了跨度是几年{"year": , year:表示哪一年的数据"mouthArr": [ mouthArr:存放当前年份下的所有月份{"yearItem": ,"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": ,"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": ,"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": ,"mouthArr": [{"yearItem": ,"mouth": 1,"dayArr": [1,2,3,4,5,6]}]}]
最外层数组里的每个对象代表了某一年的所有数据,有几个对象代表了跨度是几年,year表示某一年
mouthArr这个数组代表了当前年份下的所有月份,传的参数是从-10-01开始, -01-06结束
那么 这个对象里的mouthArr就有10,11,12三个月的数据,
这个对象里mouthArr就只有1月的数据
mouthArr数组每个对象里的yearItem代表了当前月份所属哪一年,mouth表示当前月份,
dayArr数组表示了当前月份的包含的天, 结束日期是-01-06那么 对象里面mouthArr数组mouth为1对象dayArr天数只有1-6号
// time 类型 是newDate()的 Sun Apr 08 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: , mouth: 10, day: 1},{year: , 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 trueif (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) {// 如果年份不相等,年份数组pushlistArr.push({year: item.year,mouthArr: [{yearItem: item.year,mouth: item.mouth,dayArr: [item.day]}]})}}}) return listArr}console.log(time('-10-01', '-01-06'))
然后可以 for 循环return的数组 字符串拼接, 生成你想要的甘特图头部:截一个项目中的图
qq:45664741
www.flot.top 学习nuxt.js东拼西凑的一个小小的个人网站,欢迎光临
js通过开始时间和结束时间计算出中间的所有日期 并且转换为层级结构数组对象 用于甘特图头部日期数据
