当前位置: 首页 > news >正文

复杂数据处理

前端对于数据的处理一般会用到foreach、map、reduce、Object.values()、Object.keys()、Object.entries()等方法,下面逐次进行分析

foreach
forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。foreach方法不会返回执行结果。

注意: forEach() 对于空数组是不会执行回调函数的。foreach会改变原数组。

语法:
array.forEach(function(currentValue, index, arr), thisValue)
示例:
    let schedulesObj = {};
    dateArr.forEach((key) => {
      if (!schedulesObj[key]) {
        schedulesObj[key] = [];
      }
      schedulesObj[key].push(item);
    });

map
map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。

注意: map() 不会对空数组进行检测。

注意: map() 不会改变原始数组。

语法:
array.map(function(currentValue,index,arr), thisValue)
示例:
    const initItems = initEvaluateItems.map(item => {
      const { score, id, itemName, levelDesc, maxLevel } = item;
      return {
        score,
        id,
        itemName,
        levelDesc,
        maxLevel
      };
    });

reduce
reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。

reduce() 可以作为一个高阶函数,用于函数的 compose。

注意: reduce() 对于空数组是不会执行回调函数的。

语法:
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
示例:
let scheduleIdArray = Object.keys(curScheduleMonth).map(v => curScheduleMonth[v]).reduce((total, item) => {
    total = [...total, ...item];
    return total;
  }, []);

Object.keys()

Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 。

语法:
Object.keys(obj)
示例:
var anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(anObj)); // console: ['2', '7', '100']

Object.values()

Object.values()方法返回一个给定对象自身的所有可枚举属性值的数组,值的顺序与使用for...in循环的顺序相同 ( 区别在于 for-in 循环枚举原型链中的属性 )。

语法:
Object.values(obj)
示例:
var an_obj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.values(an_obj)); // ['b', 'c', 'a']

Object.entries()

Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组,其排列与使用 for...in 循环遍历该对象时返回的顺序一致(区别在于 for-in 循环也枚举原型链中的属性)。

语法:
Object.entries(obj)
示例:
const anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.entries(anObj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]

1.时间相关

{
    "success":true,
    "code": "success",
    "message": "成功",
    "data": {
        "monthData":[
            {
               "month":"2018-05",
               "displayDesc":"有服务",
               "showType":"1",
               "tips":"请您选择"
            }
        ]
        "calendarData":[
            {
               "date":["2018-06-02","2018-07-09"],
               "displayDesc":"有服务",
               "showType":"1",
               "tips":"请您评价"
            }
        ],
        "schedules":[
            {
               "scheduleId":"1",
               "appCode":"106",
               "appName":"公共服务",
               "cityId":"321568",
               "categoryCode":"16",
               "scheduleType":"1",
               "userDesc":"社区医疗",
               "systemDesc":"",
               "remind":"1",
               "repeat":"1",
               "status":"2",
               "serviceUrl":"",
               "beginTime":"2018-04-25",
               "endTime":"2018-04-26",
            }
        ]
    }
}
import moment from 'moment/moment';

/**
 * 通过beginTime和endTime,将列表值按照天的维度进行整理,产出的数据结构scheduleByDay
 * @param schedules
 */
export function genSchedulesObj(schedules = []) {
  let schedulesObj = {};
  schedules.forEach((item) => {
    let { beginTime, endTime } = item;
    let _beginTime = new Date(beginTime).getTime();
    let _endTime = new Date(endTime).getTime();
    let dateArr = [];
    let dateReduce = ((_endTime - _beginTime) / (1000 * 24 * 60 * 60) + 1) || 1;
    dateReduce > 0 ? {} : (dateReduce = 0);
    for (let i = 0; i < dateReduce; i++) {
      dateArr.push(moment(_beginTime).format('YYYY-MM-DD'));
      _beginTime += (1000 * 24 * 3600);
    }
    dateArr.forEach((key) => {
      if (!schedulesObj[key]) {
        schedulesObj[key] = [];
      }
      schedulesObj[key].push(item);
    });
  });
  // let flag = true;
  // for (let key in schedulesObj) {
  //   for (let i = 0, len = schedulesObj[key].length; i < len; i++) {
  //     if (schedulesObj[key][i].status < 3) {
  //       flag = false;
  //       break;
  //     }
  //   }
  // }
  return {
    schedulesObj
  };
}

