JavaScript数组元素合并技巧：基于对象属性值
在JavaScript开发中，经常需要处理包含嵌套对象和数组的复杂数据结构。一个常见需求是根据对象的特定属性值，将数组中的元素进行合并。
让我们来看一个例子：
const arr = [
{ title: '标题1', url: 'url', groupid: -1 },
{ title: '标题2', url: 'url', groupid: 123 },
{ title: '标题3', url: 'url', groupid: 123 },
{ title: '标题4', url: 'url', groupid: -1 },
{ title: '标题5', url: 'url', groupid: 456 },
{ title: '标题6', url: 'url', groupid: 456 },
{ title: '标题6', url: 'url', groupid: 789 },
];
我们的目标是将groupid相同的对象合并成一个新的数组元素，并将groupid作为新元素的属性。如果groupid为-1，则删除该属性，并将对象添加到新数组中。
立即学习“Java免费学习笔记（深入）”；
可以使用reduce方法高效地实现这一目标。reduce方法接收两个参数：累加器和当前元素，并返回一个新值。我们可以利用累加器构建新的数组，并比较当前元素与累加器中最后一个元素的groupid属性。
以下代码实现了这个功能：
const res = arr.reduce((previous, current) => {
const lastIndex = previous.length - 1;
const last = lastIndex >= 0 ? previous[lastIndex] : null;
if (last && last.groupId === current.groupId) {
// 合并具有相同 groupId 的元素
if (last.group) {
last.group.push({ ...current });
} else {
previous[lastIndex] = {
groupId: last.groupId,
group: [{ ...last }, { ...current }],
};
}
} else {
// 添加新的元素
const newItem = { ...current };
if (newItem.groupId === -1) delete newItem.groupId;
previous.push(newItem);
}
return previous;
}, []);
这段代码有效地将具有相同groupid属性的对象合并，并处理了groupid为-1的特殊情况。最终结果res是一个新的数组，包含了合并后的元素。 这个方法简洁高效，充分利用了reduce方法的特性。
