文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何在react中根据颜色对数据进行分组并求和为相同大小

问如何在react中根据颜色对数据进行分组并求和为相同大小
EN

Stack Overflow用户
提问于 2021-06-24 21:48:20
回答 4查看 98关注 0票数 1
代码语言：javascript
复制
data = [
      {
        color: 'red',
        _1x: 0,
        _2x: 12,
        _3x: 0,
        _4x: 0,
        xxs: 0,
        xs: 0,
        s: 0,
        m: 0,
        l: 0,
        xl: 0
      },
      {
        color: 'red',
        _1x: 0,
        _2x: 9,
        _3x: 0,
        _4x: 0,
        xxs: 0,
        xs: 0,
        s: 0,
        m: 0,
        l: 0,
        xl: 0
      },
      {
        color: 'red',
        _1x: 0,
        _2x: 0,
        _3x: 12,
        _4x: 0,
        xxs: 0,
        xs: 0,
        s: 0,
        m: 0,
        l: 0,
        xl: 0
      },
      {
        color: 'red',
        _1x: 0,
        _2x: 0,
        _3x: 12,
        _4x: 0,
        xxs: 0,
        xs: 0,
        s: 0,
        m: 0,
        l: 0,
        xl: 0
      },
      {
        color: 'red',
        _1x: 0,
        _2x: 0,
        _3x: 0,
        _4x: 12,
        xxs: 0,
        xs: 0,
        s: 0,
        m: 0,
        l: 0,
        xl: 0
      },
      {
        color: 'red',
        _1x: 0,
        _2x: 0,
        _3x: 0,
        _4x: 12,
        xxs: 0,
        xs: 0,
        s: 0,
        m: 0,
        l: 0,
        xl: 0
      },
      {
        color: 'pink',
        _1x: 0,
        _2x: 0,
        _3x: 0,
        _4x: 0,
        xxs: 0,
        xs: 0,
        s: 0,
        m: 0,
        l: 14,
        xl: 0
      },
      {
        color: 'red',
        _1x: 0,
        _2x: 0,
        _3x: 0,
        _4x: 0,
        xxs: 0,
        xs: 0,
        s: 0,
        m: 0,
        l: 14,
        xl: 0
      },
      {
        color: 'red',
        _1x: 0,
        _2x: 0,
        _3x: 0,
        _4x: 0,
        xxs: 0,
        xs: 0,
        s: 0,
        m: 14,
        l: 0,
        xl: 0
      },
      {
        color: 'red',
        _1x: 0,
        _2x: 0,
        _3x: 0,
        _4x: 0,
        xxs: 0,
        xs: 0,
        s: 0,
        m: 12,
        l: 0,
        xl: 0
      },
      {
        color: 'red',
        _1x: 0,
        _2x: 0,
        _3x: 0,
        _4x: 0,
        xxs: 0,
        xs: 0,
        s: 14,
        m: 0,
        l: 0,
        xl: 0
      },
      {
        color: 'pink',
        _1x: 0,
        _2x: 0,
        _3x: 0,
        _4x: 0,
        xxs: 0,
        xs: 0,
        s: 14,
        m: 0,
        l: 0,
        xl: 0
      },
      {
        color: 'yellow',
        _1x: 0,
        _2x: 0,
        _3x: 0,
        _4x: 0,
        xxs: 0,
        xs: 0,
        s: 0,
        m: 0,
        l: 0,
        xl: 12
      },
      {
        color: 'pink',
        _1x: 0,
        _2x: 0,
        _3x: 0,
        _4x: 0,
        xxs: 0,
        xs: 0,
        s: 0,
        m: 0,
        l: 0,
        xl: 12
      }]

如何根据颜色和大小对数组求和，然后求出相同大小的merge/group。例如，有三个数据，第一个数据是红色，大小为xs，值12，然后是第二个和第三个黄色，大小相同，xs值不同。

代码语言：javascript
复制
color | xs | s
red   | 12 | 
yellow | 13 |
yellow | 2 |
yellow | 2 | 12

那么输出应该是这样的：

代码语言：javascript
复制
color | xs | s
red   | 12 | 
yellow | 17 | 12

预期输出应如下所示：

代码语言：javascript
复制
 data =   [
              {
                color: 'red',
                _1x: 0,
                _2x: 21,
                _3x: 24,
                _4x: 24,
                xxs: 0,
                xs: 0,
                s: 28,
                m: 26,
                l: 14,
                xl: 0
              },
              {
                color: 'pink',
                _1x: 0,
                _2x: 0,
                _3x: 0,
                _4x: 0,
                xxs: 0,
                xs: 0,
                s: 14,
                m: 0,
                l: 14,
                xl: 12
              },
              },
              {
                color: 'yellow',
                _1x: 0,
                _2x: 0,
                _3x: 0,
                _4x: 0,
                xxs: 0,
                xs: 0,
                s: 0,
                m: 0,
                l: 0,
                xl: 12
              }]