/**
 * calendarData 日期上显示代办内容,根据这个数据创建tagData是一个一维数组,产出的数据结构tagDataByMonth
 * @param calendarData
 */
export function genCalendarDataObj(calendarData = []) {
  let calendarDataObj = {};
  calendarData.forEach((item) => {
    item.date.forEach((key) => {
      if (!calendarDataObj[key]) {
        calendarDataObj[key] = [];
      }
      calendarDataObj[key].push({
        displayDesc: item.displayDesc,
        showType: item.showType
      });
    });
  });
  return calendarDataObj;
}
/**
 * 获取当前月、上一个月、下一月及当前月的开始、结束日期
 */
export function getFormatMonth(currentDate) {
  const beginDate = moment(currentDate).startOf('month').add(-1, 'M').format('YYYY-MM-DD');
  const endDate = moment(currentDate).endOf('month').add(1, 'M').format('YYYY-MM-DD');
  const preMont = moment(currentDate).subtract(1, 'months').format('YYYY-MM');
  const nextMont = moment(currentDate).add(1, 'months').format('YYYY-MM');

  const currMont = moment(currentDate).format('YYYY-MM');

  const month = preMont + ',' + currMont + ',' + nextMont;

  return {
    beginDate,
    endDate,
    preMont,
    nextMont,
    currMont,
    month
  };
}

2.工具类函数

/**
 * 正则表达式获取地址栏参数
 */

export const getURLParameters = (url) => {
  url = url.split('?')[1] || '';
  url = url.split('&');
  return url.reduce((total, item) => {
    let itemArr = item.split('=');
    total[itemArr[0]] = itemArr[1];
    return total;
  }, {});
};

/**
 * filter过滤
 */
const filterArr = (scheduleByDay[currentDate] || []).filter(v => {
    return v.status !== 4;
  });


const tagData = Object.keys(tagDataByMonth).map((key) => {
    const obj = tagDataByMonth[key][0];
    const scheduleByDayItem = scheduleByDay[key] || [];
    return {
      date: key,
      tag: scheduleByDayItem.length === 1 ? scheduleByDayItem[0].userDesc : obj.displayDesc,
      tagColor: obj.showType === '1' ? '#F5A623' : '#CCCCCC'
    };
  });

let scheduleIdArray = Object.keys(curScheduleMonth).map(v => curScheduleMonth[v]).reduce((total, item) => {
    total = [...total, ...item];
    return total;
  }, []);
  let scheduleId = scheduleIdArray.length ? scheduleIdArray[0].scheduleId : null;
  let isOnlyOne = scheduleId ? scheduleIdArray.every(v => v.scheduleId === scheduleId) : false;

/**
   * 获取服务端时间
   */
  getServerTimeAsync() {
    return new Promise((resolve) => {
      try {
        my.call('getServerTime', (res) => {
          resolve(res.time);
        });
      } catch (e) {
        resolve(new Date().getTime());
      }
    });
  },
/**
   * 检查文本域的长度
   * @param keyword
   * @returns {*}
   */
  checkKeywordLength(keyword) {
    const { maxlength } = this.data;
    if (keyword.length > maxlength) {
      keyword = keyword.substring(0, maxlength);
    }
    return keyword;
  },


const { data: { items: initEvaluateItems } } = serviceKey;
    const initItems = initEvaluateItems.map(item => {
      const { score, id, itemName, levelDesc, maxLevel } = item;
      return {
        score,
        id,
        itemName,
        levelDesc,
        maxLevel
      };
    });

3.层级较深的数据结构

