问答

js如何将二维对象数组生成一维对象数据

作者:admin 2021-06-14 我要评论

[ { name: 'A组', data:[ {date: '2019-08-31', count: 988}, {date: '2019-09-30', count: 823}, {date: '2019-10-31', count: 235}, {date: '2019-11-30', cou...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

[

{
    name: 'A组',
    data:[
        {date: '2019-08-31', count: 988},
            {date: '2019-09-30', count: 823},
            {date: '2019-10-31', count: 235},
            {date: '2019-11-30', count: 1042},
            {date: '2019-12-31', count: 988},
            {date: '2020-01-31', count: 823},
            {date: '2020-02-29', count: 235},
            {date: '2020-03-31', count: 1042},
            {date: '2020-04-30', count: 988},
            {date: '2020-05-31', count: 823},
            {date: '2020-06-30', count: 235},
            {date: '2020-07-28', count: 1042}
    ]
},
{
    name: 'B组',
    data:[
        {date: '2019-08-31', count: 988},
            {date: '2019-09-30', count: 823},
            {date: '2019-10-31', count: 235},
            {date: '2019-11-30', count: 1042},
            {date: '2019-12-31', count: 988},
            {date: '2020-01-31', count: 823},
            {date: '2020-02-29', count: 235},
            {date: '2020-03-31', count: 1042},
            {date: '2020-04-30', count: 988},
            {date: '2020-05-31', count: 823},
            {date: '2020-06-30', count: 235},
            {date: '2020-07-28', count: 1042}
    ]
},
{
    name: 'C组',
    data:[
        {date: '2019-08-31', count: 988},
            {date: '2019-09-30', count: 823},
            {date: '2019-10-31', count: 235},
            {date: '2019-11-30', count: 1042},
            {date: '2019-12-31', count: 988},
            {date: '2020-01-31', count: 823},
            {date: '2020-02-29', count: 235},
            {date: '2020-03-31', count: 1042},
            {date: '2020-04-30', count: 988},
            {date: '2020-05-31', count: 823},
            {date: '2020-06-30', count: 235},
            {date: '2020-07-28', count: 1042}
    ]
},
{
    name: 'D组',
    data:[
        {date: '2019-08-31', count: 988},
            {date: '2019-09-30', count: 823},
            {date: '2019-10-31', count: 235},
            {date: '2019-11-30', count: 1042},
            {date: '2019-12-31', count: 988},
            {date: '2020-01-31', count: 823},
            {date: '2020-02-29', count: 235},
            {date: '2020-03-31', count: 1042},
            {date: '2020-04-30', count: 988},
            {date: '2020-05-31', count: 823},
            {date: '2020-06-30', count: 235},
            {date: '2020-07-28', count: 1042}
    ]
}

]

上面的数据 怎么转换为这样的一维数组数据

[

{date: '2019-08-31', 'A组': 988, 'B组': 988, 'C组': 988, 'D组': 988},
{date: '2019-09-30', 'A组': 823, 'B组': 823, 'C组': 823, 'D组': 823},
{date: '2019-10-31', 'A组': 235, 'B组': 235, 'C组': 235,'D组': 235},
{date: '2019-11-30', 'A组': 1042, 'B组': 1042, 'C组': 1042, 'D组': 1042},
{date: '2019-12-31', 'A组': 988, 'B组': 988,'C组': 235,'D组': 235},
{date: '2020-01-31', 'A组': 823, 'B组': 235,'C组': 235,'D组': 235},
.
.
.

]

###

问题解决

const hash = {};
// 这里的originList是你的原始数据
originList.forEach(ele => {
  const { name } = ele;
  ele.data.forEach(item => {
    const { date } = item;
    hash[date] || (hash[date] = {});
    hash[date][name] = item.count; 
  })
});

// 其实到这一步使用hash就已经可以了,后面的可能省略掉
const resrult = Object.entries(hash).map(([key, value]) => {
  value.date = key;
  return value;
})

思路分析

看了下需求,就是合并数据后再分组

  • 合并数据木有简便方法,只能挨个遍历一下
  • 合并完了之后再进行分组,分组也木有简便方法,只能挨个遍历

如果老是这样遍历的话,在数据量大的时候,时间复杂度就老高老高了.
所以得想办法减少遍历的次数

###

一个简单的方法:

大致思路就是使用一个 Map(就用 Object 也可以) 来中转数据。

Map 的 key 采用 date 的值,然后 value 中存储 A组 B组 等各种字段所构成的一个 Object。

遍历所有的数据,填充到对应的 Map item 中,最后遍历整个 Map,拼接成你想要的这种数据即可。

Map 的大致结构如下:

{
  [date1]: {
    [A组]: XXX,
    [B组]: XXX,
    ...
  },
  [date2]: {
    [A组]: XXX,
    [B组]: XXX,
    ...
  },
  ...
}

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • js如何将二维对象数组生成一维对象数据

    js如何将二维对象数组生成一维对象数据

  • React源码中看到的一处疑惑点

    React源码中看到的一处疑惑点

  • vue-router嵌套的问题

    vue-router嵌套的问题

  • ant design pro第一次打开页面点击菜单

    ant design pro第一次打开页面点击菜单

腾讯云代理商
海外云服务器