在对象列表中，如何以JavaScript功能方式合并一些对象道具?

Question

例如，我有产品对象列表：

我不想只留下唯一的对象，而是将它们组合成一个

[
{
name: "some product",
type: "other",
options: [
{
label: "price",
value: 10
}
]
},
{
name: "merge product",
type: "merge",
options: [
{
label: "size",
value: "L"
},
{
label: "color",
value: "white"
},
]
},
{
name: "merge product",
type: "merge",
options: [
{
label: "size",
value: "XL"
},
{
label: "color",
value: "red"
},
]
},
]

我想要得到的结果是：

[
{
name: "some product",
type: "other",
options: [
{
label: "price",
value: 10
}
]
},
{
name: "merge product",
type: "merge",
options: [
{
label: "size",
value: "L"
},
{
label: "color",
value: "white"
},
{
label: "size",
value: "XL"
},
{
label: "color",
value: "red"
},
]
}
}

其中"合并产品"应该具有所有对象相同名称和类型"合并"的选项。 我曾经通过for简单的迭代来实现这一点，中间列表作为存储和比较，但是还有其他不错的功能方法来完成此操作吗？

Answer 1

如何扩展带有原型的数组以进行分组？

Array.prototype.groupBy = function(prop) {
return this.slice().reduce(function(groups, item) {
var val = item[prop];
groups[val] = groups[val] || [];
groups[val].push(item);
return groups;
}, {});
}

使用它很简单var groupedArray = originalArray.groupBy('name');

预期成果 -

{
"some product":[
{
"name":"some product",
"type":"other",
"options":[
{
"label":"price",
"value":10
}
]
}
],
"merge product":[
{
"name":"merge product",
"type":"merge",
"options":[
{
"label":"size",
"value":"L"
},
{
"label":"color",
"value":"white"
}
]
},
{
"name":"merge product",
"type":"merge",
"options":[
{
"label":"size",
"value":"XL"
},
{
"label":"color",
"value":"red"
}
]
}
]
}

工作演示 - https://jsfiddle.net/rahulrulez/0537xesp/

编辑 - 更新了代码，防止原始数组发生突变。

Answer 2

试试这个：

const mergedArr = myArr.reduce((acc, val) => {
const prevIndex = acc.findIndex(prevVal => prevVal.name === val.name && prevVal.type === val.type)
if (prevIndex > -1) {
acc[prevIndex] = Object.assign(acc[prevIndex], {
options: acc[prevIndex].options.concat(val.options)
})
} else acc.push(val)
return acc
}, [])