{
    "success": true, 
    "value": {
        "merchant": {
            "id": 0, #物理id
            "partakerId": 0, 
            "partakerName": "string", 
            "merchantPid": "string",
            "merchantName": "string", 
            "owners": {
                "guarantee_owner":[{"account":"string","name":"string"}],
            }, #负责人      
        },
        "extension":{
            keyValues: {
                channel:{
                    key:{
                        id:"21",
                        creator:"流年",
                        dataSource:"",
                        key:"duration",
                        label:"项目周期",
                        type:"date",
                        isRequire:"Y"   
                    },
                    value:"2018-06-02 17:55:12"
                },
                is_sign:{
                    key:{
                        id:"32",
                        creator:"lily",
                        dataSource:"[{'key':'current','value':'今天'},{'key':'last','value':'昨天'}]",
                        key:"startTime",
                        label:"启动时间",
                        type:"select",
                        isRequire:"N"   
                    },
                    value:"last"
                },
                merchantInfo:{
                    key:{
                        id:"02",
                        creator:"jack",
                        dataSource:"",
                        key:"taskCount",
                        label:"任务量",
                        type:"number",
                        isRequire:"Y"   
                    },
                    value:"55"
                },
                code:"DEFAULT",
                tempName:"社区服务"
            }
        }, #动态字段
        
    }, 
    "msg": "string", #错误信息
    "code": "string" #错误码
}




const { stat, value = {}, msg } = response || {};
      if (stat === 'fail') {
        message.error(msg);
      }
      const { merchant = {}, extension = {} } = value;
      const { keyValues = {} } = extension;
      const extenData = Object.entries(keyValues).map(v => {
        const [arr1, arr2] = v;
        const { key, recordId, value: newValue } = arr2;
        return {
          key,
          value: newValue,
          recordId
        };
      });
      console.log('动态数据-----', extenData);