代码：https://stackblitz.com/edit/react-hook-j4wje4

javascript
typescript
react-hooks
EN

回答 4

Stack Overflow用户

发布于 2021-06-24 22:09:40

您可以使用color作为密钥，并使用array#reduce基于此密钥对阵列进行分组。然后，您可以使用array#reduce对类似大小的值进行求和。

​

代码语言：javascript
复制
const data = [ { color: 'red', size: '2X', _1x: 0, _2x: 12, _3x: 0, _4x: 0, xxs: 0, xs: 0, s: 0, m: 0, l: 0, xl: 0 }, { color: 'red', size: '2X', _1x: 0, _2x: 9, _3x: 0, _4x: 0, xxs: 0, xs: 0, s: 0, m: 0, l: 0, xl: 0 }, { color: 'red', size: '3X', _1x: 0, _2x: 0, _3x: 12, _4x: 0, xxs: 0, xs: 0, s: 0, m: 0, l: 0, xl: 0 }, { color: 'red', size: '3X', _1x: 0, _2x: 0, _3x: 12, _4x: 0, xxs: 0, xs: 0, s: 0, m: 0, l: 0, xl: 0 }, { color: 'red', size: '4X', _1x: 0, _2x: 0, _3x: 0, _4x: 12, xxs: 0, xs: 0, s: 0, m: 0, l: 0, xl: 0 }, { color: 'red', size: '4X', _1x: 0, _2x: 0, _3x: 0, _4x: 12, xxs: 0, xs: 0, s: 0, m: 0, l: 0, xl: 0 }, { color: 'pink', size: 'L', _1x: 0, _2x: 0, _3x: 0, _4x: 0, xxs: 0, xs: 0, s: 0, m: 0, l: 14, xl: 0 }, { color: 'red', size: 'L', _1x: 0, _2x: 0, _3x: 0, _4x: 0, xxs: 0, xs: 0, s: 0, m: 0, l: 14, xl: 0 }, { color: 'red', size: 'M', _1x: 0, _2x: 0, _3x: 0, _4x: 0, xxs: 0, xs: 0, s: 0, m: 14, l: 0, xl: 0 }, { color: 'red', size: 'M', _1x: 0, _2x: 0, _3x: 0, _4x: 0, xxs: 0, xs: 0, s: 0, m: 12, l: 0, xl: 0 }, { color: 'red', size: 'S', _1x: 0, _2x: 0, _3x: 0, _4x: 0, xxs: 0, xs: 0, s: 14, m: 0, l: 0, xl: 0 }, { color: 'pink', size: 'S', _1x: 0, _2x: 0, _3x: 0, _4x: 0, xxs: 0, xs: 0, s: 14, m: 0, l: 0, xl: 0 }, { color: 'yellow', size: 'XL', _1x: 0, _2x: 0, _3x: 0, _4x: 0, xxs: 0, xs: 0, s: 0, m: 0, l: 0, xl: 12 }, { color: 'pink', size: 'XL', _1x: 0, _2x: 0, _3x: 0, _4x: 0, xxs: 0, xs: 0, s: 0, m: 0, l: 0, xl: 12 }],
    result = Object.values(data.reduce((r, {color, size, ...rest}) => {
      r[color] ||= { color };
      Object.keys(rest).forEach(k => {
        r[color][k] = (r[color][k] || 0) + rest[k];
      });
      return r;
    },{}));
console.log(result);
代码语言：javascript
复制
.as-console-wrapper { max-height: 100% !important; top: 0; }

​

票数 2
EN

Stack Overflow用户

发布于 2021-06-24 22:14:07

试试这个：

(请注意，我使用了您的部分数据，而不是全部数据)

​

