日期数据数组按实际周和实际月进行分组

news/2024/7/19 15:00:56 标签: js

需求来源:后端返回所有时间数组和数值数组,前端按天、周、月进行统计用于图表的展示。

实现效果如下:原始数据是两个数组,date数组存放日期,value数组存放日期对应的数值,经过按周分组和按月分组输出week和month(2020-02-27是周四,2020-03-02是周一,2020-03-09也是周一,符合要求)

封装了两个方法,代码如下:groupByWeek和groupByMonth,输入值均为date-日期数组和value-值数组

const date = ["2020-02-27","2020-02-28","2020-02-29","2020-03-01", "2020-03-02", "2020-03-03", "2020-03-04", "2020-03-05", "2020-03-06", "2020-03-07", "2020-03-08", "2020-03-09", "2020-03-10", "2020-03-11", "2020-03-12", "2020-03-13", "2020-03-14", "2020-03-15", "2020-03-16", "2020-03-17", "2020-03-18", "2020-03-19", "2020-03-20", "2020-03-21"];
    const value = [0,0,0,3, 2, 2, 6, 5, 3, 5, 4, 8, 5, 8, 9, 9, 0,4,6,7,8,1,2,3];
    console.log({date});
    console.log({value});
    const week = groupByWeek(date, value);
    const month = groupByMonth(date, value);
    console.log({week});
    console.log({month});

    // 按周分组
    function groupByWeek(date, value) {
        const weekDay = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
        const weekDate = [];
        let newDate = [];
        let newValue = [];
        /*遍历,把所有日期转为星期X*/
        date.forEach((item) => {
            const myDate = new Date(Date.parse(item));
            weekDate.push(weekDay[myDate.getDay()]);
        });
        /*从前往后找第一个“星期日”,返回下标*/
        const index = weekDate.findIndex((value)=>{
            return value=="星期日";
        });
        if(index >= 0){ //日期数组内可以找到"星期日"
            /*以周为单位开始分组*/
            // 第一个周为一个数组,其他的按7天开始分组
            const date1 = date.slice(0,index+1);
            const date2 = date.slice(index+1,date.length);
            const value1 = value.slice(0,index+1);
            const value2 = value.slice(index+1,value.length);
            newDate.push(date1[0]);
            newValue.push(eval(value1.join("+")));
            const result = dataGroupFunc(date2, value2, 7);
            newDate = newDate.concat(result.newArr1);
            newValue = newValue.concat(result.newArr2);
        } else { //日期数组内找不到"星期日"
            newDate = date;
            newValue = [eval(value.join("+"))];
        }
        return {
            newDate: newDate,
            newValue:newValue
        };
        // 图表数据分组方法:arr1-图表横坐标,arr2-图表纵坐标数据,group-以几条数据为一组
        function dataGroupFunc(arr1, arr2, group) {
            const newArr1 = [];
            const newArr2 = [];
            for(let i = 0; i < arr1.length;) {
                newArr1.push(arr1[i]);
                let count = 0;
                for (let j = i; j < i+group; j++) {
                    if (arr2[j]){
                        count += arr2[j];
                    }
                }
                newArr2.push(count);
                i+=group;
            }
            return {
                newArr1: newArr1,
                newArr2: newArr2
            }
        }
    }

    // 按月分组
    function groupByMonth(date, value) {
        const newDate = [];
        const newValue = [];
        const newDate1 = [];
        const newValue1 = [];
        const monthArr = [];
        const indexArr = [];
        /*遍历,把所有日期的月份取出*/
        date.forEach((item) => {
            item.split('-');
            monthArr.push(item.split('-')[1]);
        });
        group(monthArr, 0 , 0);
        /*根据分好组的下标信息开始截取原始数组*/
        indexArr.forEach((item) => {
            newDate1.push(date.slice(item[0],item[item.length-1]+1));
            newValue1.push(value.slice(item[0],item[item.length-1]+1));
        });
        /*把每个分组的第一项拿出用于图表横坐标的值*/
        newDate1.forEach((item) => {
            newDate.push(item[0]);
        });
        /*计算纵坐标的和值*/
        newValue1.forEach((item) => {
            newValue.push(eval(item.join("+")));
        });
        return {
            newDate: newDate,
            newValue: newValue
        };
        //数组相同项合一组记录下标
        function group(arr, index, index1) {
            if (index < arr.length) {
                indexArr[index1] = [index];
                for(let i=index+1; i<arr.length; i++){
                    if (arr[i] == arr[index]){
                        indexArr[index1].push(i);
                    } else {
                        group(arr, i, index1+1);
                        break;
                    }

                }

            }
        }
    }

 


http://www.niftyadmin.cn/n/1368188.html

相关文章

mpvue 计算属性computed传参写法console.log有输出但页面上没有值

需求来源&#xff1a;微信小程序中要对列表的日期字符串进行处理以符合设计效果如下图 我们用Vue开发项目应该都处理过页面遍历数组渲染时用computed传参的写法来处理数据&#xff0c;此时computed写法如下&#xff1a; computed: {myfilter() {return function(val){return v…

Element 树形控件el-tree在实际项目中的应用demo

整理了一下Element树形控件el-tree在实际项目中的完整应用代码&#xff0c;包括样式和功能都有做处理&#xff0c;基本包括以下内容&#xff1a; 样式已初步编写&#xff0c;可直接应用el-tree的滚动条出现及样式限制节点宽度&#xff0c;超出省略号并添加title节点前图标及样…

Vue+Element 用同一个el-dialog弹框完成新增和编辑操作

在实际业务中我们往往选择用同一个弹框组件来同时实现新增和编辑操作。但el-dialog弹框的visible.sync设置显示和隐藏往往带来很多额外的工作&#xff1a;处理数据的变更&#xff0c;带校验表单的内容移除和校验清除等 这需要我们在各种隐藏的bug里耗费很多精力&#xff0c;处理…

CSS科技感四角边框

实现效果&#xff1a;使用before和after就可以实现&#xff0c;代码量不多&#xff0c;长度颜色都可以自己调整 实现代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</titl…

CSS:头部导航设置复杂背景图片自适应显示(与menu菜单贴合-自用)

【2021/07/06】 更新第二种方式&#xff0c;目前已在项目上应用 采用padding-top百分比的方法&#xff0c;具体操作如下&#xff1a; 1.计算padding-top值&#xff08;例如图片宽1920&#xff0c;高1080&#xff09; padding-top &#xff08;高度 / 宽度 &#xff09;&am…

VUE+前端数据存储indexDB

背景 最近项目中基于需求限制需要使用mineMap地图绘制路段&#xff0c;路段数据有3万条&#xff08;大概27.6M&#xff09;&#xff0c;前后端请求一次耗时38s&#xff0c;这么长的基础数据请求时间对任何一个项目来说都是无法接受的。基于此前后端做了以下操作以期解决这个问…

关于Android使用socket与PC连接的问题

很久之前从图书馆借了一本Android基础教程的书&#xff0c;看到里边有一个小Demo挺有意思的。要实现的是使用socket通信&#xff0c;在Android和PC端进行通信&#xff0c;手机作为客户端发送数据&#xff0c;PC作为服务端接收数据。我感兴趣的是它要实现的功能&#xff1a;Andr…

Struts2里的动态方法调用和namespace问题

在学strus2的过程中发现了很多问题&#xff0c;一个书上的例子能把人整半天。我发现不同版本的stuts2太不一样了&#xff0c;调试过程中出现了很多的小问题。比如用&#xff01;的方式进行动态调用Action中的方法&#xff0c;必须在struts.xml中配置<constant name"str…