const linksObj = {
  活动信息: links.slice(0, 2),
  活动商户信息: links.slice(2, 8),
  保障商户信息: links.slice(8),
};     
   
   
   getFormDataDom = (data) => {
        const { getFieldDecorator } = this.props.form;
        const { formItem = {} } = this.props;
        return data.map((val) => {
          const { name, id, isSelect = false, isSelectInputOwners = false, isInput = false } = val;
          let isSimpleInitial;
          let isSelectInputOwnersInitial;
          if (isSelect || isInput) {
            isSimpleInitial = formItem && formItem[id] ? formItem[id] : '';
          }
          if (isSelectInputOwners) {
            isSelectInputOwnersInitial = formItem && formItem[id] && formItem[id].length > 0 ? formItem[id].map(v => v.name) : [];
          }
          const initialValue = isSelectInputOwners ? isSelectInputOwnersInitial : isSelect || isInput ? isSimpleInitial : '';
          return (
            <Col span={12} key={id}>
              <FormItem label={name} {...formItemLayout}>
                {getFieldDecorator(`${id}`, {
                  initialValue
                })(this.getFormItem(formItem, val))
                }
              </FormItem>
            </Col>
          );
        });
  };
 
 
    
 extenArr = (extenData = []) => {
    return extenData.map((item) => {
      const { key, value } = item;
      const { fieldKey, fieldLabel } = key;
      let { dataSource } = key;
      let spanValue = '';
      if (dataSource === '') {
        spanValue = value;
      } else {
        try {
          dataSource = dataSource.replace(/'/img, '"');
          const jsonValue = JSON.parse(dataSource);
          spanValue = jsonValue.reduce((total, i) => {
            total[i.key] = i.value;
            return total;
          }, {})[value];
        } catch (e) {
          spanValue = '';
        }
      }
      return {
        name: fieldLabel,
        id: fieldKey,
        spanValue
      };
    });
  };




        <Form>
          <Row>
            {
              Object.entries(linksObj)
                .map((item, index) => {
                  const [item1, item2] = item;
                  return <div key={index}>
                    <h3>{item1}</h3>
                    <Row style={{ borderBottom: index === Object.entries(linksObj).length - 1 ? '1px dashed #ccc' : 'none' }}>
                      {
                        this.getFormDataDom(item2)
                      }
                    </Row>
                         </div>;
                })
            }
            {
              this.getFormDataDom(this.extenArr(extenData))
            }
          </Row>
        </Form>
      

相关文章:

  • 360病毒扫描蓝屏报错nvmini.sys
  • 操作系统成型之路
  • 伍翀:大数据实时计算Flink SQL解密
  • Web应用防火墙支持可视化大屏
  • 关于.NET Core是否应该支持WCF Hosting的争论
  • Slog64_项目上线之ArthurSlog个人网站上线3
  • Executors介绍
  • 正则表达式、re模块
  • 特殊的算术操作指令
  • jchdl - RTL Data Types
  • Python基础之for循环
  • 刚在虚拟机上装的Linux系统,ifconfig后IP地址怎么成了127.0.0.1了
  • 教你利用Python把图片转字符画!代码哆啦A梦你见过嘛?
  • MongoDB 有关实体映射具体应用及对查询的影响
  • Zabbix篇二:Linux批量安装客户端Zabbix-agent
  • Android优雅地处理按钮重复点击
  • Effective Java 笔记(一)
  • SpingCloudBus整合RabbitMQ
  • Spring框架之我见(三)——IOC、AOP
  • Stream流与Lambda表达式(三) 静态工厂类Collectors
  • tab.js分享及浏览器兼容性问题汇总
  • 分享自己折腾多时的一套 vue 组件 --we-vue
  • 关于 Linux 进程的 UID、EUID、GID 和 EGID
  • 浅谈web中前端模板引擎的使用
  • 小程序滚动组件,左边导航栏与右边内容联动效果实现
  • 用Python写一份独特的元宵节祝福
  • ​​​​​​​Installing ROS on the Raspberry Pi
  • ​html.parser --- 简单的 HTML 和 XHTML 解析器​
  • ​LeetCode解法汇总2808. 使循环数组所有元素相等的最少秒数
  • ​如何在iOS手机上查看应用日志
  • #NOIP 2014# day.1 生活大爆炸版 石头剪刀布
  • #pragma预处理命令
  • (12)Hive调优——count distinct去重优化
  • (JSP)EL——优化登录界面,获取对象,获取数据
  • (Redis使用系列) SpringBoot 中对应2.0.x版本的Redis配置 一
  • (分类)KNN算法- 参数调优
  • (深度全面解析)ChatGPT的重大更新给创业者带来了哪些红利机会
  • (十六)Flask之蓝图
  • .NET C#版本和.NET版本以及VS版本的对应关系
  • .NET Core跨平台微服务学习资源
  • .Net Framework 4.x 程序到底运行在哪个 CLR 版本之上
  • .net 反编译_.net反编译的相关问题
  • .NET 应用架构指导 V2 学习笔记(一) 软件架构的关键原则
  • .NET/C# 中设置当发生某个特定异常时进入断点(不借助 Visual Studio 的纯代码实现)
  • .vue文件怎么使用_我在项目中是这样配置Vue的
  • /usr/bin/env: node: No such file or directory
  • @transaction 提交事务_【读源码】剖析TCCTransaction事务提交实现细节
  • [ C++ ] STL---仿函数与priority_queue
  • [ CTF ] WriteUp- 2022年第三届“网鼎杯”网络安全大赛(白虎组)
  • [2018/11/18] Java数据结构(2) 简单排序 冒泡排序 选择排序 插入排序
  • [ArcPy百科]第三节: Geometry信息中的空间参考解析
  • [AutoSar]BSW_OS 01 priority ceiling protocol(PCP)
  • [C#]使用PaddleInference图片旋转四种角度检测
  • [cocos creator]EditBox,editing-return事件,清空输入框
  • [hdu2196]Computer树的直径