Vue数组对象，数组中多个对象将colorName值相同的合并

原创已于 2022-12-31 13:58:10 修改 · 1.1k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #前端

于 2022-12-31 10:06:20 首次发布

web端专栏收录该内容

29 篇文章

订阅专栏

该博客介绍了如何利用JavaScript的Object.values()和reduce()方法对数据源进行处理，以达到特定的效果。在处理过程中，首先对尺码进行去重排序，然后遍历数据源，根据颜色名称更新或创建新的对象。最终，通过reduce方法构建了一个新的对象结构，其中包含了按颜色分类并整合了尺码信息的数据。

这里使用到了Object.values(), xx.reduce((prev, cur, index))方法

首先这个数据源是长这样的

在这里插入图片描述

需要的效果是长这样
在这里插入图片描述
代码

skuSizeData 是数据源
skuSizePropData 是在此之前我将所有的尺码进行一个去重排序获取，插入到一个数组；例：[‘XL’, ‘2XL’]
xx.reduce方法prev为上一个元素，cur表示当前原始,最后有个{}, 意思是初始化一个空对象，每次返回一个对象
Object.values为获取对象的value值

// skuSizeData 是数据源
// skuSizePropData 是在此之前我将所有的尺码进行一个去重排序获取，插入到一个数组；例： ['XL', '2XL']
skuSizeData = Object.values(skuSizeData.reduce((prev: { [x: string]: any; }, cur: { [x: string]: any; colorName: string|number; }) => {
        if (prev[cur.colorName]) {
          skuSizePropData.forEach((item: string|number) => {
            if (cur[item]) prev[cur.colorName][item] = cur[item];
          });
        } else {
          prev[cur.colorName] = { ...cur };
        }
        return prev;
      }, {}));
    });