代码语言：javascript
复制
const data=[{color:"red",size:"2X",_1x:0,_2x:12,_3x:0,_4x:0,xxs:0,xs:0,s:0,m:0,l:0,xl:0},{color:"red",size:"2X",_1x:0,_2x:9,_3x:0,_4x:0,xxs:0,xs:0,s:0,m:0,l:0,xl:0},{color:"red",size:"3X",_1x:0,_2x:0,_3x:12,_4x:0,xxs:0,xs:0,s:0,m:0,l:0,xl:0},{color:"red",size:"3X",_1x:0,_2x:0,_3x:12,_4x:0,xxs:0,xs:0,s:0,m:0,l:0,xl:0},{color:"red",size:"4X",_1x:0,_2x:0,_3x:0,_4x:12,xxs:0,xs:0,s:0,m:0,l:0,xl:0},{color:"red",size:"4X",_1x:0,_2x:0,_3x:0,_4x:12,xxs:0,xs:0,s:0,m:0,l:0,xl:0},{color:"pink",size:"L",_1x:0,_2x:0,_3x:0,_4x:0,xxs:0,xs:0,s:0,m:0,l:14,xl:0},{color:"red",size:"L",_1x:0,_2x:0,_3x:0,_4x:0,xxs:0,xs:0,s:0,m:0,l:14,xl:0},{color:"red",size:"M",_1x:0,_2x:0,_3x:0,_4x:0,xxs:0,xs:0,s:0,m:14,l:0,xl:0},{color:"red",size:"M",_1x:0,_2x:0,_3x:0,_4x:0,xxs:0,xs:0,s:0,m:12,l:0,xl:0},{color:"red",size:"S",_1x:0,_2x:0,_3x:0,_4x:0,xxs:0,xs:0,s:14,m:0,l:0,xl:0},{color:"red",size:"S",_1x:0,_2x:0,_3x:0,_4x:0,xxs:0,xs:0,s:14,m:0,l:0,xl:0},{color:"red",size:"XL",_1x:0,_2x:0,_3x:0,_4x:0,xxs:0,xs:0,s:0,m:0,l:0,xl:12},{color:"red",size:"XL",_1x:0,_2x:0,_3x:0,_4x:0,xxs:0,xs:0,s:0,m:0,l:0,xl:12},{color:"red",size:"2X",_1x:0,_2x:2,_3x:0,_4x:0,xxs:0,xs:0,s:0,m:0,l:0,xl:0},{color:"red",size:"3X",_1x:0,_2x:0,_3x:2,_4x:0,xxs:0,xs:0,s:0,m:0,l:0,xl:0},{color:"red",size:"4X",_1x:0,_2x:0,_3x:0,_4x:2,xxs:0,xs:0,s:0,m:0,l:0,xl:0},{color:"red",size:"L",_1x:0,_2x:0,_3x:0,_4x:0,xxs:0,xs:0,s:0,m:0,l:3,xl:0},{color:"red",size:"M",_1x:0,_2x:0,_3x:0,_4x:0,xxs:0,xs:0,s:0,m:14,l:0,xl:0},{color:"red",size:"M",_1x:0,_2x:0,_3x:0,_4x:0,xxs:0,xs:0,s:0,m:2,l:0,xl:0},{color:"red",size:"S",_1x:0,_2x:0,_3x:0,_4x:0,xxs:0,xs:0,s:14,m:0,l:0,xl:0},{color:"red",size:"XL",_1x:0,_2x:0,_3x:0,_4x:0,xxs:0,xs:0,s:0,m:0,l:0,xl:3},{color:"red",size:"XS",_1x:0,_2x:0,_3x:0,_4x:0,xxs:0,xs:6,s:0,m:0,l:0,xl:0},{color:"red",size:"2X",_1x:0,_2x:2,_3x:0,_4x:0,xxs:0,xs:0,s:0,m:0,l:0,xl:0},{color:"red",size:"3X",_1x:0,_2x:0,_3x:2,_4x:0,xxs:0,xs:0,s:0,m:0,l:0,xl:0},{color:"red",size:"4X",_1x:0,_2x:0,_3x:0,_4x:2,xxs:0,xs:0,s:0,m:0,l:0,xl:0},{color:"red",size:"L",_1x:0,_2x:0,_3x:0,_4x:0,xxs:0,xs:0,s:0,m:0,l:3,xl:0},{color:"red",size:"M",_1x:0,_2x:0,_3x:0,_4x:0,xxs:0,xs:0,s:0,m:14,l:0,xl:0},{color:"red",size:"M",_1x:0,_2x:0,_3x:0,_4x:0,xxs:0,xs:0,s:0,m:2,l:0,xl:0},{color:"red",size:"S",_1x:0,_2x:0,_3x:0,_4x:0,xxs:0,xs:0,s:14,m:0,l:0,xl:0},{color:"red",size:"XL",_1x:0,_2x:0,_3x:0,_4x:0,xxs:0,xs:0,s:0,m:0,l:0,xl:3},{color:"red",size:"XS",_1x:0,_2x:0,_3x:0,_4x:0,xxs:0,xs:6,s:0,m:0,l:0,xl:0}];

        var object = {};

        var result = data.reduce(function (r, o) {
            var key = o.color + '|' + o.size;

            if (!object[key]) {
                object[key] = Object.assign({}, { color: o.color, sizes: o.size,  value: o["_" + o.size.toLowerCase()] }); // create a copy of o
                r.push(object[key]);
            } else {
                object[key].value += o["_" + o.size.toLowerCase()];
            }

            return r;
        }, []);

        console.log(object);

