如何过滤基于属性的对象以比较所有具有相同值的对象，然后混合特定值？

Question

有可能吗？所以这是图表的摘录：

 [
      {
        "colorName": "yellow",
        "slug": "yellow",
        "colourDescription": "",
        "colourHex": {
          "hex": "#BF0000"
        },
        "colourSerie": "XX1",
        "id": "48361636",
        "secondaryColour": "hsla(0, 100.00%, 12.91%, 1.00)",
        "relatedModels": [
          {
            "id": "48355531",
            "modelName": "modelOne"
          },
          {
            "id": "48355536",
            "modelName": "modelTwo"
          }
        ]
      },
      {
        "colorName": "green",
        "slug": "green",
        "colourDescription": "",
        "colourHex": {
          "hex": "#C3E300"
        },
        "colourSerie": "XX2",
        "id": "58375424",
        "secondaryColour": "hsla(68.45814977973569, 100.00%, 14.24%, 1.00)",
        "relatedModels": [
          {
            "id": "48355512",
            "modelName": "modelFour"
          },
          {
            "id": "48354230",
            "modelName": "modelOne"
          },
          {
            "id": "48355529",
            "modelName": "modelThree"
          }
        ]
      },
      {
        "colorName": "yellow",
        "slug": "yellow",
        "colourDescription": "",
        "colourHex": {
          "hex": "#BF0000"
        },
        "colourSerie": "XX1",
        "id": "48361636",
        "secondaryColour": "hsla(0, 100.00%, 12.91%, 1.00)",
        "relatedModels": [
          {
            "id": "48355531",
            "modelName": "modelOne"
          },
          {
            "id": "48355536",
            "modelName": "modelTwo"
          }
        ]
      },
      ...
    ]

所以在图中我有几种颜色具有相同的名称“colorName”。然而，它们在十六进制中略有不同。所以我想要实现的是，过滤图形并找到重复的图形，保留名称但混合属性“relatedModels”，所以如果在原始查询中我有：

colorName: "yellow"
relatedModels: [{modelName:"modelOne"} , {modelName: "modelTwo"}]

colorName: "yellow"
relatedModels: [{modelName:"modelThree"} , {modelName: "modelFour"}]

colorName: "blue"
relatedModels: [{modelName:"modelOne"} , {modelName: "modelTwo"}]

最后我会有：

colorName: "yellow"
relatedModels: [{modelName:"modelOne"} , {modelName: "modelTwo"}, {modelName: "modelThree"}, {modelName: "modelFour"}]

colorName: "blue"
relatedModels: [{modelName:"modelOne"} , {modelName: "modelTwo"}]

我不确定这是否可能，或者至少在一轮中，我想实现这一目标的另一件事是制作 2 个不同的数组，提取非唯一值和唯一值在 2 个不同的对象中，然后以某种方式操纵独特的对象来混合它们（完全不知道这部分），然后将结果与其他对象再次组合，但是我不知道是否可能，查看示例以获得独特的和非唯一值，是与数组相关的所有内容，并且仅获取属性本身的值而不是对象及其值。

可以做的是，在 vuex 突变中，一旦我得到颜色数组，return 也是唯一值，但是如果它找到 2 个具有相同值的 modelName，只取最后一个而忽略下一个，但这不是我想要的，而是混合两个值。

        retrieveColours(state) {
            ...
            const key = 'colorName';
            state.uniqueColours = [...new Map(state.colours.map(item =>
                [item[key], item])).values()]; //return unique value and its values
        },

在此先感谢您的帮助，也欢迎提出其他建议。

Answer 1

您可以通过以下方式实现该结果：

const result = data.reduce((accu, current) => {

 const obj = accu.find(o => o.colorName === current.colorName)
 if (obj) {
   /* 
    If there is already an object with the same 'colorName' then loop 
    through the 'current.relatedModels' array and add the unique models 
    to this object's 'relatedModels' array.
   */

    for (let model of current.relatedModels) {
      if (!obj.relatedModels.some(m => m.modelName === model.modelName)) {
        obj.relatedModels.push({ ...model })
      }
    }

  } else {
    const {relatedModels, ...rest} = current
    accu.push({ ...rest, relatedModels: relatedModels.map(m => {return {...m}}) })
  }

  return accu
}, [])

示例：

const data = [
  {
    colorName: 'yellow', "slug": "yellow", "colourDescription": "", "colourHex": { "hex": "#BF0000" }, "colourSerie": "XX1", "id": "48361636", "secondaryColour": "hsla(0, 100.00%, 12.91%, 1.00)",
    relatedModels: [
      { id: '48355531', modelName: 'modelOne' },
      { id: '48355536', modelName: 'modelTwo' },
    ]
  },
  {
    colorName: 'green', "slug": "green", "colourDescription": "", "colourHex": { "hex": "#C3E300" }, "colourSerie": "XX2", "id": "58375424", "secondaryColour": "hsla(68.45814977973569, 100.00%, 14.24%, 1.00)",
    relatedModels: [
      { id: '48355512', modelName: 'modelFour' },
      { id: '48354230', modelName: 'modelOne' },
      { id: '48355529', modelName: 'modelThree' },
    ]
  },
  {
    colorName: 'yellow', "slug": "yellow", "colourDescription": "", "colourHex": { "hex": "#BF0000" }, "colourSerie": "XX1", "id": "48361636", "secondaryColour": "hsla(0, 100.00%, 12.91%, 1.00)",
    relatedModels: [
      { id: '123123123', modelName: 'modelThree' },
      { id: '91827391827', modelName: 'modelFour' },
    ]
  }
]

const result = data.reduce((accu, current) => {
 const obj = accu.find(o => o.colorName === current.colorName)
 if (obj) {
    for (let model of current.relatedModels) {
      if (!obj.relatedModels.some(m => m.modelName === model.modelName)) {
        obj.relatedModels.push({ ...model })
      }
    }
  } else {
    const {relatedModels, ...rest} = current
    accu.push({ ...rest, relatedModels: relatedModels.map(m => {return {...m}}) })
  }
  return accu
}, [])

console.log(JSON.stringify(result, null, 2))

.as-console-wrapper { min-height: 100% }

参考：

.reduce(): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce
.find(): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find
.some(): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some
const {relatedModels, ...rest} = current: Object Destructuring

如何过滤基于属性的对象以比较所有具有相同值的对象，然后混合特定值？

How to filter an object based in a property to compare all that have the same value, then mix a specific value?

javascript

vuejs3

如何过滤基于 属性 的对象以比较所有具有相同值的对象，然后混合特定值？

How to filter an object based in a property to compare all that have the same value, then mix a specific value?

javascript

vuejs3

如何过滤基于属性的对象以比较所有具有相同值的对象，然后混合特定值？