如何以角度消除数组中的重复对象答案

【问题标题】：How to eleminate the duplicate objects within the array in angular如何以角度消除数组中的重复对象
【发布时间】：2021-10-08 23:07:36
【问题描述】：

我正在尝试过滤重复值并将唯一值作为对象数组获取。我不知道如何根据颜色获得唯一值。所以下面是我的数据：

[
    {
        "code": "xxxx1",
     
        "priceData": {
            "currencyIso": "USD",
            "value": 649.99
        },
 
        "variants": [
            {
                "color": "#212028 |Black",
            }
        ]
    },
    {
        "code": "xx2",
        "priceData": {
            "currencyIso": "USD",
            "value": 999.99
        },

        "variants": [
            {
                "color": "#212028 |Black",
            },
        ]
    },
    {
        "code": "xx3",
        "priceData": {
            "currencyIso": "USD",
            "value": 549.99
        },
        "variants": [
            {
                "color": "#D3CCC1 |Silver",
            },
           
        ]
    },
    {
        "code": "xxx-4",

        "priceData": {
            "currencyIso": "USD",
            "value": 649.99
        },
   
        "variants": [
            {
                "color": "#D3CCC1 |Silver",
               
            }
        ]
    }
]

预期值为：

[
    {
        "code": "xxxx1",
     
        "priceData": {
            "currencyIso": "USD",
            "value": 649.99
        },
 
        "variants": [
            {
                "color": "#212028 |Black",
            }
        ]
    },
    {
        "code": "xx3",
        "priceData": {
            "currencyIso": "USD",
            "value": 549.99
        },
        "variants": [
            {
                "color": "#D3CCC1 |Silver",
            },
           
        ]
    },
   
]

以下代码仅返回对象的变体数组。但我想要作为我上面提到的预期结果

  let variants2 = Array.from(
            new Set(
              variants.map(
                (a) => a.variants
              )
            )
          ).map((variants) => {
            return variants.find((a) => a.color=== a.color);
          });
          [
            ...new Map(variants2.map((item) => [item.value, item])).values(),
          ];

谁能帮我解决这个问题？

【问题讨论】：

请说明data 和expected value 之间的区别。代码很长，与解决方案/问题无关。

标签： javascript angular ecmascript-6 filter es6-map

【解决方案1】：

许多可能的方法之一（输入数组称为items）：

Array.from(new Map(items.reverse().map(item => [item.variants[0].color, item])).values()).reverse();

测试：

const items = [
    {
        "code": "xxxx1",
     
        "priceData": {
            "currencyIso": "USD",
            "value": 649.99
        },
 
        "variants": [
            {
                "color": "#212028 |Black",
            }
        ]
    },
    {
        "code": "xx2",
        "priceData": {
            "currencyIso": "USD",
            "value": 999.99
        },

        "variants": [
            {
                "color": "#212028 |Black",
            },
        ]
    },
    {
        "code": "xx3",
        "priceData": {
            "currencyIso": "USD",
            "value": 549.99
        },
        "variants": [
            {
                "color": "#D3CCC1 |Silver",
            },
           
        ]
    },
    {
        "code": "xxx-4",

        "priceData": {
            "currencyIso": "USD",
            "value": 649.99
        },
   
        "variants": [
            {
                "color": "#D3CCC1 |Silver",
               
            }
        ]
    }
];
const items2 = Array.from(new Map(items.reverse().map(item => [item.variants[0].color, item])).values()).reverse();
console.log(items2);

请注意，items.reverse() 将原始数组 原地反转。如果您需要原始订单，则必须再次调用items.reverse()（在创建items2 之后）。

对于每种独特的颜色，这种方法将 first 对象放入结果中，如您的示例所示。如果获取 last 对象也可以，则可以从上述代码中删除两个 .reverse() 调用：

Array.from(new Map(items.map(item => [item.variants[0].color, item])).values());

【讨论】：