​

票数 1
EN

Stack Overflow用户

发布于 2021-06-24 22:17:54

​

代码语言：javascript
复制
const SIZES = ['_2x', '_3x', '_4x', 'l', 'm', 's', 'xl'];
const data = [
      {
        color: 'red',
        size: '_2X',
        _1x: 0,
        _2x: 12,
        _3x: 0,
        _4x: 0,
        xxs: 0,
        xs: 0,
        s: 0,
        m: 0,
        l: 0,
        xl: 0
      },
      {
        color: 'red',
        size: '_2X',
        _1x: 0,
        _2x: 9,
        _3x: 0,
        _4x: 0,
        xxs: 0,
        xs: 0,
        s: 0,
        m: 0,
        l: 0,
        xl: 0
      },
      {
        color: 'red',
        size: '_3X',
        _1x: 0,
        _2x: 0,
        _3x: 12,
        _4x: 0,
        xxs: 0,
        xs: 0,
        s: 0,
        m: 0,
        l: 0,
        xl: 0
      },
      {
        color: 'red',
        size: '_3X',
        _1x: 0,
        _2x: 0,
        _3x: 12,
        _4x: 0,
        xxs: 0,
        xs: 0,
        s: 0,
        m: 0,
        l: 0,
        xl: 0
      },
      {
        color: 'red',
        size: '_4X',
        _1x: 0,
        _2x: 0,
        _3x: 0,
        _4x: 12,
        xxs: 0,
        xs: 0,
        s: 0,
        m: 0,
        l: 0,
        xl: 0
      },
      {
        color: 'red',
        size: '_4X',
        _1x: 0,
        _2x: 0,
        _3x: 0,
        _4x: 12,
        xxs: 0,
        xs: 0,
        s: 0,
        m: 0,
        l: 0,
        xl: 0
      },
      {
        color: 'pink',
        size: 'L',
        _1x: 0,
        _2x: 0,
        _3x: 0,
        _4x: 0,
        xxs: 0,
        xs: 0,
        s: 0,
        m: 0,
        l: 14,
        xl: 0
      },
      {
        color: 'red',
        size: 'L',
        _1x: 0,
        _2x: 0,
        _3x: 0,
        _4x: 0,
        xxs: 0,
        xs: 0,
        s: 0,
        m: 0,
        l: 14,
        xl: 0
      },
      {
        color: 'red',
        size: 'M',
        _1x: 0,
        _2x: 0,
        _3x: 0,
        _4x: 0,
        xxs: 0,
        xs: 0,
        s: 0,
        m: 14,
        l: 0,
        xl: 0
      },
      {
        color: 'red',
        size: 'M',
        _1x: 0,
        _2x: 0,
        _3x: 0,
        _4x: 0,
        xxs: 0,
        xs: 0,
        s: 0,
        m: 12,
        l: 0,
        xl: 0
      },
      {
        color: 'red',
        size: 'S',
        _1x: 0,
        _2x: 0,
        _3x: 0,
        _4x: 0,
        xxs: 0,
        xs: 0,
        s: 14,
        m: 0,
        l: 0,
        xl: 0
      },
      {
        color: 'pink',
        size: 'S',
        _1x: 0,
        _2x: 0,
        _3x: 0,
        _4x: 0,
        xxs: 0,
        xs: 0,
        s: 14,
        m: 0,
        l: 0,
        xl: 0
      },
      {
        color: 'yellow',
        size: 'XL',
        _1x: 0,
        _2x: 0,
        _3x: 0,
        _4x: 0,
        xxs: 0,
        xs: 0,
        s: 0,
        m: 0,
        l: 0,
        xl: 12
      },
      {
        color: 'pink',
        size: 'XL',
        _1x: 0,
        _2x: 0,
        _3x: 0,
        _4x: 0,
        xxs: 0,
        xs: 0,
        s: 0,
        m: 0,
        l: 0,
        xl: 12
      }]



console.log(

data.reduce((acc, el) => {
    let colorpos = acc.findIndex(([color]) => color == el.color);
    if(!~colorpos) {
      colorpos = acc.length;
      acc.push([el.color, ...Array.from({length: SIZES.length}).fill(0)])
    };
    const sizepos = SIZES.indexOf(el.size.toLowerCase()) + 1;
    acc[colorpos][sizepos] += el[el.size.toLowerCase()];
    return acc;
}, [
  ['color', ...SIZES]
])
.map(str => str.join('\t|')).join('\n')

);

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/68117053

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档